Javascript编写2048小游戏

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

  今天试了一下, 逻辑也不复杂, 主要是数据构造函数上的数据的各种操作, 然后通过重新渲染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,可以直接打开看看:

<!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>

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

时间: 2015-07-04

分享自己用JS做的扫雷小游戏

引用了jQuery,节省了很多鼠标点击上的判断.界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,我就不啰嗦啦~ 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断 界面显然都是照搬Windows的扫雷啦 详细的内容注释里都有,我就不啰嗦啦~ JS部分 var mineArray, //地雷数组 lastNum, //剩余雷数 countNum, //未被揭开的方块数 inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始 startTime; /

JavaScript编写连连看小游戏

天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果图: 写连连看之前要先考虑哪些呢? 1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开: 2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单. 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •̀ ω •́ )y:

javascript实现别踩白块儿小游戏程序

最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游戏区域的CSS设置为相对定位.溢出隐藏;两块"游戏板"上分别排布着24块方格,黑色每行随机产生一个,"游戏板"向下滚动并交替显示,将每个操作板的黑块位置存入数组,每次点击时将数组pop出来进行比对(我觉得亮点在这--). 这里是游戏的GitHub地址,大家可以到里点击中

JS写的数字拼图小游戏代码[学习参考]

复制代码 代码如下: <html> <head> <title>拼图</title> <style> td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100% ; height : 100% ; background-color : #000 ; color : #FFF ; text-align : center ; vertical-align : middle ;

12个非常有创意的JavaScript小游戏

这里是12个非常有创意的JavaScript小游戏,希望在给我们带来趣味的同时也能更进一步地了解更深层次的JavaScript语言,原来它可以这样的. Browser Pong Twitch Browser Ball Crystal Galazy Video & Picture Puzzle Apophis 2029 Bing-Bong Bomberman Bunny Hunt Real world racer JS Wars Berts Breakdown via:12 Amazing and

纯javascript模仿微信打飞机小游戏

七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示      源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov

js猜数字小游戏的简单实现代码

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

JavaScript实现一个空中避难的小游戏

前言 最近在看js中的事件,之前也一直有用到事件,用到最多的就是onclick单击事件,还有填写表单信息时的用到的onfocus聚焦时间,和onblur事件,最近看到了onmousemove鼠标移动事件,觉得很神奇,就突然很想写一个小游戏,用到了setInterval函数.游戏的功能也很简单,就是天上掉纸片,小人儿要不停的躲,一旦纸片和小人儿相撞,就会game over! 代码如下: <!DOCTYPE html> <html> <head> <style>

原创javascript小游戏实现代码

以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

由JavaScript技术实现的web小游戏(不含网游)

1.Mario(游戏地址:http://jsmario.com.ar/ ) 传说中的马里奥网页版,一比一实现了红白机时代超级马里奥中所有功能 与关卡,精细程度不逊原版游戏.依 赖库:无 2 . Bunny Hunt (游戏地址: http://www.themaninblue.com/experiment/BunnyHunt/) 猎兔,一款简单耐玩的网页狩猎游戏,没有使用第三方支持库,直接利用 css 与 JavasSript 实 现. 依 赖库:无 3 . Bomberman ( 游戏地址: 

javascript实现的猜数小游戏完整实例代码

本文实例讲述了javascript实现的猜数小游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

javascript+css3开发打气球小游戏完整代码

效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: <style> {margin:0;padding:0;} body{background:#434343;overflow:hidden} .balloon{ position:absolute; left:0; top:0; margin:auto; width:160px; height:160px; 圆角: 左上 右

JavaScript写个贪吃蛇小游戏(超详细)

贪吃蛇大家都玩过,但你会制作嘛?听起来好像很难的样子,其实非常的简单,话不多说直接上代码 我们先把dom结构写出来 <div id="content"> <div id="snake"> <div class="box head"></div> <div class="box"></div> </div> </div> 其中,con

基于javascript实现贪吃蛇经典小游戏

本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt

JavaScript制作windows经典扫雷小游戏

代码其实很简单,这里就不多废话了 <html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>扫雷-JavaScript Mine Sweeper

javascript实现点击星星小游戏

本文实例为大家分享了JavaScript实现点击星星的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #d2{ width:100px; height:20px; border:1px solid red; display:inline-block; } #d3{

25个好玩的JavaScript小游戏分享

值得一提的是,当下Web开发者们追捧的 Node.js 使得 JavaScript 能够在更多环境下运行,甚至是网站的服务器端,使得这门语言再次受到大家的关注.今天,本文与大家分享25个好玩的 JavaScript 小游戏,感受一下 JavaScript 的魅力.Bunny Hunt Travians Ajax Chinese Chess Digg Attack Invaders From Mars Solitaire Card Games Jetris – JavaScript Tetris

使用Javascript写的2048小游戏

最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议. HTML代码如下 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <scri