去年2048很火， 本来我也没玩过， 同事说如果用JS写2048 只要100多行代码；

　　PS(iWeb峰会暨攻城师嘉年华2015嘉年华要来啦， 在文章结尾有具体的地址和时间）；

　　今天试了一下， 逻辑也不复杂， 主要是数据构造函数上的数据的各种操作， 然后通过重新渲染DOM实现界面的更新， 整体不复杂， JS，css，和HTML合起来就300多行；

　　界面的生成使用了underscore.js的template方法， 使用了jQuery，主要是DOM的选择和操作以及动画效果，事件的绑定只做了PC端的兼容，只绑定了keydown事件；

　　把代码放到github-page上， 通过点击这里查看 实例： ；

　　效果图如下：

　　

　　所有的代码分为两大块，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，可以直接打开看看：

 

 

 

　　最近对HTML5的游戏很感兴趣， 今年8月16号国家会议中心又有WEB开发者大会， 估计H5的游戏大厅又要爆满， 别人那么大， 我想去看看， o(^▽^)o ， 想想就想尿一会儿， 太激动了；

　　地址是：iWeb峰会暨攻城师嘉年华·3000人+规模的北京站开启报名！8月16日 北京国际会议中心， 有没有要约的童鞋啊， 妹子优先。

　　官方网站是： 赶快报名么么哒；

 

作者：

出处：

QQ：287101329