canvas 制作2048

效果展示

对UI不满意可以自行调整，这里只是说一下游戏的逻辑，具体的API调用不做过多展示。

玩法分析

2048 的玩法非常简单，通过键盘的按下，所有的数字都向着同一个方向移动，如果出现两个相同的数字，就将这两个数字合成，如果所有的各自都被占满，并且无法合成的时候，视为游戏失败。

功能实现

场景

需要一个背景和16个格子，使用绘制矩形的API和一个双重循环就可以实现。

function drawMap() {ctx.beginPath();ctx.fillStyle = '#bbada0'ctx.fillRect(200,0,600,600);for(let i = 0; i < 4; i++){for(let k = 0; k < 4; k++){ctx.beginPath();ctx.fillStyle = 'rgba(238, 228, 218, 0.35)';ctx.fillRect(i * 150 + 210, k*150+10,130,130);}}
}

数字生成

我们随机生成一个数字2 或者 4 ，并且需要随机一个没有数字的位置。

在这之前我们需要准备几个变量

• number: 用来存储新生成的数字
• map: 一个二维数组，用来储存格子中的数字，如果是0则视为空

使用Math.random()生成随机数，并且利用循环反复生成位置，知道生成的位置为空，将数字填入map数组的对应位置。

function createNumber(closebtn) {let number = Math.random() > 0.5 ? 2 : 4;let x, y; let gameover = true;for(let i = 0; i < 4; i++){for(let j = 0; j < 4; j++){if(numberlist[i][j] == 0){gameover = false;break;}}}// 这里是对游戏结束的判断if(gameover) {alert('gameover!');init();return;}while(1) {x = Math.floor(Math.random() * 4);y = Math.floor(Math.random() * 4);if(numberlist[x][y] == 0) break;}numberlist[x][y] = number;
}

更新视图

之前我们定义的一个数组map，用来储存格子中的数据，之后我们只需要根据这个map中的数据去更新我们的画布，就可以实现数字的渲染，之后的合成，也只需要对map这个数组进行更新，然后再根据数组中的数据去渲染视图。

代码中也包含了2048的配色方案，对颜色不敏感的直接用这套方案就好

function drawNumber() {for(let i = 0; i < 4; i++){for(let j = 0; j < 4; j++){let color = '';switch(numberlist[i][j]) {case 0: continue; break;case 2: color = '#EEE4DA'; break;case 4: color = '#ECE0C8'; break;case 8: color = '#f2b179'; break;case 16: color = '#f59563'; break;case 32: color = '#f67c5f'; break;case 64: color = '#f65e3b'; break;case 128: color = '#edcf72'; break;case 256: color = '#edcc61'; break;case 512: color = '#edc850'; break;case 1024: color = '#edc53f'; break;case 2048: color = '#edc22e'; break;}ctx.beginPath();ctx.fillStyle = color;ctx.fillRect(j * 150 + 210, i*150+10, 130, 130);ctx.fillStyle = 'black';ctx.fillText(numberlist[i][j], j * 150 + 75 + 200, i * 150+75, 130);}}
}

事件监听

为对应的按键绑定事件：

document.addEventListener('keydown', (e) => {switch(e.key) {case 'w': case 'ArrowUp':// 这个函数用来更新数据，下一步会见到uploadNumberList('top');break;case 'a': case 'ArrowLeft': uploadNumberList('left');break;case 's': case 'ArrowDown': uploadNumberList('bottom');break;case 'd': case 'ArrowRight': uploadNumberList('right');break;default: break;}

数据更新

数据的更新，我们用向左来做例子，一共分为3步：

1. 去0
2. 合成
3. 去0

下面是实现的代码:
整体的思路下面的代码中写有注释

// 4行, 向左for(let i = 0; i < 4; i++){// 每一行执行去0，加和，去0三项// 建一个新数组拷贝非0元素const arr = numberlist[i];const newArr = [0,0,0,0];let cnt = 0;for(let j = 0; j < 4; j++){if(arr[j] != 0) {newArr[cnt] = arr[j];cnt++;}}// 求和for(let j = 0; j < 3; j++){if(newArr[j] == newArr[j+1] && newArr[j] != 0){newArr[j] = newArr[j] * 2;newArr[j+1] = 0;}}// 去0const newArr2 = [0,0,0,0];cnt = 0;for(let j = 0; j < 4; j++){if(newArr[j] != 0) {newArr2[cnt] = newArr[j];cnt++;}}// 经过上面的三步这一行已经处理完成，将新的处理完成的数组替换原有的numberlist[i] = newArr2;}

数据更新之后，不要忘记重新渲染下视图。

结束

到这里游戏就制作好了，像这种小游戏我觉得采用面向过程的方式更加合适

自己先玩上一把

另外像是 去0 和 求和 的过程完全可以封装成一个函数减少代码冗余。