您的位置：首页 > Web前端 > JavaScript

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

2013-11-29 16:23 537 查看

本游戏实现的基本原理:

游戏区域是限定大小的区域，本游戏的游戏区域有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(); 
} 
</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> 
[/code]
第二步:样式 
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():刷新当前部件的区域 

完成:[url=http://pan.baidu.com/s/13nnRI]下载Demo

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航