HTML5-见缝插针(Canvas)

相信大家都玩过这个游戏, 这是我为了练习所学的Canvas而写的一个小游戏, 闲话少说, 下面进入整体.

游戏源码下载

首先说明一下文件夹中各个文件的作用:

1. index.html ==> 用来测试游戏源码的网页文件;
2. css/index.css ==> 测试游戏源码的网页样式文件;
3. js/index.js ==> 测试游戏源码的js文件
4. js/JicemoonMobileTouch.js ==> 一个简单的touch兼容库(我自己写的, 有在github分享)
5. 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我