Web培训

热门话题:

Web前端培训 > 零基础学Web > 正文

JavaScript 定时器开发俄罗斯方块模式的2048项目

发布：佚名
来源：网络
时间：2015-10-13 16:03

2048项目开始的前一天才知道JavaScript能开发游戏，出于好奇(一直都没玩过这个游戏)，就在手机上下载了2048这个游戏。发现其中除了原版的2048游戏外还有很多的模式，其中的下落模式(类似俄罗斯方块，因此我称之为俄罗斯方块模式)让我很感兴趣，便产生了开发这样模式的想法，同时也为后面用JavaScript开发俄罗斯方块做热身。下图为最终效果图：

俄罗斯方块模式的2048与原版2048相比，一开始以为也是简单的数据相加而已，似乎没什么，可是真正去做的时候才发现没有那么容易。首先，原版 2048你每一次操作都是整体进行计算，但是俄罗斯方块模式的2048你每一次操作仅仅针对正在下落的那个方块，我将正在下落的方块称为“当前方块”，下一次出现的方块称为 ext方块 ;其次，俄罗斯方块模式的2048的数据计算比较复杂些，“当前方块”下落后要与下面的方块进行合并，在与左边右边方块合并，然后还可能继续往下合并，同时与左边方块合并后也会影响其他方块，又要进行合并，合并过程有点复杂，担心表达不够清楚，下面一张图列举了一个合并的例子。因此在原有2048项目的基础上改为俄罗斯方块模式主要做了如下改变：

1、键盘上的方向键不是控制所有方块的移动，而是控制正在下落的方块即当前方块，为了能单独控制该方块给game对象新增两个属性：curRow 和 curCol ;

2、当前方块左右移动时候只需更新相邻两个方块的样式，不必要去更新整个game的视图，为此新定义了一个函数 updateViewTwo() ;

3、加入周期性定时器，实现当前方块缓慢向下移动，给game对象增加一个方法timerDown();

4、当前方块下落到底部要进行与周围数据相加，比起原版 2048 游戏要复杂得多，这是这个模式难点，为此定义了一个递归函数addData()，来实现数据的相加;