【深鸿会—深大—小组学习笔记】从零开始使用华为DevEco Studio编写2048小游戏（完整版）_devecostudio项目案例代码

写在前面

本文是在上一篇（2048未完成版）的基础上完成的，由我和@WiKiBeta共同对代码进行了完整的实现，并对完整的过程和代码都进行了完备的整理和详细的解读，由于没有张荣超老师的教程，代码的解读可能会出现差错(应该不会有），以下是我们完成后写下的笔记，如果有纰漏，希望各位谅解并指出。

概述

本次课程目标是开发能在鸿蒙设备上运行的经典小游戏2048，本次学习实现的功能主要有：1.实现页面布局 2.在画布上显示所有的格子以及格子里的数字 3. 页面初始化时随机选择两个格子，并放入2或4。本次课程中，未完整实现的响应滑动事件功能将在以后的学习笔记中进行补充。(课程使用的开发软件为DevEco Studio, 语言为JS).
接下来我们继续完成剩下的部分：
4.响应滑动事件（主要包括以下两小步）
1）将grids中不为零的元素存到array[]中
2）按照演示方向，将array[]中相邻且相同的数合并（注意合并的优先级），并将合并后得到的数加到scores中
5.判断游戏是否结束
1）判断方格已满
2）判断是否能合并
3）如果游戏结束，界面进行的响应：格字背景色褪色+弹出"游戏结束"

准备工作

开发工具

华为HarmonyOS的应用开发工具DevEco Studio下载地址
node.js下载地址

编写位置

文件用途

具体流程

1.实现页面布局

效果如下

2. 在画布上显示所有的格子以及格子里的数字

效果如下

3. 页面初始化时随机选择两个格子，并放入2或4 页面初始化

随机选择两个格子，并放入2或4：``

效果如下：

4.响应滑动事件

1）将grids中不为零的元素存到array[]中
2）按照演示方向，将array[]中相邻且相同的数合并（注意合并的优先级），并更新分数（将合并后得到的数加到scores中）
（插入个图片方便理解）：
该步骤对应代码如下：

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;
			if (direction == 'right') {
   
				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 == 'down') {
   
				step = -1;
			}

			for (let column = 0; column < 4; column++) {
   
				let array = [];

				let row = 0;
				if (direction == 'down') {
   
					row = 3;
				}

				for (let i = 0; i < 4; i++) {
   
					if (grids[row][column] != 0) {
   
						array.push(grids[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.updateCurrentScores(array[i]);
						array[i + 1] = 0;
						i++;
					}
				}

				row = 0;
				if (direction == 'down'
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