俄罗斯方块有7个部件,每个部件所占的矩形的个数和位置不同,所以建立部件类,然后建立数组储存7个部件,每个部件包涵数组储存该部件所占的矩形的个数和位置,下面为大家详细介绍下
本游戏实现的基本原理:

游戏区域是限定大小的区域,本游戏的游戏区域有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

最新资讯
Netflix上调标准和高级套餐包月价格

Netflix上调标准和高

据报道,Netflix周四将标准套餐和高级套餐的价格分别上
苹果高管解读财报:我们推出5G版iPhone的时机正好

苹果高管解读财报:我们

苹果公司今天发布了2020财年第四财季业绩。报告显示,苹
亚马逊高管解读财报:疫情推高了物流业务的成本

亚马逊高管解读财报:疫

亚马逊今天发布了2020财年第三季度财报。报告显示,亚马
谷歌母公司Alphabet三季度财报超预期 盘后股价涨超6%

谷歌母公司Alphabet三

谷歌母公司Alphabet(Nasdaq:GOOG)今天发布了截至9月30日
谷歌高管解读财报:对硬件的投资将更加深入

谷歌高管解读财报:对硬

Alphabet(谷歌母公司)今天发布了截至9月30日的2020财年
库克:公司对iPhone 12非常有信心

库克:公司对iPhone 12

苹果公司今天发布了2020财年第四财季业绩。报告显示,苹
最新文章
html5 canvas-1.canvas介绍(hello canvas)

html5 canvas-1.canva

大家都知道,目前并不是所有的浏览器中支持html5,就算是
canvas烟花特效锦集

canvas烟花特效锦集

这篇文章主要介绍了canvas烟花特效锦集,小编觉得挺不错
使用Html5、CSS实现文字阴影效果

使用Html5、CSS实现文

这篇文章主要介绍了使用Html5、CSS实现文字阴影效果的
html5 canvas绘制放射性渐变色效果

html5 canvas绘制放射

这篇文章主要介绍了html5 canvas绘制放射性渐变色效果
canvas基础之图形验证码的示例

canvas基础之图形验证

这篇文章主要介绍了canvas基础之图形验证码的示例的相
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

利用HTML5+css3+jquer

这篇文章主要介绍了利用HTML5+css3+jquery+weui实现仿