HTML5+JS实现俄罗斯方块原理及具体步骤
程序员文章站
2023-11-13 08:20:04
俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置，下面为大家详细介绍下... 13-11-29...
本游戏实现的基本原理:
游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。
创建rusblock类包含相应的数据和行为，创建二维数组astate[21][25]记录游戏区域中被标记的矩形。
俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置。当下落的部件到底了，就会产生一个新的部件，就部件的被标记的矩形就会赋值给游戏区域的数组。
在游戏循环函数中，打印正在下落的部件，和已经固定好的部件，还有下一下落的部件。
<!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
游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为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”>
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