意见:俄罗斯方块有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
复制代码
代码如下:
RusBlock title>函数ShareGame(){
var URL =“ http://share.renren.com/share/buttonshare.do?link=” + document.URL +“&title = RusBlock”;
window.showModalDialog([URL]);
}
script>
head>
audio>
audio>
< div id =“ Button-Area”>
RusBlock h1>
开始 button>
结束 button>
简单 option>
普通 option>
硬 option>
select>
form>
分享到人人 button>
div>
canvas>
得分 h2>
0 p>
div>
div>
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():刷新当前部件的区域