JavaScript实现俄罗斯方块游戏过程分析及源码分享_javascript技巧

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

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

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

游戏规则

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

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

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

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

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

//消行 
function deleteLine(){ 
  var lines = 0; 
  for(var i=0; i=0; k--){ 
        area[k+1] = area[k]; 
      } 
    } 
    area[0] = generateBlankLine(); 
    } 
  } 
  return lines; 
}

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

效果图

有待优化

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

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

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

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

完整HTML源码：

 

			 得分:  0
			

	 
	

完整tetris.js源码：

/** 
* JS俄罗斯方块游戏 v 1.0
*/ 
//表示页面中的table, 这个table就是将要显示游戏的主面板 
var tbl; 
//游戏状态 0: 未开始;1 运行; 2 中止; 
var status = 0; 
//定时器, 定时器内将做moveDown操作 
var timer; 
//分数 
var score = 0; 

//area是一个18*10的数组,也和页面的table对应。初始时都为0, 如果被占据则为1 

var area = new Array(18); 
for(var i=0;i17||x9||y=0; k--){ 
				area[k+1] = area[k]; 
			} 
		} 
		area[0] = generateBlankLine(); 
		} 
	} 
	return lines; 
} 
//擦除整个面板 
function erasearea(){ 
	for(var i=0; i