CocosCreator进阶实战第三部分：面向对象

摘要

面向对象是一种对现实世界的理解和抽象、是把属性和方法组织为一个对象来看待的思维、是作为程序员必然要掌握的一种方法！

正文

版本说明

使用 CocosCreator 的 2.1.3 版本开发。 建议先下载完整项目工程，搭配文章“食用”！源码链接在文章最下方。

对象分析

子弹分为很多种类，我们应该思考其共有的一些特征。很显然，运动的子弹必然会有运动方向和运动速度，而区分它们的种类要靠命名或标志。

上图的描述很清晰，子弹最基础的东西我们应该将其抽象出来。下面用 UML 类图描述四种子弹与子弹基类的关系。

四个基本属性

移动方向：(get/set)
注意如果不分开赋值 x 与 y，传递的是引用。

_moveDir: cc.Vec2 = new cc.Vec2(0, 0)
get moveDir (): cc.Vec2 {
    return this._moveDir
}
set moveDir (dir: cc.Vec2) {
    this._moveDir.x = dir.x
    this._moveDir.y = dir.y
}

移动速度：(get/set)
这里进行了负数检测。

_moveSpeed: number = 0
get moveSpeed (): number {
    return this._moveSpeed
}
set moveSpeed (speed: number) {
    if (speed < 0) { return }
    this._moveSpeed = speed
}

子弹类型标签：

private tag: BulletType | undefined = undefined

子弹工厂：

private bulletFactory: BulletFactory | undefined = undefined

四个基本方法

从节点池取出时初始化属性：（节点池的 get()方法可带参数，传递至 reuse()方法）

reuse (bulletFactory: BulletFactory, dir: cc.Vec2, speed: number, tag: BulletType): void {
    this.bulletFactory = bulletFactory
    this.moveSpeed = speed
    this.tag = tag
    this.moveDir = dir
}

回收时触发：(节点池 put()方法)

unuse (): void {}

碰撞发生时触发：（注意分组）

onCollisionEnter (other: cc.Collider, self: cc.Collider): void {}

生命周期 update：（利用 x 与 y 进行位移）

update (dt: number): void {
    if (this.moveSpeed === 0) { return }
    if (this.moveDir.x !== 0) {
        this.node.x += this.moveDir.x * this.moveSpeed * dt
    }
    if (this.moveDir.y !== 0) {
        this.node.y += this.moveDir.y * this.moveSpeed * dt
    }
    /** 边界回收 */
    if (Math.abs(this.node.x) > 360 || Math.abs(this.node.y) > 640) {
        this.bulletFactory.bulletPools[this.tag].put(this.node)
    }
}

继承基类

第一种第二种子弹没有特别动作，所以仅仅继承即可。
Bullet_0/Bullet_1

import { BulletBase } from "./bulletBase"
const {ccclass, property} = cc._decorator

@ccclass
export class Bullet_0 extends BulletBase {
}

第三种子弹实现了自旋转，所以在实现父类后再加以旋转 angle 逻辑即可。
Bullet_2

import { BulletBase } from "./bulletBase"
const {ccclass, property} = cc._decorator

@ccclass
export class Bullet_2 extends BulletBase {

    // 自旋转
    update (dt: number): void {
        super.update(dt)
        this.node.angle += 50 * dt
    }

}

第四种子弹实现了缩放特效，scaleDir 在 -1 与 1 间切换，让子弹不断的收缩。
Bullet_3

import { BulletBase } from "./bulletBase"
const {ccclass, property} = cc._decorator

@ccclass
export class Bullet_3 extends BulletBase {

    /** 收缩方向 */
    private scaleDir: number = 1

    // 收缩
    update (dt: number): void {
        super.update(dt)
        if (this.node.scaleX > 1.3) {
            this.scaleDir = -1
        } else if (this.node.scaleX < 1) {
            this.scaleDir = 1
        }
        this.node.scale += this.scaleDir * 5 * dt
    }

}

结语

文章第三部分是实现了子弹类的抽象，我们下一部分实现子弹工厂。

O(∩_∩)O~~

源码地址

https://github.com/KuoKuo666/Alive