Javascript编写俄罗斯方块思路及实例


Posted in Javascript onJuly 07, 2015

俄罗斯方块这个游戏也做了移动端的兼容, 这个游戏难点是怎么翻转方块, 自己实现的方式是把方块放到一个二维数组, 然后逆时针旋转二维数组。

也有别的方法,比如直接用一个全局变量代表一个方向, 翻转的时候根据这个变量转动方块, 但是代码要写更多。

在文库搜索到了一篇关于算法的文章, ....看着好心塞:

Javascript编写俄罗斯方块思路及实例

游戏截图PC端:

Javascript编写俄罗斯方块思路及实例

游戏截图移动端:

Javascript编写俄罗斯方块思路及实例

模板引擎用了HandlebarsJS,  为了更好的模块化,也用了requireJS....没用好;

运行下面代码

var cfg = {
  width:14,
  height:20,
  time : 400
};
requirejs.config({
  baseUrl: 'libs',
  paths: {
    app: '../app'
  }
});

requirejs(["app/controller/mainController","app/view/mobileDOM","app/util"], function(con, mobileDOM, util) {

  if(util.isMobile()) {
    mobileDOM.addDOM();
  };
  con();
});

游戏主要有三个模型层: 游戏方块的模型层, 游戏分数的模型层, 游戏整体界面结构模型层;

控制层就一个, 就是用户点击游戏开始的按钮, 游戏就开始了, 如果是PC,就会监听keydown事件, 如果是移动端, 就新建四个方向键的DOM, 监听方向键的点击事件,事件会使当前方块的数据模型发生旋转, 至于显示,那是view层的事情,先不用管, 主要的逻辑包括方块的随机生成, 方块的碰撞检测,方块的消除,分数的增加, 重新随机生成方块等:

运行下面代码

define(["app/util"],function(util) {
  //分数模块,游戏开始的时候会用到;
  var score = {};
  require(["app/model/score"],function(defineScore) {
    score = defineScore;
  });

  var startGame = function() {
    //把当前的input元素禁用;
    $(this).attr("disabled","true");
    requirejs(["app/model/data","app/view/init","app/model/Block"], function(data, view, Block){
      //初始化方块;
      var block = new Block;
      var mapData = {};

      //方块发生改变的时候,我们用回调重新渲染界面;
      block.onupdate( function() {
        var blockData = this.get();
        //把数据格式转化成map数据;
        mapData = data.extend(blockData);
        $("#table").html( view( mapData ) );
      });

      block.testTouch = data.testTouch;

      //如果元素触底了或者是元素已经被卡主不能动的情况下;
      block.onend(function() {
        //这个说明当前的block触底了
        data.set( mapData );
        //我们需要重新生成一个方块, 直接调用newBlock即可;
        block.newBlock();
        //通过data计算,如果有连接起来的一条线,就执行SCORE回调, 随之会更新当前界面的分值;
        //如果方块跑到了最上面就是游戏失败了;
        data.oncalculate( score.addScore , block.destory.bind(block));
      });

      //现在才开始绑定事件
      if(!util.isMobile()) {
        $(window).keydown(function(ev) {
          if(ev.keyCode === 37) {
            block.add(block.moveLeft,"left");
          }else if( ev.keyCode === 39 ) {
            block.add(block.moveRight,"right");
          }else if( ev.keyCode === 40 ) {
            block.add(block.moveDown,"down");
          }else if( ev.keyCode === 38 ) {
            block.rotate();
          };
        });
      }else{
        $(".arrow-up").tap(function() {
          block.rotate();
        });
        $(".arrow-down").tap(function() {
          block.add(block.moveDown,"down");
        });
        $(".arrow-left").tap(function() {
          block.add(block.moveLeft,"left");
        });
        $(".arrow-right").tap(function() {
          block.add(block.moveRight,"right");
        });
      };
    });
  };

  //绑定界面事件 ,keyDown;
  var bindEvent = function() {
    //start....
    $("#start").click(startGame)
  };
  //为移动端添加DOM节点,
  //然后绑定移动端的事件;

  return function() {
    bindEvent();
  };
});

游戏的主要窗口直接看成是二维数组, 所有要显示的方块都是数组中的数据, 通过模板引擎, 一秒钟更新一次data到view, 模板如下:

运行下面代码

<script type="text/x-handlebars-template" id="tpl-td">
    {{#each this}}
      <tr>
        {{#each this}}
          <td class="{{#if this}}block{{/if}}">
          </td>
        {{/each}}
      </tr>
    {{/each}}
  </script>

为了让整体的内容和提示更加美观,用了提示插件 zepto.alert和bootStrap;

在线DEMO:打开

Javascript 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
javascript实现控制div颜色
Jul 07 #Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 #Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 #Javascript
javascript中数组方法汇总
Jul 07 #Javascript
jQuery原型属性和原型方法详解
Jul 07 #Javascript
在JavaScript中访问字符串的子串
Jul 07 #Javascript
jQuery.each使用详解
Jul 07 #Javascript
You might like
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
第十一节 重载 [11]
2006/10/09 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
js实现3D旋转相册
2020/08/02 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python实现反转部分单向链表
2018/09/27 Python
有模特经验的简历自我评价
2013/09/19 职场文书
理货员的岗位职责
2013/11/23 职场文书
园林资料员岗位职责
2013/12/30 职场文书
责任心演讲稿
2014/05/14 职场文书
大学生党员承诺书
2014/05/20 职场文书
公司口号大全
2014/06/11 职场文书
挂靠协议书
2015/01/27 职场文书
货款欠条范本
2015/07/03 职场文书
高中物理教学反思
2016/02/19 职场文书
go xorm框架的使用
2021/05/22 Golang
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
python实现A*寻路算法
2021/06/13 Python