HarmonyOS3.0真机下丝滑2048游戏 原创 精华

@toc

前言

之前张荣超老师在直播课里讲OpenHarmony 3.1 Release 版本的基础能力、分布式能力、应用程序框架能力时，用开发板讲解了他的经典游戏2048，此帖子实例也是跟着张老师直播回放撸出来的，加了点横屏时，改变布局，关于2048游戏逻辑，小伙伴们可以到这里学习
OpenHarmony 3.1分布式应用开发—分布式应用案例

真机

开发全过程视频

简介

1. 界面用全屏显示，这里要到config.json文件module节点下添加以下配置

    "metaData": {
      "customizeData": [
        {
          "name": "hwc-theme",
          "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar.Fullscreen",
          "extra": ""
        }
      ]
    },

2. 引用了以下API

// 媒体查询, 用于判断手机是否横屏
import mediaquery from '@ohos.mediaquery'
// 用于存储记录最高分
import dataStorage from '@ohos.data.storage';
// 用于获取上下文
import featureAbility from '@ohos.ability.featureAbility'

3. 游戏开发创建运行过程视频，B站审核通过后，回复到下面回帖内容。

4. 这里是主要代码，感兴趣可以参考一下：

import mediaquery from '@ohos.mediaquery'
import dataStorage from '@ohos.data.storage';
import featureAbility from '@ohos.ability.featureAbility'

let portraitFunc = null
let store

const colors = {
  '0': '#CDC1B4',
  '2': '#EEE4DA',
  '4': '#ECE0C6',
  '8': '#F2B179',
  '16': '#F59563',
  '32': '#F67C5F',
  '64': '#F65E3B',
  '128': '#EDCF72',
  '256': '#EDCC61',
  '1024': '#83AF9B',
  '2048': '#0099CC',
  '2or4': '#645B52',
  'others': '#FFFFFF'
}


class MyStack<T> {
  private items: Array<T> = []

  public push(item: T):void {
    this.items.push(item)
  }

  public pop(): T {
    return this.items.pop()
  }

  public peek(): T {
    return this.items[this.items.length - 1]
  }

  public isEmpty(): boolean {
    return this.items.length ==0
  }

  public size(): number {
    return this.items.length
  }

  public clear(): void {
    this.items = []
  }
}

@Entry
@Component
struct Index {
  // 当前分数
  @State currentScore: number = 0
  // 最高分数
  @State highestScore: number = 0
  // 当前用户操作二维数组
  @State currentArrays: number[][] = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ]
  // 对方用户操作二维数组
  @State enemyArrays: number[][] = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ]
  // 循环下标使用
  private arr: number[] = [0, 1, 2, 3]
  @State isLandscape: boolean = false;
  // 媒体查询横屏
  listener = mediaquery.matchMediaSync('(orientation: landscape)')

  // 当前数组栈
  currentArrayStack: MyStack<number[][]> = new MyStack<number[][]>();
  // 当前分栈
  currentScoreStack: MyStack<number> = new MyStack<number>();

  // 屏幕旋转匹配函数
  onPortrait(mediaQueryResult) {
    if (mediaQueryResult.matches) {
      this.isLandscape = true;
    } else {
      this.isLandscape = false;
    }
  }

  /**
     * 初始游戏
     */
  init() {
    // 当前分数初始化为0
    this.currentScore = 0
    // 最高分数
    let context = featureAbility.getContext()
    context.getOrCreateLocalDir().then((path) => {
      store = dataStorage.getStorageSync(path + '/mystore')
      this.highestScore = store.getSync('highestScore', 0)
    })
    // 当前用户操作二维数组初始化为0
    this.currentArrays = [
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0]
    ]
    // 初始化用户操作二维数组
    this.addTwoOrFourToArrays()
    this.addTwoOrFourToArrays()

    //    // 对方用户操作二维数组初始化为0
    //    this.enemyArrays =  [
    //      [0, 0, 0, 0],
    //      [0, 0, 0, 0],
    //      [0, 0, 0, 0],
    //      [0, 0, 0, 0]
    //    ]

    //    // 初始化对方操作二维数组
    //    this.addTwoOrFourToArrays()
  }

  /**
     * 随机生成2或4到空格子里
     */
  addTwoOrFourToArrays() {
    // 把为0的空格子找出来，保存在array数组里
    let array = []
    for (let row = 0; row < 4; row++) {
      for (let column = 0; column < 4; column++) {
        if (this.currentArrays[row][column] == 0) {
          array.push([row, column])
        }
      }
    }
    // 随机找出一个为0空格子
    let randomIndex = Math.floor(Math.random() * array.length)
    // 找出空格子的行坐标
    let row = array[randomIndex][0]
    // 找出空格子的列坐标
    let column = array[randomIndex][1]
    // 随机出现2或4的机率
    if (Math.random() < 0.8) {
      this.currentArrays[row][column] = 2;
    } else {
      this.currentArrays[row][column] = 4;
    }
  }

  /**
     * Grid滑动函数
     */
  swipeGrid(direction) {
    // 滑动前当前分数赋值给临时变量
    let tempCurrentScore = this.currentScore
    // 滑动后的新数组
    let newArrays = this.changeCurreyArrays(direction)

    if (newArrays.toString() != this.currentArrays.toString()) {
      // 入栈滑动前数组
      this.currentArrayStack.push(this.currentArrays)
      // 入栈滑动后-滑动前当前分
      this.currentScoreStack.push(this.currentScore - tempCurrentScore)
      // 更新当前二维数组数字
      this.currentArrays = newArrays
      // 添加2或4到空格子里
      this.addTwoOrFourToArrays()
      // 保存最高分
      if (this.currentScore > this.highestScore) {
        store.putSync('highestScore', this.currentScore)
      }
    }
  }

  changeCurreyArrays(direction) {
    let newArrays = [
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0]
    ]

    // 处理左滑与右滑
    if (direction == 'left' || direction == 'right') {
      let step = 1 // 默认从左到右，为正数
      if (direction == 'right') {
        // 从右到左，为负数，反方向
        step = -1
      }
      // 一行一行数据处理
      for (var row = 0; row < 4; row++) {
        let array = [] // 临时存储新数据
        let column = 0 // 默认从左到右，下标从0开始
        if (direction == 'right') {
          column = 3 // 从右到左，下标从最大开始
        }
        // 一列一列数据处理
        for (let i = 0; i < 4; i++) {
          if (this.currentArrays[row][column] != 0) {
            // 不为0的数字保存到临时数组里
            array.push(this.currentArrays[row][column])
          }
          // 更新下一列下标
          column += step
        }
        // 合并数据
        for (let i = 0; i < array.length - 1; i++) {
          // 如果相邻两个相同，合并
          if (array[i] == array[i+1]) {
            array[i] += array[i+1] // 两个数相加
            this.currentScore += array[i] // 计算当前得分
            array[i+1] = 0 // 合并后的另一个数据，设置为0
            i++ // 下一个下标数据
          }
        }
        // 重置列下标
        column = 0 // 默认从左到右，下标从0开始
        if (direction == 'right') {
          column = 3 // 从右到左，下标从最大开始
        }

        // 遍历临时新数据
        for (const elem of array) {
          if (elem != 0) {
            // 赋值给新数组
            newArrays[row][column] = elem;
            // 更新列下标是从左到右，还是从右到左
            column += step
          }

        }

      }
    } else if (direction == 'up' || direction == 'down') {
      let step = 1 // 默认从下到上，为正数
      if (direction == 'down') {
        // 从上到下，为负数，反方向
        step = -1
      }
      // 一列一列数据处理
      for (let column = 0; column < 4; column++) {
        // 临时数组
        let array = []
        // 向上滑动，下标从0开始
        let row = 0
        if (direction == 'down') {
          // 向下滑动，下标从3开始
          row = 3
        }

        for (let i = 0; i < 4; i++) {
          if (this.currentArrays[row][column] != 0) {
            // 保存不为0的数据
            array.push(this.currentArrays[row][column])
          }
          // 遍历下一行
          row += step
        }

        // 合并数据
        for (let i = 0; i < array.length - 1; i++) {
          if (array[i] == array[i+1]) {
            array[i] += array[i+1]
            this.currentScore += array[i] // 计算当前得分
            array[i+1] = 0
            i++
          }
        }

        // 更新临时数组数据到新数组
        row = 0
        if (direction == 'down') {
          // 向下滑动，下标从3开始
          row = 3
        }
        for (const elem of array) {
          if (elem != 0) {
            newArrays[row][column] = elem
            row += step
          }
        }
      }
    }

    return newArrays
  }

  aboutToAppear() {
    // 绑定匹配函数
    portraitFunc = this.onPortrait.bind(this)
    // 监听屏幕旋转变化
    this.listener.on('change', portraitFunc)

    // 初始化界面数字
    this.init()
  }

  build() {
    // 如果是横屏用行布局，否则用列布局
    Flex({
      direction: this.isLandscape ? FlexDirection.Row : FlexDirection.Column,
      justifyContent: FlexAlign.Start
    }) {
      Column({ space: 10 }) {
        /**
 * 统计分数标题框
 */
        Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly }) {
          Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
            Text('2048')
              .width('100%')
              .fontColor(Color.White)
              .fontSize(22)
              .textAlign(TextAlign.Center)
            Text('4X4')
              .width('100%')
              .fontColor(Color.White)
              .fontSize(20)
              .textAlign(TextAlign.Center)
          }
          .width(100)
          .height('100%')
          .backgroundColor('#BBADA0')
          .borderRadius(10)

          Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
            Text('当前分')
              .width('100%')
              .fontColor(Color.White)
              .fontSize(22)
              .textAlign(TextAlign.Center)
            Text(this.currentScore.toString())
              .width('100%')
              .fontColor(Color.White)
              .fontSize(20)
              .textAlign(TextAlign.Center)
          }
          .width(100)
          .height('100%')
          .backgroundColor('#BBADA0')
          .borderRadius(10)

          Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
            Text('最高分')
              .width('100%')
              .fontColor(Color.White)
              .fontSize(22)
              .textAlign(TextAlign.Center)
            Text(this.highestScore.toString())
              .width('100%')
              .fontColor(Color.White)
              .fontSize(20)
              .textAlign(TextAlign.Center)
          }
          .width(100)
          .height('100%')
          .backgroundColor('#BBADA0')
          .borderRadius(10)
        }
        .width('100%').height(60).margin({ top: 10 })

        /**
 * 当前用户操作二维数组
 */
        Grid() {
          ForEach(this.arr, (row: number) => {
            ForEach(this.arr, (column: number) => {
              GridItem() {
                Text(this.currentArrays[row][column] == 0 ? '' : this.currentArrays[row][column].toString())
                  .fontSize(22)
                  .width('100%')
                  .height('100%')
                  .textAlign(TextAlign.Center)
                  .backgroundColor(colors[this.currentArrays[row][column].toString()])
                  .fontColor(this.currentArrays[row][column] <= 4 ? colors['2or4'] : colors['others'])
              }
            }, column => column.toString())
          }, row => row.toString())
        }
        .rowsTemplate('1fr 1fr 1fr 1fr')
        .columnsTemplate('1fr 1fr 1fr 1fr')
        .rowsGap(3)
        .columnsGap(3)
        .width(280)
        .height(280)
        .backgroundColor('#BBADA0')
        .gesture(
        GestureGroup(GestureMode.Parallel,
        PanGesture({ direction: PanDirection.Left })
          .onActionEnd((event: GestureEvent) => {
            console.info('xx-left-offsetX: ' +event.offsetX + ', offsetY: ' + event.offsetY)
            this.swipeGrid('left')
          }),
        PanGesture({ direction: PanDirection.Right })
          .onActionEnd((event: GestureEvent) => {
            console.info('xx-right-offsetX: ' +event.offsetX + ', offsetY: ' + event.offsetY)
            this.swipeGrid('right')
          }),
        PanGesture({ direction: PanDirection.Up })
          .onActionEnd((event: GestureEvent) => {
            console.info('xx-up-offsetX: ' +event.offsetX + ', offsetY: ' + event.offsetY)
            this.swipeGrid('up')
          }),
        PanGesture({ direction: PanDirection.Down })
          .onActionEnd((event: GestureEvent) => {
            console.info('xx-down-offsetX: ' +event.offsetX + ', offsetY: ' + event.offsetY)
            this.swipeGrid('down')
          })
        )
        )
      }
      .width(this.isLandscape ? '50%' : '100%')

      Column({ space: 10 }) {
        /**
   * 操作按钮
   */
        Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly }) {
          Button('重新开始', { type: ButtonType.Normal })
            .width(120)
            .height(60)
            .fontSize(20)
            .align(Alignment.Center)
            .backgroundColor('#AD9D8F')
            .fontColor('#FFFFFF')
            .borderRadius(10)
            .onClick((event: ClickEvent) => {
              this.init()
              this.currentArrayStack.clear()
              this.currentScoreStack.clear()
            })
          Button('悔步', { type: ButtonType.Normal })
            .width(90)
            .height(60)
            .fontSize(20)
            .align(Alignment.Center)
            .backgroundColor('#AD9D8F')
            .fontColor('#FFFFFF')
            .borderRadius(10)
            .onClick((event: ClickEvent) => {
              if (this.currentArrayStack.size() > 0) {
                this.currentArrays =  this.currentArrayStack.pop()
                this.currentScore -= this.currentScoreStack.pop()
              }
            })
          Button('设置', { type: ButtonType.Normal })
            .width(90)
            .height(60)
            .fontSize(20)
            .align(Alignment.Center)
            .backgroundColor('#AD9D8F')
            .fontColor('#FFFFFF')
            .borderRadius(10)
        }
        .width('100%').margin({ top: 10 })

        /**
   * 对方用户操作二维数组
   */
        Grid() {
          ForEach(this.arr, (row: number) => {
            ForEach(this.arr, (column: number) => {
              GridItem() {
                Text(this.enemyArrays[row][column] == 0 ? '' : this.enemyArrays[row][column].toString())
                  .fontSize(22)
                  .width('100%')
                  .height('100%')
                  .textAlign(TextAlign.Center)
                  .backgroundColor(colors[this.enemyArrays[row][column].toString()])
                  .fontColor(this.enemyArrays[row][column] <= 4 ? colors['2or4'] : colors['others'])
              }
            }, column => column.toString())
          }, row => row.toString())
        }
        .rowsTemplate('1fr 1fr 1fr 1fr')
        .columnsTemplate('1fr 1fr 1fr 1fr')
        .rowsGap(3)
        .columnsGap(3)
        .width(240)
        .height(240)
        .backgroundColor('#BBADA0')
      }
      .width(this.isLandscape ? '50%' : '100%')

    }
    .width('100%')
    .height('100%')
  }
}

总结

终于可以不用远程模拟器开发了，真机开发就是爽，eTS写代码更爽，目前只有手机升级到了3.0，到时平板审核通过了，就可以尝试分布式流转了。