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():刷新当前部件的区域

你可能感兴趣的:(html俄罗斯方块是实现原理)