文档章节

HTML5实现消灭星星

axingqi
 axingqi
发布于 2017/06/30 20:56
字数 654
阅读 10
收藏 0

完整版代码下载地址:HTML5实现消灭星星

消灭星星游戏制作思路:

(1)本游戏基于canvas画布实现。从界面看,消灭星星由10X10的星星方块组成,因而我们要定义一个二维数组来存储它。

(2)消灭星星的方块有红黄蓝绿紫五种,可以用一个随机数随机生成0到4这五个数字分别赋给数组;根据数组元素不同的值绘制不同颜色的星星方块。

(3)界面做出来后就是互动方面了,通过js的鼠标点击事件获取点击位置的x,y坐标,因为是网页版的,所以采用js获取的坐标跟实际坐标有所出入。实际坐标应等于获取坐标减去画布左距,上距。由坐标计算出对应的星星方块,即所对应的数组元素。(以下称为点击元素

(4)找出点击的星星方块周围相邻的同样图案的方块,再以该方块为中心继续找。直到没有相邻的同样方块为止。即在数组上找出相邻的同样的值的元素,举个例子:如果点击元素是(x,y),那么依次判断(x-1,y),(x+1,y),(x,y-1),(x,y+1)这四个元素是否相等。如果(x-1,y)(x,y)相等,则以(x-1,y)为中心再找。

(5)将上一步得到的所有相邻相同图案的方块清空,即在数组上,将相邻相同元素赋为9。(这里可取任何值,只要与前面的0~4这四个值区分即可)

(6)计算得分,得分等于清空的方块数的平方再乘以5,更新分数。

(7)判断方块是否能向下移动,如果有某个方块的下方是空的,那么向下移动方块,直到不能移动为止。

(8)判断方块是否能向左边移动,如果某列方块的左边那一列全为空,则该列方块向左边移动。

(9)判断游戏是否结束,如果界面上剩下的方块中,没有相邻两个以上的方块,则游戏结束。计算奖励分,奖励分等于2000-所剩方块数的平方乘以20;当剩余方块数大于10时,奖励分为0。关卡数自加1,重新初始化数组,开始下一轮。

(10)游戏开发完成界面:

                                                                 

完整版代码下载地址:HTML5实现消灭星星

© 著作权归作者所有

共有 人打赏支持
axingqi
粉丝 0
博文 21
码字总数 9949
作品 0
茂名
私信 提问
cocos2d-x支持c++、js、lua开发

作者:左文 链接:https://www.zhihu.com/question/21130385/answer/21789568 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 纯属个人观点 1 Unity3d支...

壹峰
2017/10/18
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
HTML5-localStorage、sessionStorage用法总结

localStorage和sessionStorage功能 localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只...

iNiL0119
2015/03/21
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
HTML5从入门到精通,零基础学员必看

学习html5从入门到精通,零基础新手也能看懂,无论你是唱歌,画画的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些? 1. HTML5可以同时在多种...

课工场CC老师
2017/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

短视频App开发:短视频爆发式增长

短视频领域依旧热闹非凡,众多巨头纷纷布局短视频领域,推动市场格局的新变化。迹象显示,行业企业正纷纷瞄准AI(人工智能)及5G契机进行布局,力图获得下一步发展优势。 短视频市场火爆 竞争...

ThinkSNS账号
8分钟前
0
0
图形用户界面和交互输入方法---交互式构图技术

基本的定位方法 拖拽 约束 网格 橡皮条方法

中国龙-扬科
16分钟前
0
0
Win10:键盘任一键实现了 “一键开机”

微软自 Windows 10 系统起,默认自己的系统都开始支持“快速开启”。实质上就是“快速开机”的功能。 此功能的特点是:对于装载了 Windows 10 的电脑,开机时,只需要轻轻按一下键盘上的任意...

LivingInFHL
32分钟前
0
0
vue-router的HTML5 History 模式设置

VUE是当下最火爆的前端框架之一,vue-router是vue项目中几乎都会用到的组件,然而体验一时爽,其实坑不少。本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题,并给出解决方...

peakedness丶
37分钟前
1
0
Dubbo 源码分析 - 服务引用

1. 简介 在上一篇文章中,我详细的分析了服务导出的原理。本篇文章我们趁热打铁,继续分析服务引用的原理。在 Dubbo 中,我们可以通过两种方式引用远程服务。第一种是使用服务直联的方式引用...

小刀爱编程
46分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部