html插缝小游戏,HTML5游戏 - 见缝插针
相信大家都玩过这个游戏, 这是我为了练习所学的Canvas而写的一个小游戏, 闲话少说, 下面进入整体.
首先说明一下文件夹中各个文件的作用:
index.html ==> 用来测试游戏源码的网页文件;
css/index.css ==> 测试游戏源码的网页样式文件;
js/index.js ==> 测试游戏源码的js文件
js/JicemoonMobileTouch.js ==> 一个简单的touch兼容库(我自己写的, 有在github分享)
js/HardestGame.js ==> 此文件为游戏主要部分, 内含注释
这里面我主要想说的是js/HardestGame.js这个文件
其实这里面都有详细的注释, 首先我想重点说的是extendClass(文件中29-37行)这个函数, 代码如下:
//判断是否已经定义此方法
if(!window["extendClass"]){
window["extendClass"] = function (sonClass, parentClass) {
//判断所传参数是否为函数对象
if (typeof parentClass === "function" && typeof sonClass === "function") {
//这一句是继承最主要的部分
sonClass.prototype = new ((function () {}).prototype = parentClass.prototype).constructor();
//重新定义子类对构造函数为其本身(因为经过上一句的赋值, 子类的构造函数变成了父类的构造函数)
sonClass.prototype.constructor = sonClass;
//用super属性记录父类, 以便在子类中引用
sonClass.prototype.super = parentClass;
}
}
};
如果大家想了解继承这一部分, 大家可以看一下这篇文章
基类Circle
基类Circle里主要定义了一些基本的属性和方法:
x/y: 圆形所在的位置;
radius: 圆形的半径;
fillStyle: 圆形的填充颜色(可以设置为css支持的颜色值, 如"#ff0000","rgba(240,235,222,0.4)"等, 或者渐变/图片填充, 这一部分请参考canvas - context的fillStyle属性);
strokeStyle: 圆形的描边颜色, 参考上述fillStyle属性;
update: 此方法是为了更新圆形的信息(就是上面的属性)而设置的;
paint: 更新后, 根据上述属性值, 将该对象(这里绘制的是一个圆)重新绘制到画布(即参数context所在的画布--canvas.getContext("2d"))上;
具体的自己看代码就可以了, 不明白的可以给我发邮件
中心大圆CircleCenter
这个是定义的在中心位置的那个大圆, 继承自上述的Circle, 因为这个圆是静止不动的, 并没有做其他的扩充, 也不需要重写update, 这里可以看到在构造函数中, 利用super属性调用了父类的构造函数, 代码如下
this.super.call(this, ROTATION_CENTER.x,ROTATION_CENTER.y,RADIUS_BIG,fillStyle, strokeStyle);
从上述代码可以看出, 只是用开始时定义的变量(静态)固定了位置/大小等属性
跟随旋转的小圆CircleRotation
这个类也是继承自Circle, 但是做了一些扩展, 扩展的属性和方法:
angle: 此小圆当前所在的角度(弧度为单位)
resetPosition: 根据当前的角度(angle), 重新计算此小圆的位置;
另外重写了update和paint, update就不必说了, paint并不是完全重写, 只是添加了一部分代码, 其作用是绘制此小圆到中心大圆的一条直线(就是"见缝插针"里的"针")
用来发射的小圆CircleBullet
即代码注释中所说的子弹, 这个类也继承自Circle, 此类没有做扩展, 只是重写了两个方法, 重写update, 为了实现向上运动的效果; 另外一个paint, 因为子弹上面有子弹编号的文字, 所以在此方法中添加了文字绘制的部分;
剩下的代码是游戏控制部分, 也就是Game类
游戏控制类Game
构造函数就不多说了, 自己看注释, 很详细了
主要详细说一下可能用到的属性和方法(注释中没有提到的)
centerCircle: 中心位置的圆形, 一个CircleCenter类的对象, 此属性是只读, 外部可以在init初始化后调用修改它的一些属性(位置/颜色等);
rotationCircles: 当前(关卡)跟随旋转的小圆数组, 一个CircleRotation类的对象数组;
bulletCircles: 当前(关卡)未发射的子弹(小圆), 一个CircleBullet类的对象数组;
rotationSpeed: 当前(关卡)大圆旋转的速度;
mobileTouch: JicemoonMobileTouch对象, 用来控制触摸或者鼠标事件的对象;
levelSpaceTime: 关卡之间停留的秒数, 也就是本关卡结束到下一关卡开始之间的时间间隔(在没有设置levelSuccessHandle参数时有效);
init: 初始化游戏;
gameStart: 游戏开始;
gamePause: 暂停游戏;
gameContinue: 游戏暂停后继续, 参数表示是否重新开始本关卡;
gameOver: 游戏结束;
update: 更新游戏内所有对象的位置等信息;
paint: 将游戏内所有对象会知道画布上;
levelChange: 改变关卡, 此方法是在切换关卡是用来重置下一关卡或者本关卡(重玩本关卡时)的数据;
checkCollision: 判断游戏是否成功过关;
tapHandle: 鼠标或触摸后出发的事件监听(在isCanTap为true时, 发射子弹);
levelSuccessHandle: 成功过关后调用的对外接口;
gameOverHandle: 游戏结束后调用的对外接口;
介绍就到这里了, 有什么问题可以Email我
html插缝小游戏,HTML5游戏 - 见缝插针相关推荐
- 救救小姐姐html5游戏在线玩,救救小姐姐安卓版
救救小姐姐安卓版带来奇葩脑洞解谜,可怜的小姐姐在游戏里就没有休息过,周一被僵尸狂潮追.周二被发配到海岛要求求生.周三在户外遇到野人拦路.周四团建密室大逃脱.周五.周六.周日也有很多惊险又奇葩的游戏剧情 ...
- html5坦克大战游戏,HTML5游戏《坦克大战》完整源码
[实例简介] HTML5游戏<坦克大战>完整源码 请不要商用,仅限学习使用 [实例截图] [核心代码] HTML5<坦克大战>完整源码 └── HTML5<坦克大战> ...
- 盛趣游戏 html5游戏,盛趣游戏谭雁峰:游戏破局的“精细”时代已来
"游戏的精细化时代已经全面到来,精细化也一定是取胜未来的关键".7月2日,在上海世博洲际酒店举行的CCG EXPO 2019游戏论坛上,盛趣游戏副总裁谭雁峰发表了"游戏破 ...
- 救救小姐姐html5游戏在线玩,救救小姐姐最新版
救救小姐姐最新版是一款有趣的休闲解谜游戏,在游戏中你需要通过帮助小女孩解决各个场景出现的问题和障碍物,多种不同的道具等待你的选择和参与,帮助小姐姐顺利的从这个地方逃离出去,完成任务目标挑战. 游戏特色 ...
- HTML5版切水果游戏 HTML5游戏极品源码下载
这是一款由百度JS小组提供的HTML5版切水果游戏,记得切水果游戏当年非常火,今天我找到了一款基于HTML5实现的网页版切水果游戏.虽然和原版的切水果游戏相比功能不怎么完善,但是该HTML5切水果游戏 ...
- html5黄游戏,HTML5游戏-看你有多色
需引入easeljs-0.7.1.min.js html: 倒计时:60s 分数:0Rect.js,在html中需要引入: function Rect(n,color){//个数 createjs.S ...
- html5 游戏 动画设计,11款效果惊艳的HTML5动画应用
11款效果惊艳的HTML5动画应用 来源:极客头条 HTML5真的很棒,我们这个网站也每天在为大家分享很多炫酷而实用的HTML5和CSS3应用.今天要分享的有很多效果惊艳而且好玩的HTML5动画应用, ...
- 【Canvas】HTML5游戏开发的基本流程+P2.js物理引擎实战开发
<HTML5游戏开发的基本流程> * 1. HTML5的简述 * 2. HTML5游戏开发所需的环境与工具 * 2.1. 开发环境 * 2.1.1. 浏览器 * 2.1.2. 开发语言 * ...
- unity小游戏制作之见缝插针
unity小游戏制作之见缝插针 先看效果图这个游戏是一个入门的小游戏,主要技术就是圆盘的旋转,针跟随圆盘旋转以及分数累加等 游戏先拖入一个圆,更改格式为2D然后建立脚本使其转动 public clas ...
最新文章
- 可以发张图片做链接用吗
- Android8.0适配那点事(二)
- 3 MapReduce计算模型
- mysql install安装报错_mysql安装报错
- Delphi实现点击按钮触发选择项, 进而实现不同的分支功能
- 克隆网站工具_4 种开源云安全工具
- 华为交换机stp原理透析及实战
- Windows 10 安装SVN 不显示状态图标--解决方法
- 将图的广度优先遍历在邻接矩阵和邻接表存储结构上分别实现_《青岛大学-王卓-数据结构》B站学习...
- linux项目实验ppt下载,实验一Linux系统的使用.ppt
- spyder python下载_spyder下载
- 【Python】socket编程——使用TCP协议实现智能聊天机器人
- 主动降噪(ANC),让你静心聆听声音
- 2013我爱逻辑题(2)
- 计算机科学与技术陈梦如,淮南师范学院马克思主义学院文件.doc
- linux下home目录迁移
- Android系统定制开机logo和开机动画
- css中div的意思是什么
- Allegro等长走线设计遇到的一些问题
- 驾考科目二倒车入库技巧图解