php开发俄罗斯方块,HTML5+JS实现俄罗斯方块原理及具体步骤_html5教程技巧

本游戏实现的基本原理:游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。

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

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

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

基本知识:

HTML5 CSS JS

本游戏包括三个文件:

RusBlock.html:设定元素

RusBlock.css:设定样式

RusBlock.js:脚本控制

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

RusBlock.html

复制代码代码如下:

RusBlock

RusBlock

Start

End

Easy

Normal

Hard

分享到人人

Score

0

第二步:样式

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

本文原创发布php中文网，转载请注明出处，感谢您的尊重！