文档章节

HTML5实现消灭星星

axingqi
 axingqi
发布于 2017/06/30 20:56
字数 654
阅读 16
收藏 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
茂名
私信 提问
加载中
请先登录后再评论。
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
4.1K
3
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
Promises/A 和 when() 实现--When.js

When.js 是 cujojs 的轻量级的 Promises/A 和 when() 实现,从 wire.js 的异步核心和 cujojs 的 IOC 容器派生而来。包含很多其他有用的 Promiss 相关概念,例如联合多个 promiss、mapping 和...

匿名
2013/02/15
7.4K
0
Redis 分片实现--Redis Shard

redis-shard 是 Redis 分区的 Python API ,基于对 key 和 key tag 进行 CRC32 checksum 计算,可参考文章 http://antirez.com/post/redis-presharding.html . 该项目由知乎网开发。 使用限制...

匿名
2012/10/24
5.6K
0
iOS 的 Canvas 和 Audio 实现--Ejecta

Ejecta 是一个快速开源的 JavaScript、Canvas 和 音频实现,适用于 iOS 平台。你可以把它想象成一个只支持显示 Canvas 元素的浏览器,它像一个浏览器却无需浏览器,适用于游戏和动画开发。无...

匿名
2012/10/26
4.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库高频面试点,事务/乐观锁/悲观锁/CAS/MySQL存储引擎

事务的ACID特性是什么? 原子性: 事务是最小的执行单位,不允许分割。事务的原子性确保动作要么全部完成,要么完全不起作用; 一致性: 执行事务前后,数据保持一致,多个事务对同一个数据读...

osc_45536bvu
56分钟前
16
0
大数据BI软件助力企业数字化转型

当下,「新基建」势头正盛,随着“新基建”成为热议话题,数字化也随之成为企业面临的新机遇和新挑战。新基建的核心就是数据,数据是数字经济和企业数字化转型的生产要素和发展动力。 再看看...

osc_0boqdoe2
57分钟前
7
0
凯旋创投来志刚:基因治疗新时代,大戏刚刚开始

  2017 年,全球第一个基因治疗方法 CAR-T 细胞药物 Kymriah 获得 FDA 上市批准,从此掀起了基因治疗的热潮。随着相关技术和政策的不断成熟,基因治疗市场也随之扩大。根据德勤发布的《引领...

osc_k3vwonkw
58分钟前
10
0
LightningChart.NET使用两个BarSeries创建简单的2D图表

本教程介绍了如何使用两个BarSeries创建简单的2D图表。 BarSeries将数据值表示为矩形条,并且可以用于以非常清晰的方式可视化数据之间的差异和方差。 在本教程中,BarSeries用于表示两年期间...

roffey
59分钟前
0
0
Mybatis trim 标签的 2 个妙用!

云栖号资讯:【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! mybatis的trim标签一般用于去除sql语句中多余的and关键字,逗号,或者给sql语句前拼...

osc_x03qsedc
59分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部