原生Js实现2048小游戏

介绍：

2048是几年之前之前挺火的一个小游戏，相比于上一个十滴水小游戏，实现要简单很多，网上也有很多思路，本文是参考妙味课堂的实现。

具体实现

首先，写好界面，效果如下：

• 当按下方向键时，需要根据不同的方向来进行各行各列的运算，例如向右，则为1234块运算，5678块运算，如果向下，则为1，5，9，13块运算：
  
  因此需要有一个判断方向键，指定运算规则的函数：

document.onkeydown = function (e) {

switch (e.keyCode){
case 37:
// console.log('left');
run([0,1,2,3]);
run([4,5,6,7]);
run([8,9,10,11]);
run([12,13,14,15]);
break;
case 38:
// console.log('up');
run([0,4,8,12]);
run([1,5,9,13]);
run([2,6,10,14]);
run([3,7,11,15]);
break;
case 39:
// console.log('right');
run([0,1,2,3].reverse());
run([4,5,6,7].reverse());
run([8,9,10,11].reverse());
run([12,13,14,15].reverse());
break;
case 40:
// console.log('down');
run([0,4,8,12].reverse());
run([1,5,9,13].reverse());
run([2,6,10,14].reverse());
run([3,7,11,15].reverse());
break;

}
};

• 而块之间的运算，需要检测他们的数值是否相同，如果相同则合并，可以通过数组处理，例如按下“←”后：

[2,2,2,2] => [4,4,0,0]
[2,0,2,2] => [4,2,0,0]
[2,4,2,2] => [2,4,4,0]
[2,4,4,2] => [2,8,2,0]
[0,2,0,2] => [4,0,0,0]

• 因此，我们需要循环旧数组，检测到非0值后，判断后续值是否非0，如果非0，再判断值是否相等，相等则合并将合并值push进新数组，不相等则直接push进新数组，最后余下空位补0，返回新数组，具体代码如下：

function  _2048(arr){
let newArr = [];

for(var i=0; i<arr.length; i++){
if(arr[i] !==0){
//使用break跳出循环，不为0时，j=i+1，为0时，j为不为0元素的下标
for(var j=i+1; j<arr.length; j++){
if(arr[j]!== 0) break;
}
//如果两块相等，则合并
if(arr[i] === arr[j]){
newArr.push(arr[i]+arr[j]);
i =j;
//如果不等，则推进去
}else {
newArr.push(arr[i]);
}
}
}

for(var i=0; i<arr.length; i++){
if(!newArr[i]) newArr.push(0);
}

// console.log(newArr);
return newArr;
}

• 再将处理完的数据与显示对应起来：

function run(arr) {
let newValue = _2048([
Number(imgs[arr[0]].getAttribute('value')),
Number(imgs[arr[1]].getAttribute('value')),
Number(imgs[arr[2]].getAttribute('value')),
Number(imgs[arr[3]].getAttribute('value'))
])

for(var i=0; i<arr.length; i++){
imgs[arr[i]].setAttribute('value',newValue[i]);
imgs[arr[i]].src = `img/cube_${newValue[i]}.png`;
}

// console.log(newValue);
}

• 最后，每次按下时还需要生成新的数字块，生成新块首先得判断哪些地方是空的，可以生成，其次，当格子满了后，也无法生成新块：

function create() {
var num = 0;
var random = Math.floor(Math.random()*16);
if(imgs[random].getAttribute('value') == 0){
imgs[random].setAttribute('value',2);
imgs[random].src = `img/cube_2.png`;
}else {
for(var i=0; i<imgs.length; i++){
if(imgs[i].getAttribute('value') != 0){
num++;
}
}
if(num!=imgs.length){
create();
}

}
}

总结

• 由于是几个月之前写的，整理下来才发现忘了写计分功能，有需要的同学可以自己完善一下，2048的计分为将合并产生的新值记入分数，所以直接在前面处理方块合并的函数中加入计分即可；
• 其次，当按下某个方向时，如果方块都已经是无法移动了，则不能生成新块，本代码中没有加入此判断，具体实现我觉得应该是判断新旧数组是否产生变化，如果没变化，则不能生成新块；

源码地址：原生JS实现2048小游戏-github