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 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
如何用JS实现简单的数据监听
May 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
nginx 设置多个站跨域
2021/03/09 Servers
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
JS触摸事件、手势事件详解
2017/05/04 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
深入了解Python数据类型之列表
2016/06/24 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Java及python正则表达式详解
2017/12/27 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
解决Python3下map函数的显示问题
2019/12/04 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
广告学专业毕业生自荐信
2013/09/24 职场文书
年级组长自我鉴定
2014/02/22 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
白血病捐款倡议书
2014/05/14 职场文书
2014年保育员工作总结
2014/12/02 职场文书
文明家庭事迹材料
2014/12/20 职场文书
MySQL注入基础练习
2021/05/30 MySQL