意见：俄罗斯方块有7个零件，每个零件所占的矩形的个数和位置不同，所以建立零件类，然后建立堆积存储7个零件，每个零件包涵存储该零件所占的矩形的个数和位置，下面为大家详细介绍下
本游戏实现的基本原理：
游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形，每个矩形宽度为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” >
函数ShareGame（）{
var URL =“ http://share.renren.com/share/buttonshare.do?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。
<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（）“>开始</ button>
<button id =“ Button-Game-End” onclick =” GameEnd（）”>结束</ button>
<form id =” Form-Game-Level”>
<select id =“ Select-Game-Level”>
<option value = ” 500” selected =” selected”>简单</ option>
<option value =” 300”>普通</ option>
<option value =” 200”>硬</ option>
</ select>
</ form>
<button onclick =” ShareGame（）” id =” Button-Game-Share”>分享到人人</ button>
</ div>
<canvas id =“ Game-Canvas”> </ canvas>
<div id =“ Score-Area”>
<h2>得分</ h2>
<p id =” Game-Score”> 0 </ p>
</ div>
</ div>
<script type =“ text / javascript” src =” RusBlock.js”> </ script>
</ body>
</ html>
第二步：
样式RosBlock.css
复制代码
代码如下：
身体{
background-color：gray;
text-align：center;
font-family：'Times New Roman';
background-image：url（“”）;
}
h1＃Game-Name {
background-color：white;
宽度：100％;
font-size：x-large;
}
h2，＃Game-Score {
font-size：x-large;
背景颜色：白色；
}
＃Game-Area {
位置：绝对；
左：10％;
宽度：80％;
高度：99％;
}
canvas＃Game-Canvas {
background-color：white;
宽度：80％;
高度：98％;
向左飘浮;
}
＃Button-Area，＃Score-Area {
width：10％;
高度：100％;
向左飘浮;
}
＃Button-Game-Start，＃Button-Game-End，＃Button-Game-Share，＃Select-Game-Level {
width：100％;
高度：10％;
font-size：更大;
border-right-width：3px;
背景颜色：白色；
}
＃Select-Game-Level {
宽度：100％;
高度：100％;
font-size：x-large;
边框颜色：灰色；
}
第三步：
编写js代码RusBlock.js
Rusblock类包括的成员解析：
数据：
nCurrentComID：当前放置部件的ID
aState [21] [25]：存储游戏区域状态的
当前Current：当前放置的部件
NextCom：下一部件
ptIndex：下落当前的部件相对游戏区域的索引
函数：
NewNextCom（）：产生新的下一部件
NextComToCurrentCom（）：将下一部件的数据转移到当前下落的部件上
CanDown（）：判断当前部件是否还可以分解
CanNew（）：判断是否还可以产生新的部件
Left（）：当前部件向左移动
Right（）：当前部件向右移动
Rotate（）：当前部件顺时针旋转
Acceleratet（）：当前部件向下加速
Disappear（）：消去一行
CheckFail（）：判断是否游戏失败
InvalidateRect（）：刷新当前部件的区域
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61512.shtml
