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


Posted in HTML / CSS onNovember 29, 2013

本游戏实现的基本原理:

游戏区域是限定大小的区域,本游戏的游戏区域有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
HTML5+JS实现俄罗斯方块原理及具体步骤

HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
HTML5样式控制示例代码
Nov 27 #HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 #HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 #HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 #HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 #HTML / CSS
HTML5语音识别标签写法附图
Nov 18 #HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 #HTML / CSS
You might like
php定时计划任务的实现方法详解
2013/06/06 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
简单了解Django模板的使用
2017/12/20 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
财务经理岗位职责
2013/11/09 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
根叔历年演讲稿
2014/05/20 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
小组口号霸气押韵
2015/12/24 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python