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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 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
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
使用python实现接口的方法
2017/07/07 Python
Python中常见的异常总结
2018/02/20 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
网络安全方面的面试题
2016/01/07 面试题
机械加工与数控专业自荐书
2014/06/04 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
教师创先争优承诺书
2015/04/27 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers