HTML5+JS實(shí)現(xiàn)俄羅斯方塊原理及具體步驟

2020-03-24 17:51:43

字體：大中小

供稿：網(wǎng)友

本游戲實(shí)現(xiàn)的基本原理:

游戲區(qū)域是限定大小的區(qū)域，本游戲的游戲區(qū)域有21 25個(gè)矩形,每個(gè)矩形width為10單位，heght為6個(gè)單位(canvas 的絕對(duì)單位是固定的，非像素)。

創(chuàng)建RusBlock類包含相應(yīng)的數(shù)據(jù)和行為，創(chuàng)建二維數(shù)組aState[21][25]記錄游戲區(qū)域中被標(biāo)記的矩形。

俄羅斯方塊有7個(gè)部件，每個(gè)部件所占的矩形的個(gè)數(shù)和位置不同，所以建立部件類，然后建立數(shù)組儲(chǔ)存7個(gè)部件，每個(gè)部件包涵數(shù)組儲(chǔ)存該部件所占的矩形的個(gè)數(shù)和位置。當(dāng)下落的部件到底了，就會(huì)產(chǎn)生一個(gè)新的部件，就部件的被標(biāo)記的矩形就會(huì)賦值給游戲區(qū)域的數(shù)組。

在游戲循環(huán)函數(shù)中，打印正在下落的部件，和已經(jīng)固定好的部件，還有下一下落的部件。基本知識(shí): HTML5 CSS JS
本游戲包括三個(gè)文件:

RusBlock.html:設(shè)定元素
RusBlock.css:設(shè)定樣式
RusBlock.js:腳本控制

第一步:界面的設(shè)置和素材的準(zhǔn)備

RusBlock.html

復(fù)制代碼代碼如下:
!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

復(fù)制代碼代碼如下:
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類包括的成員解析:

數(shù)據(jù):

nCurrentComID:當(dāng)前下落部件的ID

aState[21][25]:存儲(chǔ)游戲區(qū)域狀態(tài)的數(shù)組

CurrentCom：當(dāng)前下落的部件

NextCom：下一部件

ptIndex：當(dāng)前下落的部件相對(duì)游戲區(qū)域的索引

函數(shù):

NewNextCom()：產(chǎn)生新的下一部件

NextComToCurrentCom():將下一部件的數(shù)據(jù)轉(zhuǎn)移到當(dāng)前下落的部件上

CanDown():判斷當(dāng)前部件是否還可以下落

CanNew():判斷是否還可以產(chǎn)生新的部件

Left():當(dāng)前部件向左移動(dòng)

Right():當(dāng)前部件向右移動(dòng)

Rotate():當(dāng)前部件順時(shí)針旋轉(zhuǎn)

Acceleratet():當(dāng)前部件向下加速

Disappear():消去一行

CheckFail():判斷是否游戲失敗

InvalidateRect():刷新當(dāng)前部件的區(qū)域

完成:下載Demo
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：淺談three.js中的needsUpdate的應(yīng)用

下一篇：突襲HTML5之Javascript API擴(kuò)展1—Web Worker異步執(zhí)行及相關(guān)概述