1页面布局
“2048”游戏由4行4列共16个单元格组成。案例在Chrome浏览器运行效果，如图9-4所示。
图9-4 “2048”游戏效果图
HTML示例代码如下。CSS代码详见本书源码。
<div id="con">
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
<div><img value="0" src="img/0.png" /></div>
</div>
上述代码中，“<div id="con">”代表游戏区域；1个“<div><img value="0" src="img/0.png" /></div>”元素代表一个单元格，共有16个。在每个单元格内嵌入了一张图片代表游戏数字，value属性值是图片代表的数字。游戏初始化，单元格均显示“0.png”，代表数字0。数字图片素材效果图，如图9-5所示。
图9-5 数字图片素材效果图
2工具函数
案例用到的工具函数共有3个：生成随机数字函数create()、单元格移动函数run()、数据转换函数dataTransfer()。其中数据转换函数算法已在第三章3.5小节介绍过，本小节介绍生成随机数字函数和单元格移动函数的封装。
（1） 生成随机数字函数
页面加载后在16个单元格内随机生成一个数字2；用户按键移动单元格后，需要在16个单元格内重新随机生成一个数字2。因此将生成随机数字的功能封装成函数。示例代码如下。
1 var imgs = document.querySelectorAll('img');
2 function create() {
3 var random = Math.floor(Math.random() * imgs.length);
4 if (imgs[random].getAttribute('value') == 0) {
5 imgs[random].setAttribute('value', 2);
6 imgs[random].src = 'img/2.png';
7 } else {
8 create();
9 }
10 }
上述代码封装了函数create()。函数中，首先生成随机数，随机数的范围是0-15。然后随机获取16个格子中的1个，如果格子的数字图片是“0.png”，则将数字图片设置为“2.png”；如果格子的数字图片不是“0.png”，说明此格子已有数据，重新执行函数create()。
（2）.单元格移动函数
用户通过按键“↑”、“→”、“↓”、“←”移动单元格时，四个按键的区别是方向不同，单元格移动的方法是相同的。因此将单元格移动的功能封装成函数。示例代码如下。
1 function run(arr) {
2 var newValue = dataTransfer([
3 Number(imgs[arr[0]].getAttribute('value')),
4 Number(imgs[arr[1]].getAttribute('value')),
5 Number(imgs[arr[2]].getAttribute('value')),
6 Number(imgs[arr[3]].getAttribute('value'))
7 ]);
8 for (var i=0; i<arr.length; i++) {
9 imgs[arr[i]].setAttribute('value', newValue[i]);
10 imgs[arr[i]].src = 'img/'+ newValue[i] +'.png';
11 }
12 }
上述代码封装了函数run()。函数中，第2-7行代码调用dataTransfer()函数，将形参数组arr对应的单元格数据按规则转换为新的数组；第8-11行代码将对应单元格的value属性值设置为新的数据；src属性设置为新的数字图片。例如，调用函数run([0,1,2,3])，[0,1,2,3]代表页面中第一行的4个单元格，imgs[arr[0]]代表第一个单元格，imgs[arr[0]].getAttribute('value')代表第一个单元格的数字图片的值。
3.键盘事件处理
游戏的规则是用户通过按键“↑”、“→”、“↓”、“←”控制所有方块向同一个方向运动，因此需要监听页面的键盘事件。“↑”、“→”、“↓”、“←”按键的键值分别是38、39、40、37。示例代码如下。
document.onkeydown = function (e) {
switch (e.keyCode) {
case 38: // ↑
run([0,4,8,12]);
run([1,5,9,13]);
run([2,6,10,14]);
run([3,7,11,15]);
break;
case 39: // →
run([3,2,1,0]);
run([7,6,5,4]);
run([11,10,9,8]);
run([15,14,13,12]);
break;
case 40: // ↓
run([12,8,4,0]);
run([13,9,5,1]);
run([14,10,6,2]);
run([15,11,7,3]);
break;
case 37: // ←
run([0,1,2,3]);
run([4,5,6,7]);
run([8,9,10,11]);
run([12,13,14,15]);
break;
}
create();
}
上述代码为document绑定了键盘onkeydown事件及其处理程序。用户单击方向按键，控制所有方块向同一个方向运动。以用户按“←”键为例，run([0,1,2,3])代表向左移动第1
行的4个单元格；run([4,5,6,7])代表向左移动第2行的4个单元格；run([8,9,10,11])代表向左移动第3行的4个单元格；run([12,13,14,15])代表向左移动第4行的4个单元格。最后调用函数create()创建随机数字2。