相信大家都玩过这个游戏, 这是我为了练习所学的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我
