HTML5+JS实现俄罗斯方块原理及具体步骤
HTML5+JS实现俄罗斯方块原理及具体步骤
发布时间:2017-01-07 来源:查字典编辑
摘要:本游戏实现的基本原理:游戏区域是限定大小的区域,本游戏的游戏区域有21×25个矩形,每个矩形width为10单位,heght为6...

本游戏实现的基本原理:

游戏区域是限定大小的区域,本游戏的游戏区域有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” onclick=”GameStart()”>Start</button>

<button id=”Button-Game-End” onclick=”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 onclick=”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

1

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新HTML5教程学习
热门HTML5教程学习
网页设计子分类