文档章节

HTML5实现消灭星星

axingqi
 axingqi
发布于 2017/06/30 20:56
字数 654
阅读 9
收藏 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
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0
给网页设计师的30个HTML5学习资源

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

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Hadoop - 企业级大数据管理平台CDH(小技巧一)

附上: 喵了个咪的博客:w-blog.cn cloudera官网: https://www.cloudera.com/ 官方文档地址: https://www.cloudera.com/documentation/enterprise/latest.html 一 , 磁盘扩容磁盘迁移 对于磁盘...

喵了_个咪
35分钟前
1
0
手动安装android的sdk

手动安装android的sdk 用eclipse+sdk的方式开发app,使用android sdk manager无法下载新的sdk,可以手动下载安装。 查找sdk的地址 浏览器访问https://dl-ssl.google.com/android/repository/...

kyle960
35分钟前
1
0
call方法的模拟实现

call方法的模拟实现 初步思考 const person = { name:"小明" } function sayName() { console.log(this.name) } sayName.call(person) //result: 小明 上面的代码有两...

lsner
39分钟前
2
0
apache 报错 AH01089: search for temporary

程序上传文件一直失败。经过测试使用apache反向代理会失败,但是直接访问服务器则可以上传。 经过分析apache的错误日志发现如下提示: apache 报错 AH01089: search for temporary director...

硕硕和果果
44分钟前
2
0
java源码Integer.bitCount算法解析,分析原理

看了一道leetcode上面的题 461 ,Hamming Distance 计算两个整数有多少不同的位。其实很简单,取两个整数异或的值,然后计算出里面二进制有多少个1就行了。代码如下: public int hammi...

117
46分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部