合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

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

  • 时间:2016-07-05
  • 发布:合肥web培训
  • 来源:达内新闻

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

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

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

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

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

4、当前方块 下落到底部要进行与周围数据相加,比起原版 2048 游戏要复杂得多,这是这个模式难点,为此定义了一个递归函数addData(),来实现数据的相加;
上一篇:零基础设计师该如何学习前端?
下一篇:初学web前端心得体会

JavaScript是真正的 OOP 语言吗?

合肥达内Web培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

选择城市和中心
贵州省

广西省

海南省