游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形，每个矩形宽度为10个单位，heght为6个个（canvas的绝对单位是固定的，非RusBlock类包含相应的数据和行为，创建二维数组aState[21][25]记录游戏区域中被标记的矩形。俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立零件类，然后建立堆叠存储7个零件，每个零件包涵存储该零件所占的矩形的个数和位置。当替换的零件到底了，就会产生一个新的零件，就部件的被标记的矩形就会赋值给游戏区域的数组。在游戏循环函数中，打印正在下落的部件，和已经固定好的部件，还有下一下落的部件。
基本知识：
HTML5CSSJS本游戏包括三个文件：RusBlock.html：设置元素RusBlock.css：设置样式RusBlock.js：脚本控制逐步：界面的设置和素材的准备RusBlock.html
复制代码
代码如下：
<！DOCTYPEhtml><html><head><title>RusBlock</title><linkrel=“stylesheet”type=“text/css”href=“RusBlock.css”><scripttype=“text/javascript”>函数ShareGame（）{varURL=“http://share.renren.com/share/buttonshare.do?link=”+document.URL+“＆title=RusBlock”;window.showModalDialog（[URL]）;}</script></head><bodyonkeyup=”Action（event）”><sourcesrc=”audio/background.mp3”type=”audio/mp3”/><sourcesrc=”audio/gameover。
<sourcesrc=”audio/score.mp3”type=”audio/mp3”/><divid=“Game-Area”><divid=“Button-Area”><h1id=“Game-Name”>RusBlock</h1><buttonid=“Button-Game-Start”onclick=”GameStart（）“>开始</button><buttonid=“Button-Game-End”onclick=”GameEnd（）”>结束</button><formid=”Form-Game-Level”><selectid=“Select-Game-Level”><optionvalue=”500”selected=”selected”>简单</option><optionvalue=“300”>普通</option><optionvalue=”200”>硬</option></select></form><buttononclick=”ShareGame（）”id=”Button-Game-Share”>分享到人人</button></div><canvasid=“Game-Canvas”></canvas>
<divid=“Score-Area”><h2>得分</h2><pid=”Game-Score”>0</p></div></div><scripttype=“text/javascript”src=”RusBlock.js”></script></body></html>
第二步：样式RosBlock.css
复制代码
代码如下：
身体{background-color：gray;text-align：center;font-family：'TimesNewRoman';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.jsRusblock类包括的成员解析：数据：nCurrentComID：当前放置部件的IDaState[21][25]：存储游戏区域状态的多个CurrentCom：当前放置的部件NextCom：下一部件ptIndex：下落当前的部件相对游戏区域的索引函数：NewNextCom（）：产生新的下一部件NextComToCurrentCom（）：将下一部件的数据转移到当前下落的部件上CanDown（）：判断当前部件是否还可以分解CanNew（）：判断是否还可以产生新的部件Left（）：当前部件向左移动Right（）：当前部件向右移动Rotate（）：当前部件顺时针旋转Acceleratet（）：当前部件向下加速Disappear（）：消去一行CheckFail（）：判断是否游戏失败InvalidateRect（）：刷新当前部件的区域完成：下载Demo
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60641.shtml
