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

2020-03-24 17:51:43

字体：大中小

来源：转载

供稿：网友

本游戏实现的基本原理:

游戏区域是限定大小的区域，本游戏的游戏区域有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 rdquo;GameStart() Start /button
button id= Button-Game-End rdquo;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 rdquo;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
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：浅谈three.js中的needsUpdate的应用

下一篇：突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述