原生js的2048的制作过程

Posted 2020-11-22 张利

1.首先我们来看一下效果图

开始：

 

 结束：

 

 接下来我们来实现代码部分：

html部分：

 

 2048大家应该都玩过，首先我们要准备16个盒子让它4*4排列，这里的css我就不说了，这应该使我们都会的，在这里我组要提醒一点，你们应该看到了，我对这16个命名的方式应该注意到了，为什么要这样命名，这样有规律的命名，方便我们在写js时好操作写。

2.再来看接下来的逻辑是什么样的

（1）我们的游戏一开始的时候就会在页面上产生两个随机数2或4

（2）初始化分数

（3）键盘事件（方便我们上下左右移动的）；

（4）当数字相同时会相加，并把自己以前的位子清空 如下图   

        

 

 

不相同的话：

左右移动：如果前面有数字的话，后面的数就会紧跟其后，并把自己以前的位子清空 如下图   

  

 

 

其他方向和上面的差不多；

（5）当我们的16个格子都占满的时候且不能在相加的时候判断游戏结束

（6）并显示遮罩层使整个页面不能在操作；并显示自己的分数

大致就是这样了

3.接下来实现这些功能

（1）

 

 这是我们准备工作和游戏开始的时候，因为我们是面向对象编程，所以我们都是在对象里面编程，

在这里提一下数组其实也是一个对象，你可把数组进行深挖，最终你会发现它也是对象

（2）获取随机数方法

 

 其实看上面的注释已经很清楚了，在这要说的就是一个三元表达式，这就是生成随机素的核心，这里就涉及到概率的问题，我这是五五开，这里可以根据自己的概率去改；

（3）更新视图的方法

 

 

 首先对行和列进行循环遍历，并找到这个数的位置坐标。并获取这个数的ID，然后再对这个数进行判断当这个数是0的时候，此时的位置为空，不管它，当它有数字的时候，此时的位置就为这个数，并获取到它的class属性，同时并把分数赋值到页面上去，此时在看游戏的状态，当游戏结束的时候并出现遮罩层，并把分数显示出来，反之就继续；

 （4）游戏结束判断方法：

 

 首先判断数组中是否有空的位置，左右判断是否有相等的数，此时有人可能不明白为什么现在行和1列长度都变成3了，简单理解，竟然是左右移动看是否相等可定是两两比较，

 

 

 

 

 这就是为什么行和列要加一的原因；

前面的准备工作做完了，接下来我们就要做移动事件了

4.左移事件:

 

 上面我就不一 一解释了

其实只要把上面的逻辑弄清楚了，右，上，下都应该可以写出来了

右：

 

 上：

 

 下：

 

 5.键盘事件：

 

 这个键盘事件的键盘值可以根据自己的想法改不一定要上下左右键

最后补充点改变this指向的3种方法的区别：

call、apply与bind区别：前两个可以自动执行，bind不会自动执行，需要手动调用

call、bind与apply区别：前两个都有无数个参数，apply只有两个参数，而且第二个参数为数组