title: CocosCreator进阶实战第三部分:面向对象
date: 2019-12-24 12:00:00
摘要
面向对象是一种对现实世界的理解和抽象、是把属性和方法组织为一个对象来看待的思维、是作为程序员必然要掌握的一种方法!
正文
版本说明
使用 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~~
源码地址