Javascript编写2048小游戏_javascript技巧
今天试了一下, 逻辑也不复杂, 主要是数据构造函数上的数据的各种操作, 然后通过重新渲染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
有了数据模型,那么视图就简单了,主要是用底线库underscore的template方法配合数据生成html字符串,然后对界面进行重绘:
View的原型方法:
renderHTML : function //生成html字符串,然后放到界面中
init : function //构造函数初始化方法
bindEvents : function //给str绑定事件, 认为是控制器即可
因为原始的2048有方块的移动效果, 我们独立起来了一个服务(工具方法,这个工具方法会被View继承), 主要是负责界面中的方块的移动, getPost是给底线库用的, 在模板生成的过程中需要根据节点的位置动态生成横竖坐标,然后定位:
var util = { animateShowBlock : function() { setTimeout(function() { this.renderHTML(); }.bind(this),200); }, animateMoveBlock : function(prop) { $("#num"+prop.form.y+""+prop.form.x).animate({top:40*prop.to.y,left:40*prop.to.x},200); }, //底线库的模板中引用了这个方法; getPost : function(num) { return num*40 + "px"; } //这个应该算是服务; };
下面是全部的代码, 引用的JS使用了CDN,可以直接打开看看:
上一篇: 信用卡效验程序哦