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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
如何基于js判断浏览器版本
Feb 20 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微信公众号开发之微信企业付款给个人
2018/10/04 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
小结Python的反射机制
2020/09/28 Python
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
经销商会议欢迎词
2014/01/11 职场文书
先进集体事迹材料
2014/02/17 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
文明家庭事迹材料
2014/12/20 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
mysql 获取相邻数据项
2022/05/11 MySQL
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server
Python实现仓库管理系统
2022/05/30 Python
python热力图实现的完整实例
2022/06/25 Python