Javascript写了一个2048的游戏

　　去年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