改造2048小游戏

一、对原有的游戏2048改造的地方

2048的规则就不说了，毕竟是个很热门的游戏，大家都知道。我改造的地方是添加了“炸弹”。炸弹用黑底白字的“B”表示，出现的频率要远低于数字2和4。炸弹出现后，敲击键盘上的方向键，炸弹会炸掉这个方向上所有的数字方格，并扣除相应的分数。如果该方向上没有数字方格，那么炸弹爆炸，不扣分。

二、设计思路

2048的界面如图所示

 

 

 

 除了头部部分（标题、分数、重新开始），游戏界面分为三层，从底部往上分别是：背景层、待填充的16个方格层（即图中灰色方块）、已填充的方格层。使用jQuery编程。接下来分块讲设计思路。

0.用于存储方格的数组board[][]，其中，board[][]的值为0时，表示这里没有数字方格。每个待填充的方格和已填充的方格都有对应的ID。

1.新游戏（New Game）

 不管是刚打开网页，还是重新开始游戏，都要执行这个NewGame()函数。这个函数包括以下内容：界面初始化，新建两个数字方格，分数清零。

2.初始化（init）

board数组清零，绘制界面。

3.绘制界面

执行每个动作以后都要重新绘制界面（方格层）。每种方格的背景和文字颜色要事先设定好。添加方格之前，要移除原有的方格。当数组元素为0时，绘制的方格边长为0,；数组元素不为0时，方格边长即为未填充的方格的边长。另外，就是方格边长为0，也要设置top和left的值，否则执行animate()函数时不好看。

4.新建数字方格

随机方格出现的位置，以及方格的数字（2或4或-1，-1表示炸弹）。

5.移动方块

读取键盘按钮的返回值（前后左右），并执行相应的函数。这里以按左键的为例。从上往下，从左往右遍历数组。

（1）是否是炸弹，如果是，移动炸弹，消除炸弹左边所有的方块，这中间有移动的动画和消除的动画（边长变为0）。

（2）判断是否能往左移动。

（3）往左移动，直到可移动的最左边为止，或者和最左边的方块合并，前提是两个方块的值相同。这中间有个移动的动画。

（4）目的地方格的值变成当前方格的值或当前方格的值的两倍。

（5）当前方格的值变成0。

（6）改变分数。

（7）给一个变量conflict赋值为true（conflict变量是用于判断该位置的方块是否与其他方块结合，因为每次移动，方块只能被结合一次。）

（8）绘制界面。

（9）产生新的方块。

（10）判断玩家是否胜利或失败。

 

游戏效果如链接所示：http://lzbwebpage.sinaapp.com/2048/index.html。代码在链接里。