1024+1024 = 2048 / JavaScript 2048游戏制作

初入博客园，第一篇博客就写写最近用js做的1024，不，2048吧！

 

先上完成后的2048：https://poisonli.github.io/Interesting-toy/

 

2048的制作思路：

  生成一个 4*4 的棋盘格，

  再在棋盘格上生成同样是 4*4 的一层数字层（二维数组），用来显示数字，当数字不为0时，数字层中对应的数字格子就显示出来。

  每一个二维数组中的值也对应了棋盘格中的坐标值。

  如图所示，比如坐标 2,1 的位置有一个数字2，则将 2,1显示。

　（给不同的数值不同的颜色，2,4,8...1024,2048颜色都最好不同）

  2048在页面加载完成后会随机生成两个数字，初始数字只能是2或4，因此只能在这两个数中随机，可能同时是2或者同时是4，也有可能是2和4，随他去吧-

　随机出数字之后再随机一个坐标值，把随机出的数值给到坐标中，这样坐标就有了数值，得以显示

 

  如图：

然后是交互效果

循环判断：

当用户按上下左右键时，判断棋盘格中是否有有数值的格子，将有数值的格子往用户要求的方向移动，比如当用户按下左键，所有有数值的格子都尽量先左移动（但是最左侧的格子是不用判断的，最左了还怎么移-..其他方向也同理）

此时要判断左边是否有空格子，如果有，就移动过去，但是可能中间会有同样有数值的格子（就叫数值最左吧-），此时继续判断数值最左和要移动的数值格子中的数值是否相等，如果相等，则两个数字相加合并，原先的数值格子就要消失了。如果不相等，就只是移动一下。

除了最左的数值格子不用判断外，从第二个开始到最后的数值格子循环进行判断。

但是这时有个小坑就会冒出来，比如有一排数值是2,2,2,2。按下左键后循环进行判断，此时最左的数值格子就直接会变为8，但原版2048并不是这样的，原版是会变为4，4这样，只有再按下左键最左才会变成8；

意思就是每次按下键盘都要检查是否有值相加，如果有，则不再进行相加了（只爱一次不吃回头草）

四个方向都同理。

 

每次移动之后都应该判断棋盘格中是否还有空格子，如果没有，再进行判断是否可以移动操作，如果不能移动了且没有空格子就GameOver了。

 

最后还有个小坑，当浏览器显示滚动条的时候，按下方向键除了会移动方格外还会触发滚动条滚动，非常影响用户体验，因此可以在按下方向键时阻止默认行为，这样就不会触发滚动条滚动了。

--------------------- 

 

逻辑完成后就可以继续优化细节，比如加入分数系统，当有值相加合并时就把值加到分数中；

也可以继续优化当数值相加合并时的动画效果；

还可以优化支持移动端，使界面能适应各种设备尺寸，交互则从键盘事件变为触控事件（获得触控位置，使用touch事件）；

也可以将2048中显示的数值改为各种名字，比如2是票子，4是车子...1024是房子,2048是妹子什么的哈哈哈。

 

上源码吧，请各位老哥review。  https://github.com/PoisonLi/Interesting-toy

 

//没自动转成链接？加了a标签也不能点击是什么鬼，只能麻烦各位老哥自行复制打开了。