文档章节

HTML5实现消灭星星

axingqi
 axingqi
发布于 2017/06/30 20:56
字数 654
阅读 11
收藏 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的到来将第五代网络语言带入了多媒体的世界。尽管HTML5的启动并没有多轰轰烈烈,但是在过去6个月还是有不少的软件开发者开始应用HTML5。然而,在选择HTML5时,有一些基本注意事项大家还...

红薯
2011/10/22
3K
7
8个经典的HTML5游戏在线试玩及源码学习

游戏,毫无疑问是拿来供大家娱乐玩耍的,这也无可厚非,但是,今天给大家分享的8个HTML5游戏,在好玩的同时,相信也会有不少HTML5开发者对其源代码感兴趣,一起来看看吧。 1、Project Blaze...

tp_wire
2012/08/29
48K
14
HTML5 And JS绘制流星雨

流星雨…… 熟悉HTML5的朋友们应该知道HTML5具有强大的绘图和渲染能力,HTML5配合js的使用比起svg等技术有过之而无不及,而且HTML5图形开发过程也比较简单。 绘制动态的图形算是动画了,当然...

晨曦之光
2012/03/16
790
2
HTML5大提速,Famo.us 消灭浏览器原罪

自从扎克伯格宣称“豪赌HTML5是Facebook犯下的最严重错误”后,HTML5被越来越多的移动开发者抛弃,Facebook和LinkedIn等公司也推迟了HTML5应用计划。但是最新的HTML5开发框架也许将掀起新一轮...

oschina
2014/04/14
13.3K
41

没有更多内容

加载失败,请刷新页面

加载更多

centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
今天
3
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
5
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部