第二步:样式
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
