课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > JavaScript 定时器开发俄罗斯方块模式的2048项目
  • JavaScript 定时器开发俄罗斯方块模式的2048项目

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

  • 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前端心得体会

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:4-15

WEB零基础周末班

WEB零基础周末班

开班日期:

WEB前端业余班

WEB前端业余班

开班日期:4-15

WEB前端就业班

WEB前端就业班

开班日期:4-15

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56