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之可拖动的iframe效果代码
Aug 01 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
jquery indexOf使用方法
Aug 19 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
详解Vue中watch的高级用法
May 02 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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
透析PHP的配置文件php.ini
2006/10/09 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
JqGrid web打印实现代码
2011/05/31 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
vue实现计算器功能
2020/02/22 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python实现简单http服务器功能
2018/09/17 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
商得四方公司面试题(gid+)
2014/04/30 面试题
毕业生银行实习自我鉴定
2014/10/14 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
酒店员工管理制度
2015/08/05 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
python实现进度条的多种实现
2021/04/29 Python