点评：俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置，下面为大家详细介绍下
本游戏实现的基本原理:游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。
创建RusBlock类包含相应的数据和行为，创建二维数组aState[21][25]记录游戏区域中被标记的矩形。
俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置。当下落的部件到底了，就会产生一个新的部件，就部件的被标记的矩形就会赋值给游戏区域的数组。
在游戏循环函数中，打印正在下落的部件，和已经固定好的部件，还有下一下落的部件。
基本知识:
HTML5 CSS JS
本游戏包括三个文件:
RusBlock.html:设定元素
RusBlock.css:设定样式
RusBlock.js:脚本控制
第一步:界面的设置和素材的准备
RusBlock.html
<!DOCTYPE html>
<html>
<head>
<title>RusBlock</title>
<link rel=stylesheet type=text/css href=RusBlock.css>
<script type=text/javascript>
function ShareGame() {
var URL = ?link= + document.URL + &title=RusBlock;
window.showModalDialog([URL]);
}
</script>
</head>
<body onkeyup=Action(event)>
<audio loop=loop id=Background-AudioPlayer preload=auto>
<source src=audio/background.mp3″ type=audio/mp3″/>
</audio>
<audio id=GameOver-AudioPlayer preload=auto>
<source src=audio/gameover.ogg type=audio/ogg>
</audio>
<audio id=Score-AudioPlayer preload=auto>
<source src=audio/score.mp3″ type=audio/mp3″/>
</audio>
<div id=Game-Area>
<div id=Button-Area>
<h1 id=Game-Name>RusBlock</h1>
<button id=Button-Game-Start onclick=GameStart()>Start</button>
<button id=Button-Game-End onclick=GameEnd()>End</button>
<form id=Form-Game-Level>
<select id=Select-Game-Level>
<option value=500″ selected=selected>Easy</option>
<option value=300″>Normal</option>
<option value=200″>Hard</option>
</select>
</form>
<button onclick=ShareGame() id=Button-Game-Share>分享到人人</button>
</div>
<canvas id=Game-Canvas></canvas>
<div id=Score-Area>
<h2>Score</h2>
<p id=Game-Score>0</p>
</div>
</div>
<script type=text/javascript src=RusBlock.js></script>
</body>
</html>
第二步:样式
RosBlock.css
body {
background-color:gray;
text-align:center;
font-family: ’Times New Roman ’;
background-image:url();
}
h1#Game-Name {
background-color:white;
width:100%;
font-size:x-large;
}
h2,#Game-Score {
font-size:x-large;
background-color:white;
}
#Game-Area {
position:absolute;
left:10%;
width:80%;
height:99%;
}
canvas#Game-Canvas {
background-color:white;
width:80%;
height:98%;
float:left;
}
#Button-Area ,#Score-Area{
width:10%;
height:100%;
float:left;
}
#Button-Game-Start ,#Button-Game-End,#Button-Game-Share,#Select-Game-Level{
width:100%;
height:10%;
font-size:larger;
border-right-width:3px;
background-color:white;
}
#Select-Game-Level {
width:100%;
height:100%;
font-size:x-large;
border-color:gray;
}
第三步:编写js代码
RusBlock.js
Rusblock类包括的成员解析:
数据:
nCurrentComID:当前下落部件的ID
aState[21][25]:存储游戏区域状态的数组
CurrentCom：当前下落的部件
NextCom：下一部件
ptIndex：当前下落的部件相对游戏区域的索引
函数:
NewNextCom()：产生新的下一部件
NextComToCurrentCom():将下一部件的数据转移到当前下落的部件上
CanDown():判断当前部件是否还可以下落
CanNew():判断是否还可以产生新的部件
Left():当前部件向左移动
Right():当前部件向右移动
Rotate():当前部件顺时针旋转
Acceleratet():当前部件向下加速
Disappear():消去一行
CheckFail():判断是否游戏失败
InvalidateRect():刷新当前部件的区域
完成:下载Demo