用javascript制作2048游戏的思路（原创若 转载请附上本链接）

一、项目已上传至github，地址：https://github.com/forjuan/2048game

二、学习了javascript基础后，想要捣鼓点东西做，做了一个自己以前很爱玩的2048游戏。经过初期的思路设计手工画了设计思路图。手工图有空在用图画出来。

     实现2048的功能：1、核心：上下左右移动。

                             2、游戏开始，游戏结束。

                             3、外观实现。

                             4、积分（暂时没实现）

     把问题分解：1.首要难点移动，将移动进行分解，分为上下左右移动；

                      2.用什么记录位置，怎样记录每个方块的值，边界，相同值相加？

                      3.我选择用一个二维数组记录位置相关信息，包括，left,top值（相对于页面的位置），用一个boolean类型value值记录该位置上是否有值。loca[i][i] = {left:***,top:***,value:false}

                      4.怎么记录小方块,小方块与位置间的关系？我用的是div，每个div是个小方块（样式不在此说明），每个div有x,y值用于储存div的位置信息，value:小方块的值，change：每次移动小方块是否已经相加过（这是后来出现bug想到的）。

                      5.先向左移动，左移每个小方块向左边移动，左边可能有两种情况：a.无值，

                                                                                                          b.有值，有值可能有两种情况，

                                                                                                                 （1）.值相同，

                                                                                                                 （2）.值不同。

                      6.哪些值需要移动，哪些值不需要移动： 根据5知：不移动：与左边相邻第一个值不相等，或者是到左边界。其他情况都要移动

                      7.向左移动，则每行的每列的循环从左往右对每个方块执行移动操作（判断是否需要移动，若移动操作）

                      8.若要移动操作，怎么移动，（我选择用一个函数封装找到这个小方块应该到达的位置，如果它的左边第一个有值而且是相等的，则小方块的值是原来的2倍，它的位置就是左边第一有值得位置，若值不等则目标位置是左边第一有值的值的后一个位置，若它左边都无值，它的目标位置是最左边）

                     9.基本向左思路就是这样了。

三、编写过程中发现的bug

       1.在移动过后，有的小方块，移动乱了位置，无法显示，解决bug比查找bug更简单，怎么查找bug呢，我用的排除法，用浏览器调试工具找到不见的小方块在哪里被隐藏，然后思考它前一步，分析出现这个问题的原因，再单独处理确认错误原因，最后解决问题，我的问题有我用了原生的运动的完美框架，到指定位置会有时间延迟，后面设置的位置信息先执行完，它才运动完，导致后面的设置没用。

       2.小方块只有16个，所以一个小方块占用了位置，原来位置上的小方块与它交换位置。

四、版本迭代中

     现在我的这个小游戏只是实现了，初步将move(top,left,down,right)封装在同一函数中，同一功能的函数也已封装，为了复用，提高性能，现在正在学习js设计模式，希望能用于该游戏中，将代码完善，提高性能，最后希望丰富该游戏的基本功能，积分，不同模式，移动时有滑动效果，手机版。有兴趣的一起捣鼓哦 

     

 

 

 

 

      

               

转载于:https://www.cnblogs.com/AliceX-J/p/5003640.html