php开发俄罗斯方块,HTML5+JS实现俄罗斯方块原理及具体步骤_html5教程技巧
本游戏实现的基本原理:游戏区域是限定大小的区域,本游戏的游戏区域有21×25个矩形,每个矩形width为10单位,heght为6个单位(canvas 的绝对单位是固定的,非像素)。
创建RusBlock类包含相应的数据和行为,创建二维数组aState[21][25]记录游戏区域中被标记的矩形。
俄罗斯方块有7个部件,每个部件所占的矩形的个数和位置不同,所以建立部件类,然后建立数组储存7个部件,每个部件包涵数组储存该部件所占的矩形的个数和位置。当下落的部件到底了,就会产生一个新的部件,就部件的被标记的矩形就会赋值给游戏区域的数组。
在游戏循环函数中,打印正在下落的部件,和已经固定好的部件,还有下一下落的部件。
基本知识:
HTML5 CSS JS
本游戏包括三个文件:
RusBlock.html:设定元素
RusBlock.css:设定样式
RusBlock.js:脚本控制
第一步:界面的设置和素材的准备
RusBlock.html
复制代码代码如下:
RusBlock
RusBlock
Start
End
Easy
Normal
Hard
分享到人人
Score
0
第二步:样式
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
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php开发俄罗斯方块,HTML5+JS实现俄罗斯方块原理及具体步骤_html5教程技巧相关推荐
- html5的音乐标签使用,html5 音乐播放器 audio 标签使用概述_html5教程技巧
复制代码代码如下: 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 标签属性:src:视频的URLposter:视 ...
- php 实现贪吃蛇游戏,HTML5 贪吃蛇游戏实现思路及源代码_html5教程技巧
游戏操作说明 通过方向键控制贪吃蛇上下左右移动.贪吃蛇吃到食物之后会变长一个长度. 游戏具体实现 游戏难点是怎么模拟贪吃蛇的移动.如果只是一个方块的话显然很简单.但是当蛇的长度变长之后要怎么样控制 每 ...
- html5模仿手机音乐播放器,仿酷狗html5手机音乐播放器主要部分代码_html5教程技巧...
HTML5作品,经测试,效果确定不错,遗憾的是只支持谷歌和苹果等以webkit核心的浏览器,网友体验的时候请使用谷歌等浏览器来运行,不然的话无法看到效果,不说了,看效果吧 代码如下: 主要部分代码如下 ...
- js跨域解决方案php,详解js跨域原理以及2种解决方案_javascript技巧
1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本 ...
- html5在线俄罗斯方块,HTML5最新经典俄罗斯方块游戏插件
这是一款最新的经典 HTML5 俄罗斯方块游戏插件.该插件使用html5和Blockrain.js来制作,它具有使用简单.响应式.可定制.速度快.有积分记录和自动游戏的特点. 基本使用方法 可以使用任 ...
- 百叶窗设计原理 html5,Html5百叶窗效果的示例代码_html5教程技巧
本篇文章主要介绍了Html5百叶窗效果的示例代码,小编觉得挺不错的,现在分享给大家HTML5源码和解释,也给大家做个参考.对HTML5感兴趣的小伙伴可以一起跟随小编过来看看吧 本文介绍了Html5百叶 ...
- im即时通讯开发:进程被杀底层原理、APP应对被杀技巧
本文的技术原理讲解透彻.系统源码分享到位.样例代码也很有参考意义,希望能对有同样兴趣爱好的Android开发者.IM开发者.推送系统开发者等,带来对于Android进程保活技术的深入理解. 一直以来, ...
- html5 js 修改css样式,JavaScript修改css样式style_javascript技巧_脚本之家
一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N&quo ...
- html制作状态栏数字时钟,用HTML5制作数字时钟的教程_html5教程技巧
就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看到这个案例,他觉得很酷炫,就跑过来问我,这个是怎么实现的,然后我大概想了一下实现方法后也来了点兴趣,就花了一点时间模仿做出 ...
最新文章
- 【Android】Fragment官方中文文档
- Python 原生爬虫
- Arrays.deepToString() 方法同时适用于基元数组和对象数组
- 二、配置数据源、SessionFactory、domain对象
- 第23章:MongoDB-聚合操作--聚合命令
- 七牛云 转码_开发者选择短视频SDK,为何青睐七牛云?
- HDU2189 来生一起走【完全背包】
- Navicat 解决方案之ORA-28547
- angularjs ngrepeat filter
- python输出被五整除的数_python中给定一系列正整数能被5整除的数字中所有偶数的和?...
- 混响时间测试软件安卓版,混响时间的测量方法资料.pdf
- wps中的word删除空白页
- python中split什么意思_python中split的意思是什么(python中字符串的意思)
- Win10安装Neo4j
- 2014诺贝尔化学奖(了解学习)
- Programming Exercise5:Regularized Linera Regression and Bias v.s Variance
- 八叉树体素遍历近邻体素搜索
- 史上最牛、最适合自学的尚硅谷《全套Java视频教程》
- 关于电商运营的XMind思维导图
- 入门 redux 和 @connect 装饰器
热门文章
- 机器学习之使用sklearn构建据类模型,并且评价模型
- 【物联网】AT指令|AT返回错误|AT 指令 收发短信和GPRS上网 SIM508/548
- vue elementUI实现消息通知功能
- 多核cpu与多线程理解
- java 执行Linux命令并打印执行结果
- 计算机软件版权注册,计算机软件版权注册费是多少
- 人在旅途——》张家界之旅:20190420
- 明确生产计划,做好生产进度跟踪
- 医疗器械分销系统开发|分销商是怎么招募的?
- printf(fmt, ##__VA_ARGS__)