去年2048很火, 本来我也没玩过, 同事说如果用JS写2048 只要100多行代码; PS(iWeb峰会暨攻城师嘉年华2015嘉年华要来啦, 在文章结尾有具体的地址和时间); 今天试了一下, 逻辑也不复杂, 主要是数据构造函数上的数据的各种操作, 然后通过重新渲染DOM实现 ...
去年2048很火, 本来我也没玩过, 同事说如果用JS写2048 只要100多行代码;
PS(iWeb峰会暨攻城师嘉年华2015嘉年华要来啦, 在文章结尾有具体的地址和时间);
今天试了一下, 逻辑也不复杂, 主要是数据构造函数上的数据的各种操作, 然后通过重新渲染DOM实现界面的更新, 整体不复杂, JS,css,和HTML合起来就300多行;
界面的生成使用了underscore.js的template方法, 使用了jQuery,主要是DOM的选择和操作以及动画效果,事件的绑定只做了PC端的兼容,只绑定了keydown事件;
把代码放到github-page上, 通过点击这里查看 实例: 打开2048实例;
效果图如下:
所有的代码分为两大块,Data, View;
Data是构造函数, 会把数据构造出来, 数据会继承原型上的一些方法;
View是根据Data的实例生成视图,并绑定事件等, 我直接把事件认为是controller了,和View放在了一起, 没必要分开;
Data的结构如下:
/** * @desc 构造函数初始化 * */ init : function /** * @desc 生成了默认的数据地图 * @param void * */ generateData : function /** * @desc 随机一个block填充到数据里面 * @return void * */ generationBlock : function /** * @desc 获取随机数 2 或者是 4 * @return 2 || 4; * */ getRandom : function /** * @desc 获取data里面数据内容为空的位置 * @return {x:number, y:number} * */ getPosition : function /** * @desc 把数据里第y排, 第x列的设置, 默认为0, 也可以传值; * @param x, y * */ set : function /** * @desc 在二维数组的区间中水平方向是否全部为0 * @desc i明确了二维数组的位置, k为开始位置, j为结束为止 * */ no_block_horizontal : function no_block_vertica : function /** * @desc 往数据往左边移动,这个很重要 * */ moveLeft : function moveRight : function moveUp : function moveDown : function
原标题:Javascript写了一个2048的游戏
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。