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 Media Queries详细介绍和使用实例
May 08 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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
wordpress之wp-settings.php
2007/08/17 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
Python打包方法Pyinstaller的使用
2018/10/09 Python
python实现公司年会抽奖程序
2019/01/22 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
失业者真诚求职信范文
2013/12/25 职场文书
学习雷锋标语
2014/06/25 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
保卫工作个人总结
2015/03/03 职场文书
2015国庆节宣传语
2015/07/14 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang