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 相关文章推荐
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
JavaScript实现点击切换功能
Jan 27 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
Javascript编写俄罗斯方块思路及实例
Jul 07 #Javascript
You might like
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP中用hash实现的数组
2011/07/17 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
pyside写ui界面入门示例
2014/01/22 Python
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
python drf各类组件的用法和作用
2021/01/12 Python
高级Java程序员面试题
2016/06/23 面试题
超市中秋节活动方案
2014/02/12 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
运动会报道稿300字
2014/10/02 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
端午节活动总结报告
2015/02/11 职场文书
亲情作文之母爱
2019/09/25 职场文书