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

意见：俄罗斯方块有7个零件，每个零件所占的矩形的个数和​​位置不同，所以建立零件类，然后建立堆积存储7个零件，每个零件包涵存储该零件所占的矩形的个数和位置，下面为大家详细介绍下

本游戏实现的基本原理：

游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形，每个矩形宽度为10个单位，heght为6个个(canvas的绝对单位是固定的，非RusBlock

类包含相应的数据和行为，创建二维数组aState [21] [25]记录游戏区域中被标记的矩形。

俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立零件类，然后建立层叠存放7个零件，每个零件包涵存储该零件所占的矩形的个数和​​位置。当替换的零件到底了，就会产生一个新的零件，就部件的被标记的矩形就会赋值给游戏区域的数组。

在游戏循环函数中，打印正在下落的部件，和已经固定好的部件，还有下一下落的部件。

基本知识：

HTML5 CSS JS

本游戏包括三个文件：

RusBlock.html：设置元素

RusBlock.css：设置样式RusBlock.js：

脚本控制

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

RusBlock.html

复制代码

代码如下：

RusBlock title>

函数ShareGame(){

var URL =“ http://share.renren.com/share/buttonshare.do?link=” + document.URL +“＆title = RusBlock”;

window.showModalDialog([URL]);

}

script>

head>

audio>

audio>

< div id =“ Button-Area”>

RusBlock h1>

开始 button>

结束 button>

简单 option>

普通 option>

硬 option>

select>

form>

分享到人人 button>

div>

canvas>

得分 h2>

0 p>

div>

div>

body>

html>

第二步：

样式RosBlock.css

复制代码

代码如下：

身体{

background-color：gray;

text-align：center;

font-family：'Times New Roman';

background-image：url(“”);

}

h1＃Game-Name {

background-color：white;

宽度：100％;

font-size：x-large;

}

h2，＃Game-Score {

font-size：x-large;

背景颜色：白色；

}

＃Game-Area {

位置：绝对；

左：10％;

宽度：80％;

高度：99％;

}

canvas＃Game-Canvas {

background-color：white;

宽度：80％;

高度：98％;

向左飘浮;

}

＃Button-Area，＃Score-Area {

width：10％;

高度：100％;

向左飘浮;

}

＃Button-Game-Start，＃Button-Game-End，＃Button-Game-Share，＃Select-Game-Level {

width：100％;

高度：10％;

font-size：更大;

border-right-width：3px;

背景颜色：白色；

}

＃Select-Game-Level {

宽度：100％;

高度：100％;

font-size：x-large;

边框颜色：灰色；

}

第三步：

编写js代码RusBlock.js

Rusblock类包括的成员解析：

数据：

nCurrentComID：当前放置部件的ID

aState [21] [25]：存储游戏区域状态的

当前Current：当前放置的部件

NextCom：下一部件

ptIndex：下落当前的部件相对游戏区域的索引

函数：

NewNextCom()：产生新的下一部件

NextComToCurrentCom()：将下一部件的数据转移到当前下落的部件上

CanDown()：判断当前部件是否还可以分解

CanNew()：判断是否还可以产生新的部件

Left()：当前部件向左移动

Right()：当前部件向右移动

Rotate()：当前部件顺时针旋转

Acceleratet()：当前部件向下加速

Disappear()：消去一行

CheckFail()：判断是否游戏失败

InvalidateRect()：刷新当前部件的区域