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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 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中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python在非root权限下的安装方法
2018/01/23 Python
Python中装饰器学习总结
2018/02/10 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
家长会演讲稿范文
2014/01/10 职场文书
六查六看剖析材料
2014/02/15 职场文书
办公室主任职责范本
2014/03/07 职场文书
城市创卫标语
2014/06/17 职场文书
语文课外活动总结
2014/08/27 职场文书
升学宴学生答谢词
2015/01/05 职场文书
长城导游词300字
2015/01/30 职场文书
七年级作文之环保作文
2019/10/17 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android