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技术-屏蔽类
Aug 15 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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连接函数implode与分割explode的深入解析
2013/06/26 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
异步加载script的代码
2011/01/12 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
怎样声明子类
2013/07/02 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
城管综合整治方案
2014/05/01 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
小学运动会开幕词
2015/01/28 职场文书
会计求职信怎么写
2015/03/20 职场文书
羊脂球读书笔记
2015/06/30 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server
redis 解决库存并发问题实现数量控制
2022/04/08 Redis