首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript编写2048小游戏

Posted in Javascript onJuly 07, 2015

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

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

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

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

效果图如下：

Javascript编写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，可以直接打开看看：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<script src="http://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<style>
  #g{
    position: relative;
  }

  .block,.num-block{
    position: absolute;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 4px;
  }
  .block{
    border:1px solid #eee;
    box-sizing: border-box;
  }
  .num-block{
    color:#27AE60;
    font-weight: bold;
  }
</style>
  <div class="container">
    <div class="row">
      <div id="g">
      </div>
    </div>
  </div>

<script id="tpl" type="text/template">
  <% for(var i=0; i<data.length; i++) {%>
      <!--生成背景块元素--->
    <% for(var j=0; j< data[i].length; j++ ) { %>
      <div id="<%=i%><%=j%>" class="block" style="left:<%=util.getPost(j)%>;top:<%=util.getPost(i)%>" data-x="<%=j%>" data-y="<%=i%>" data-info='{"x":<%=[j]%>,"y":<%=[i]%>}'>
      </div>
    <% } %>
      <!--生成数字块元素--->
    <% for(var j=0; j< data[i].length; j++ ) { %>
      <!--如果数据模型里面的值为0，那么不显示这个数据的div--->
      <% if ( 0!==data[i][j] ) {%>
        <div id="num<%=i%><%=j%>" class="num-block" style="left:<%=util.getPost(j)%>;top:<%=util.getPost(i)%>" >
          <%=data[i][j]%>
        </div>
      <% } %>
    <% } %>
  <% } %>
</script>
<script>
  var Data = function() {
    this.init();
  };
  $.extend(Data.prototype, {
    /**
     * @desc 构造函数初始化
     * */
    init : function() {
      this.generateData();
    },
    /**
     * @desc 生成了默认的数据地图
     * @param void
     * */
    generateData : function() {
      var data = [];
      for(var i=0; i<4; i++) {
        data[i] = data[i] || [];
        for(var j=0; j<4; j++) {
          data[i][j] = 0;
        };
      };
      this.map = data;
    },
    /**
     * @desc 随机一个block填充到数据里面
     * @return void
     * */
    generationBlock : function() {
      var data = this.getRandom();
      var position = this.getPosition();
      this.set( position.x, position.y, data)
    },
    /**
     * @desc 获取随机数 2 或者是 4
     * @return 2 || 4;
     * */
    getRandom : function() {
      return Math.random()>0.5 ? 2 : 4;
    },
    /**
     * @desc 获取data里面数据内容为空的位置
     * @return {x:number, y:number}
     * */
    getPosition : function() {
      var data = this.map;
      var arr = [];
      for(var i=0; i<data.length; i++ ) {
        for(var j=0; j< data[i].length; j++ ) {
          if( data[i][j] === 0) {
            arr.push({x:j, y:i});
          };
        };
      };
      return arr[ Math.floor( Math.random()*arr.length ) ];
    },
    /**
     * @desc 把数据里第y排， 第x列的设置， 默认为0， 也可以传值;
     * @param x, y
     * */
    set : function(x,y ,arg) {
      this.map[y][x] = arg || 0;
    },
    /**
     * @desc 在二维数组的区间中水平方向是否全部为0
     * @desc i明确了二维数组的位置， k为开始位置， j为结束为止
     * */
    no_block_horizontal: function(i, k, j) {
      k++;
      for( ;k<j; k++) {
        if(this.map[i][k] !== 0)
        return false;
      };
      return true;
    },
    //和上面一个方法一样，检测的方向是竖排;
    no_block_vertical : function(i, k, j) {
      var data = this.map;
      k++;
      for(; k<j; k++) {
        if(data[k][i] !== 0) {
          return false;
        };
      };
      return true;
    },
    /**
     * @desc 往左边移动
     * */
    moveLeft : function() {
      /*
      * 往左边移动；
      * 从上到下， 从左到右， 循环；
      * 从0开始继续循环到当前的元素 ，如果左侧的是0，而且之间的空格全部为0 ， 那么往这边移，
      * 如果左边的和当前的值一样， 而且之间的空格值全部为0, 就把当前的值和最左边的值相加,赋值给最左边的值;
      * */
      var data = this.map;
      var result = [];
      for(var i=0; i<data.length; i++ ) {
        for(var j=1; j<data[i].length; j++) {
          if (data[i][j] != 0) {
            for (var k = 0; k < j; k++) {
              //当前的是data[i][j], 如果最左边的是0， 而且之间的全部是0
              if (data[i][k] === 0 && this.no_block_horizontal(i, k, j)) {
                result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
                data[i][k] = data[i][j];
                data[i][j] = 0;
                //加了continue是因为，当前的元素已经移动到了初始的位置，之间的循环我们根本不需要走了
                break;
              }else if(data[i][j]!==0 && data[i][j] === data[i][k] && this.no_block_horizontal(i, k, j)){
                result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
                data[i][k] += data[i][j];
                data[i][j] = 0;
                break;
              };
            };
          };
        };
      };
      return result;
    },
    moveRight : function() {
      var result = [];
      var data = this.map;
      for(var i=0; i<data.length; i++ ) {
        for(var j=data[i].length-2; j>=0; j--) {
          if (data[i][j] != 0) {
            for (var k = data[i].length-1; k>j; k--) {
              //当前的是data[i][j], 如果最左边的是0， 而且之间的全部是0
              if (data[i][k] === 0 && this.no_block_horizontal(i, k, j)) {
                result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
                data[i][k] = data[i][j];
                data[i][j] = 0;
                break;
              }else if(data[i][k]!==0 && data[i][j] === data[i][k] && this.no_block_horizontal(i, j, k)){
                result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
                data[i][k] += data[i][j];
                data[i][j] = 0;
                break;
              };
            };
          };
        };
      };
      return result;
    },
    moveUp : function() {
      var data = this.map;
      var result = [];
      // 循环要检测的长度
      for(var i=0; i<data[0].length; i++ ) {
        // 循环要检测的高度
        for(var j=1; j<data.length; j++) {
          if (data[j][i] != 0) {
            //x是确定的, 循环y方向;
            for (var k = 0; k<j ; k++) {
              //当前的是data[j][i], 如果最上面的是0， 而且之间的全部是0
              if (data[k][i] === 0 && this.no_block_vertical(i, k, j)) {
                result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
                data[k][i] = data[j][i];
                data[j][i] = 0;
                break;
              }else if(data[j][i]!==0 && data[k][i] === data[j][i] && this.no_block_vertical(i, k, j)){
                result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
                data[k][i] += data[j][i];
                data[j][i] = 0;
                break;
              };
            };
          };
        };
      };
      return result;
    },
    moveDown : function() {
      var data = this.map;
      var result = [];
      // 循环要检测的长度
      for(var i=0; i<data[0].length; i++ ) {
        // 循环要检测的高度
        for(var j=data.length - 1; j>=0 ; j--) {
          if (data[j][i] != 0) {
            //x是确定的, 循环y方向;
            for (var k = data.length-1; k>j ; k--) {
              if (data[k][i] === 0 && this.no_block_vertical(i, k, j)) {
                result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
                data[k][i] = data[j][i];
                data[j][i] = 0;
                break;
              }else if(data[k][i]!==0 && data[k][i] === data[j][i] && this.no_block_vertical(i, j, k)){
                result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
                data[k][i] += data[j][i];
                data[j][i] = 0;
                break;
              };
            };
          };
        };
      };
      return result;
    }
   });
  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";
    }
    //这个应该算是服务;
  };
  var View = function(data) {
    this.data = data.data;
    this.el = data.el;
    this.renderHTML();
    this.init();
  };
  $.extend(View.prototype, {
    renderHTML : function() {
      var str = _.template( document.getElementById("tpl").innerHTML )( {data : this.data.map} );
      this.el.innerHTML = str;
    },
    init : function() {
      this.bindEvents();
    },
    bindEvents : function() {
      $(document).keydown(function(ev){
        var animationArray = [];
        switch(ev.keyCode) {
          case 37:
            animationArray = this.data.moveLeft();
            break;
          case 38 :
            animationArray = this.data.moveUp();
            break;
          case 39 :
            animationArray = this.data.moveRight();
            break;
          case 40 :
            animationArray = this.data.moveDown();
            break;
        };
        if( animationArray ) {
          for(var i=0; i<animationArray.length; i++ ) {
            var prop = animationArray[i];
            this.animateMoveBlock(prop);
          };
        };
        this.data.generationBlock();
        this.animateShowBlock();
      }.bind(this));
    }
  });

  $(function() {
    var data = new Data();
    //随机生成两个节点;
    data.generationBlock();
    data.generationBlock();
    //生成视图
    var view = new View({ data :data, el : document.getElementById("g") });
    //继承工具方法, 主要是动画效果的继承;
    $.extend( true, view, util );
    //显示界面
    view.renderHTML();
  });
</script>
</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

Javascript编写2048小游戏

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
layui弹出层效果实现代码
May 19 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
利用JavaScript脚本实现滚屏效果的方法
Jul 07 #Javascript
JavaScript编写连连看小游戏
Jul 07 #Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 #Javascript
JavaScript编写推箱子游戏
Jul 07 #Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 #Javascript
理解JavaScript的变量的入门教程
Jul 07 #Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 #Javascript
Odoo(1) tkFileDialog(1) 批处理(1) SeaTunnel(1) 重复数据(2) NFS(1) T-SQL(1) 黑名单(1) Logrotate(1) ftpserver(1)
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
django模板语法学习之include示例详解
2017/12/17 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python开发入门——列表生成式
2020/09/03 Python
python 写一个性能测试工具（一）
2020/10/24 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
NBA欧洲商店(西班牙)：NBA Europe Store ES
2019/04/16 全球购物
size?荷兰官方网站：英国高级运动鞋精品店
2020/07/24 全球购物
单位消防安全制度
2014/01/12 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
植树节标语
2014/06/27 职场文书
交通志愿者活动总结
2014/06/27 职场文书
2014年检验科工作总结
2014/11/22 职场文书
学校捐款活动总结
2015/05/09 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
创业计划书之零食店（进口）
2019/09/24 职场文书