深鸿会深大小组学习笔记：第二周，从零开发鸿蒙小游戏2048app（下）_在开发板(/dev/fb0)上显示2048小游戏

前言

此前在观看完张荣超老师的“从零开发鸿蒙小游戏app”（2048小游戏）这一视频后，我们写下了视频中已实现功能的学习笔记----“从零开发鸿蒙小游戏app学习笔记 (1)”。对于视频中未提及部分，我们根据张荣超老师提供的源代码进行了学习，在此写下2048小游戏剩余功能的学习笔记。
“从零开发鸿蒙小游戏app学习笔记 (1)”的链接如下：
https://blog.csdn.net/dioda1/article/details/109695154
原视频地址如下：https://edu.51cto.com/center/course/lesson/index?id=658343
一起学习的小伙伴：
Zy82243480
wx15820482064
Lingzijiandevx
pp459816283

概述

上一篇学习笔记完成了：
“创建项目与分析”
“页面布局”
“方格绘制”
“数字输入与背景填充”
“滑动事件的实现”的部分内容。

本篇学习笔记将介绍：
“产生新格子”
“判断游戏是否结束”
“更新当前分数”
“重新开始游戏”
“游戏完整代码”

产生新格子

随机生成值为2或4的格子

随机生成2或4的格子主要分为两步来完成：
第一步，判断所有格子中空余格子存在的位置

addTwoOrFourToGrids() {
   
      let array = [];
      for (let row = 0; row < 4; row++) {
   
         for (let column = 0; column < 4; column++) {
   
            if (grids[row][column] == 0) {
   
               array.push([row, column])
            }
         }
      }
      // array: [[0, 0], [0, 1], [0, 2], [0, 3], [1, 0], [1, 1], [1, 2], [1, 3], [2, 0], [2, 1], [2, 2], [2, 3], [3, 0], [3, 1], [3, 2], [3, 3]]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第二步：随机挑选任意空余格子，为其随机赋值为2或4

      // Math.random(): [0, 1)之间的小数
      // Math.random() * 16: [0, 16)之间的小数
      // Math.floor(x): 小于等于x的最大整数
      // Math.floor(Math.random() * 16)：[0, 15]之间的整数
      // Math.floor(Math.random() * array.length)：[0, array.length-1]之间的整数
      let randomIndex = Math.floor(Math.random() * array.length);
      let row = array[randomIndex][0];
      let column = array[randomIndex][1];
      if (Math.random() < 0.8) {
   
         grids[row][column] = 2;
      } else {
   
         grids[row][column] = 4;
      }
   },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

判断格子之间是否可合并

判断格子之间是否可以合并（此处以向左滑动为例），我们可以对每行都进行如下的循环：
把每行非零的元素加入一个队列里面，得到队列之后，如果第i个元素和第i+1个元素相同，则说明可以相加，就把元素移到左边，把相邻元素记为0。

for (let i = 0; i < 4; i++) {
   
                    if (grids[row][column] != 0) {
   
                        array.push(grids[row][column]);
                    }
                    column += step;//step用于控制入表时序号的大小，如果为1，则入表后的坐标和原坐标一样，若为-1则入表下标等于4减去坐标
                }

                for (let i = 0; i < array.length - 1; i++) {
   
                    if (array[i] == array[i + 1]) {
   
                        array[i] += array[i + 1];
                        this.updateCurrentScores(array[i]);
                        array[i + 1] = 0;
                        i++;
                    }
                }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

对于其他三个方向都是大同小异，如果向右或者向下，要先把column记为3，把step赋值为-1，用来控制判断顺序。

通过滑动移动格子

移动滑块，是通过触屏滑动来移动格子，当在滑动方向上的同一行或者同一列上，除了零外最相近的两个值相同的时候这两个数按加法合并。
1.创建一个全是0的4*4的矩阵，然后判断是左右方向的还是上下方向的。
2.若判断为左右方向，再判断方向是左还是右，当左的时候令step=1以及column=0，以使每一行上从左往右把除零之外的值放进空数组中，当方向为右的时候与之相反。
3.然后使用上面步骤得到的数组判断上面步骤得到的数组相邻的两个数是否相同。若相同就相加合并，得到一个新的数组。
4.然后再将第二步得到的新数组直接在最右端，或者最左端直接输入。
5.触屏方向的上下和触屏方向的左右原理相似。

changeGrids(direction) {
let newGrids = [[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]];
//判断是左右方向还是上下方向

      if (direction == 'left' || direction == 'right') {
   
          //判断是左还是右
         let step = 1;
         for (let row = 0; row < 4; row++) {
   
            let array = [];

            let column = 0;
            if (direction == 'right') {
   
               column = 3;
            }
            //将除了零的外的数放进空数组里
            for (let i = 0; i < 4; i++) {
   
               if (grids[row][column] != 0) {
   
                  array.push(grids[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.updateCurrentScores(array[i]);
                  array[i + 1] = 0;
                  i++;
               }
            }
      //将数组里的值输入
            column = 0;
            if (direction == 'right') {
   
               column = 3;
            }

            for (const elem of array) {
   
               if (elem != 0) {
   
                  newGrids[row][column] = elem;
                  column += step;
               }
            }
         }
      } else if (direction == 'up' || direction == 'down') {
   //上下跟左右的步骤一样
         let step = 1;
         if (direction 
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