javascript实现俄罗斯方块游戏的思路和方法


Posted in Javascript onApril 27, 2015

观摩一下《编程之美》:“程序虽然很难写,却很美妙。要想把程序写好,需要写好一定的基础知识,包括编程语言、数据结构与算法。程序写得好,需要缜密的逻辑思维能力和良好的梳理基础,而且熟悉编程环境和编程工具。”

学了几年的计算机,你有没有爱上编程。话说,没有尝试自己写过一个游戏,算不上热爱编程。

俄罗斯方块曾经造成的轰动与造成的经济价值可以说是游戏史上的一件大事,它看似简单但却变化无穷,令人上瘾。相信大多数同学,曾经为它痴迷得茶不思饭不想。

游戏规则

1、一个用于摆放小型正方形的平面虚拟场地,其标准大小:行宽为10,列高为20,以每个小正方形为单位。

2、一组由4个小型正方形组成的规则图形,英文称为Tetromino,中文通称为方块共有7种,分别以S、Z、L、J、I、O、T这7个字母的形状来命名。

javascript实现俄罗斯方块游戏的思路和方法

I:一次最多消除四层

J(左右):最多消除三层,或消除二层

L:最多消除三层,或消除二层

O:消除一至二层

S(左右):最多二层,容易造成孔洞

Z (左右):最多二层,容易造成孔洞

T:最多二层

方块会从区域上方开始缓慢继续落下。玩家可以以90度为单位旋转方块,以格子为单位左右移动方块,让方块加速落下。方块移到区域最下方或是着地到其他方块上无法移动时,就会固定在该处,而新的方块出现在区域上方开始落下。当区域中某一列横向格子全部由方块填满,则该列会消失并成为玩家的得分。同时删除的列数越多,得分指数上升。

分析与解法

每块方块落下的过程中,我们可以做:

1)旋转到合适的方向

2)水平移动到某一列

3)垂直下落到底部

首先,需要用一个二维数组,area[18][10]表示18*10的游戏区域。其中,数组中值为0表示空,1表示有方块。

方块一共7种,每种有4种方向。定义activeBlock[4],在编译之前这个数组的值预定算好,在程序中直接使用。

难点

1)边界检查。

//检查左边界,尝试着朝左边移动一个,看是否合法。
function checkLeftBorder(){ 
  for(var i=0; i<activeBlock.length; i++){ 
    if(activeBlock[i].y==0){ 
      return false; 
    } 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y-1)){ 
      return false; 
    } 
  } 
  return true; 
} //同理,需要检测右边界和底边界

2)旋转, 需要数理逻辑, 一个点相对另外一个点旋转90度的问题。
3)定时和监听键盘事件机制让游戏自动运行下去。

//开始 
function begin(e){ 
  e.disabled = true; 
  status = 1; 
  tbl = document.getElementById("area"); 
  if(!generateBlock()){ 
    alert("Game over!"); 
    status = 2; 
    return; 
  } 
  paint(); 
  timer = setInterval(moveDown,1000); 
} 
document.onkeydown=keyControl;

程序过程

1)用户点开始->构造一个活动图形, 设置定时器。

//当前活动的方块, 它可以左右下移动, 变型。当它触底后, 将会更新area; 
var activeBlock; 
//生产方块形状, 有7种基本形状。 
function generateBlock(){ 
  activeBlock = null; 
  activeBlock = new Array(4); 
  //随机产生0-6数组,代表7种形态。
  var t = (Math.floor(Math.random()*20)+1)%7; 
  switch(t){ 
    case 0:{ 
      activeBlock[0] = {x:0, y:4}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:0, y:5}; 
      activeBlock[3] = {x:1, y:5}; 

      break; 
    } 
    //省略部分代码..............................
    case 6:{ 
      activeBlock[0] = {x:0, y:5}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:1, y:5}; 
      activeBlock[3] = {x:1, y:6}; 
      break; 
    } 
  } 
  //检查刚生产的四个小方格是否可以放在初始化的位置. 
  for(var i=0; i<4; i++){ 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y)){ 
        return false; 
      } 
    } 
  return true; 
}

2)每次向下移动后, 都检查是否触底, 如果触底了, 则尝试消行。

//消行 
function deleteLine(){ 
  var lines = 0; 
  for(var i=0; i<18; i++){ 
    var j=0; 
    for(; j<10; j++){ 
      if(area[i][j]==0){ 
        break; 
    } 
  } 
  if(j==10){ 
    lines++; 
    if(i!=0){ 
      for(var k=i-1; k>=0; k--){ 
        area[k+1] = area[k]; 
      } 
    } 
    area[0] = generateBlankLine(); 
    } 
  } 
  return lines; 
}

3)完了之后再构造一个活动图形, 再设置定时器。

效果图

javascript实现俄罗斯方块游戏的思路和方法

javascript实现俄罗斯方块游戏的思路和方法

javascript实现俄罗斯方块游戏的思路和方法

有待优化

1)设置不同形状方块的颜色。

思路:在创建方块函数内,设定activeBlockColor颜色,七种不同形态方块颜色各异(除了修改generateBlock方法之外,还需要修改paintarea方法。因为一开始考虑不周全,消除一行后,重绘方块的同时将颜色统一,因此可以考虑移除表格n行,然后在顶部增添n行,以保证没消除方块的完整性)。

2)当当前方块下落时,可以提前查看下一个方块。

思路:将generateBlock方法拆分成两部分,一部分用于随机尝试下一个方块,一部分用于缓存当前所要描绘的方块。当当前方块碰到底部被固定后,下一方块开始描绘,同时又再次随机产生新方块。如此反复。

以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
Vue异步组件使用详解
Apr 08 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
vue代理和跨域问题的解决
Jul 18 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 #Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 #Javascript
使用console进行性能测试
Apr 27 #Javascript
浅谈javascript实现八大排序
Apr 27 #Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 #Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 #Javascript
javascript关于运动的各种问题经典总结
Apr 27 #Javascript
You might like
php 表单验证实现代码
2009/03/10 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
jQuery使用手册之一
2007/03/24 Javascript
javascript比较文档位置
2008/04/08 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
vue中如何使用ztree
2018/02/06 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Django 登陆验证码和中间件的实现
2018/08/17 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python yield和Generator函数用法详解
2020/02/10 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
美丽家庭事迹材料
2014/05/03 职场文书
软件售后服务承诺书
2014/05/21 职场文书
松材线虫病防治方案
2014/06/15 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书