HTML5+JS实现俄罗斯方块原理及具体步骤

基本知识:

HTML5 CSS JS
本游戏包括三个文件:

RusBlock.html:设定元素
RusBlock.css:设定样式
RusBlock.js:脚本控制

第一步:界面的设置和素材的准备

RusBlock.html

复制代码@H_777_34@代码如下:
!DOCTYPE html>
html>
head>
tITle> RusBlock/title>
link rel=”stylesheet” type=”text/css” href=”RusBlock.css”>
script type=”text/javascript”>
function 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.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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！