【JavaScript学习笔记】用js实现2048小游戏
360前端星技术笔试中的一道题目，现把解决过程记录如下：
1、首先是界面
1 |
|
CSS中设置了4个类，当方格内的数字分别为个位、十位、百位、千位（最大值2048）时，通过添加不同的类，让数字能完整的放置在方格内。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.grid-container {
margin: auto;
width: 400px;
height: 400px;
background-color: rgb(220, 160, 20);
}
.grid-row {
display: block;
padding-left: 8px;
}
.grid-row:first-child {
padding-top: 8px;
}
.grid-cell {
/* display: inline-block; */
position: relative;
float: left;
margin: 7px;
width: 82px;
height: 82px;
background-color: rgb(230, 210, 170);
text-align: center;
}
.numOne {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 35%;
font-size: 48px;
}
.numTwo {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 16%;
font-size: 48px;
}
.numThree {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 9%;
font-size: 38px;
}
.numFour {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 9%;
font-size: 28px;
}
2、存放游戏状态
1 | let gameState = [ |
通过数组存放4乘4方格内的数字，0代表方格内数字为空。
3、初始化
1 | (function () { |
随机将4乘4方格中的某2个方格的值设为2或4。
4、监听按键
1 | $('body').on('keydown', function (e) { |
监听上下左右及WSAD键按下。
5、改变游戏状态
以按下向左或A键为例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21function left () {
for (let i = 0; i < 4; i++) {
let zeroIndex = -1;
for (let j = 0; j < 4; j++) {
if (zeroIndex === -1) {
if (gameState[i][j] === 0) {
zeroIndex = j;
}
}else{
if (gameState[i][j] !== 0) {
gameState[i][zeroIndex] = gameState[i][j];
gameState[i][j] = 0;
zeroIndex++;
}
}
}
}
mergeLeft();
initRight();
updateUI();
}
首先每一行从左向右遍历，找到第一个为0的位置(i, zeroIndex)，然后找到zeroIndex后第一个不为0的位置(i, j)，将(i, zeroIndex)的值替换为(i, j)位置的值，并将(i, j)位置的值归0，之后继续将后面非0的元素插入到zeroIndex+n位置（n是已插入元素数）。这一部分相当于将每一行的元素“左对齐”。
之后需要检查每一行“对齐”后的数列中最后两元素是否相同，相同则合并，这部分放在mergeLeft()中。1
2
3
4
5
6
7
8
9function mergeLeft() {
for (let i = 0; i < 4; i++) {
let zeroIndex = gameState[i].indexOf(0)===-1 ? 4 : gameState[i].indexOf(0);
if (zeroIndex > 1 && gameState[i][zeroIndex-1] === gameState[i][zeroIndex-2]) {
gameState[i][zeroIndex-1] = 0;
gameState[i][zeroIndex-2] *= 2;
}
}
}
之后要从最右边一列随机生成1-2个新元素。当最右边一列被占满无法生成新元素时，则判定游戏结束。并且为避免每次都在第一位生成新元素，适当调低一些生成概率。1
2
3
4
5
6
7
8
9
10
11
12
13
14function initRight() {
let nullBlock = 0;
for (let i = 0; i < 4; i++) {
if (gameState[i][3] === 0) {
if (Math.random() > 0.3 && nullBlock < 2) { //调低一点，避免都产生在第一位
gameState[i][3] = Math.random() > 0.5 ? 2 : 4;
nullBlock++;
}
}
}
if (nullBlock === 0) {
gameOver();
}
}
向上，向右，向下的代码部分如下。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
164function up() {
for (let j = 0; j < 4; j++) {
let zeroIndex = -1;
for (let i = 0; i < 4; i++) {
if (zeroIndex === -1) {
if (gameState[i][j] === 0) {
zeroIndex = i;
}
}else{
if (gameState[i][j] !== 0) {
gameState[zeroIndex][j] = gameState[i][j];
gameState[i][j] = 0;
zeroIndex++;
}
}
}
}
mergeUp();
initDown();
updateUI();
}
function mergeUp() {
for (let j = 0; j < 4; j++) {
for (let i = 0; i < 4; i++) {
if (gameState[i][j] === 0) {
if (i > 1 && gameState[i-1][j] === gameState[i-2][j]) {
gameState[i-1][j] = 0;
gameState[i-2][j] *= 2;
}
break;
}else if (i === 3) {
if (gameState[3][j] === gameState[2][j]) {
gameState[3][j] = 0;
gameState[2][j] *= 2;
}
}
}
}
}
function initDown() {
let nullBlock = 0;
for (let i = 0; i < 4; i++) {
if (gameState[3][i] === 0) {
if (Math.random() > 0.3 && nullBlock < 2) {
gameState[3][i] = Math.random() > 0.5 ? 2 : 4;
nullBlock++;
}
}
}
if (nullBlock === 0) {
gameOver();
}
}
function right () {
for (let i = 0; i < 4; i++) {
let zeroIndex = -1;
for (let j = 3; j >= 0; j--) {
if (zeroIndex === -1) {
if (gameState[i][j] === 0) {
zeroIndex = j;
}
}else{
if (gameState[i][j] !== 0) {
gameState[i][zeroIndex] = gameState[i][j];
gameState[i][j] = 0;
zeroIndex--;
}
}
}
}
mergeRight();
initLeft();
updateUI();
}
function mergeRight() {
for (let i = 0; i < 4; i++) {
let zeroIndex = -1;
for (let j = 3; j >= 0; j--) {
if (gameState[i][j] === 0) {
zeroIndex = j;
break;
}
}
if (zeroIndex < 2 && gameState[i][zeroIndex+1] === gameState[i][zeroIndex+2]) {
gameState[i][zeroIndex+1] = 0;
gameState[i][zeroIndex+2] *= 2;
}
}
}
function initLeft() {
let nullBlock = 0;
for (let i = 0; i < 4; i++) {
if (gameState[i][0] === 0) {
if (Math.random() > 0.3 && nullBlock < 2) { //调低一点，避免都产生在第一位
gameState[i][0] = Math.random() > 0.5 ? 2 : 4;
nullBlock++;
}
}
}
if (nullBlock === 0) {
gameOver();
}
}
function down() {
for (let j = 0; j < 4; j++) {
let zeroIndex = -1;
for (let i = 3; i >= 0; i--) {
if (zeroIndex === -1) {
if (gameState[i][j] === 0) {
zeroIndex = i;
}
}else{
if (gameState[i][j] !== 0) {
gameState[zeroIndex][j] = gameState[i][j];
gameState[i][j] = 0;
zeroIndex--;
}
}
}
}
mergeDown();
initUp();
updateUI();
}
function mergeDown() {
for (let j = 0; j < 4; j++) {
for (let i = 3; i >= 0; i--) {
if (gameState[i][j] === 0) {
if (i < 2 && gameState[i+1][j] === gameState[i+2][j]) {
gameState[i+1][j] = 0;
gameState[i+2][j] *= 2;
}
break;
}else if (i === 0) {
if (gameState[1][j] === gameState[0][j]) {
gameState[1][j] = 0;
gameState[0][j] *= 2;
}
}
}
}
}
function initUp() {
let nullBlock = 0;
for (let i = 0; i < 4; i++) {
if (gameState[0][i] === 0) {
if (Math.random() > 0.3 && nullBlock < 2) {
gameState[0][i] = Math.random() > 0.5 ? 2 : 4;
nullBlock++;
}
}
}
if (nullBlock === 0) {
gameOver();
}
}
6、更新游戏界面
根据游戏状态数组更新界面。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23function updateUI() {
for (let i = 0; i < 4; i++) {
for (let j = 0; j< 4; j++) {
if (gameState[i][j] !== 0) {
let id = '#num' + i + j;
$(id).removeClass();
if (gameState[i][j]/1000 > 1) {
$(id).addClass('numFout');
}else if (gameState[i][j]/100 > 1) {
$(id).addClass('numThree');
}else if (gameState[i][j]/10 > 1) {
$(id).addClass('numTwo');
}else{
$(id).addClass('numOne');
}
$(id).text(gameState[i][j]);
}else{
let id = '#num' + i + j;
$(id).text('');
}
}
}
}
7、合并逻辑的BUG
之前只考虑到空元素前两个元素需要合并，未考虑到游戏进行过程中应该是任意与按键相同方向的两相同元素都可以合并。例如下图第二行第一个元素(1, 0)与第三行第一个元素(2, 0)均为16，若此时按下向上或向下键后，两位置元素应合并。
改进：（未完待续）