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

    "metaData": {
      "customizeData": [
        {
          "name": "hwc-theme",
          "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar.Fullscreen",
          "extra": ""
        }
      ]
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.

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

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%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
368.
369.
370.
371.
372.
373.
374.
375.
376.
377.
378.
379.
380.
381.
382.
383.
384.
385.
386.
387.
388.
389.
390.
391.
392.
393.
394.
395.
396.
397.
398.
399.
400.
401.
402.
403.
404.
405.
406.
407.
408.
409.
410.
411.
412.
413.
414.
415.
416.
417.
418.
419.
420.
421.
422.
423.
424.
425.
426.
427.
428.
429.
430.
431.
432.
433.
434.
435.
436.
437.
438.
439.
440.
441.
442.
443.
444.
445.
446.
447.
448.
449.
450.
451.
452.
453.
454.
455.
456.
457.
458.
459.
460.
461.
462.
463.
464.
465.
466.
467.
468.
469.
470.
471.
472.
473.
474.
475.
476.
477.
478.
479.
480.
481.
482.
483.
484.
485.
486.
487.
488.
489.
490.
491.
492.
493.
494.
495.