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背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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可逆加密解密算法实例代码
2014/01/21 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
基于python3的socket聊天编程
2020/02/17 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
关于打架的检讨书
2014/01/17 职场文书
党员党性分析材料
2014/02/17 职场文书
关于安全演讲稿
2014/05/09 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
政协工作总结2015
2015/05/20 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
公历12个月名称的由来
2022/04/12 杂记