cocos creator 2.4.11 -- 飞机大战练习

背景

• 背景图大小为 （480, 852）
• 将canvas的大小设置为（480,800），中心点的位置设置为（240, 400）
• 创建一个空节点bg，里面包含两张背景图, 空节点的位置为(240, 410)
  • 一张位置为(0, 0)
  • 一张位置为(0, 852)
  • 两张背景图循环展示
• 在 Scripts文件夹下创建BgControl.ts，将这个脚本文件挂载在空节点bg上

// BgControl.ts
update (dt) {
  // 遍历子物体（2个背景）
  for (const bgNode of this.node.children) {
    // 移动，*dt 是让单位从帧 -> 秒
    bgNode.y -= 50 * dt
    if(bgNode.y < -852){
      bgNode.y += 852 * 2
    }
  }
}

玩家

• 拖拽玩家的图片创建玩家节点player
• 在 Scripts文件夹下创建PlayerControl.ts，将这个脚本文件挂载在玩家节点player上

// PlayerControl.ts
const { ccclass, property } = cc._decorator;
@ccclass
export default class PlayerControl extends cc.Component {
  @property(cc.Prefab)
  bulletPre: cc.Prefab = null
  start() {
    // 移动
    this.node.on(cc.Node.EventType.TOUCH_MOVE, (event) => {
      this.node.setPosition(event.getLocation())
    })

    // 攻击 计时器
    this.schedule(() => {
      // 创建子弹
      let bullet = cc.instantiate(this.bulletPre)
      bullet.setParent(cc.director.getScene())

      // 设置子弹位置
      bullet.x = this.node.x
      bullet.y = this.node.y + 60
    }, 0.5)
    
    // 开启碰撞
    cc.director.getCollisionManager().enabled = true
  }

  // update (dt) {}
}

子弹

• 拖拽子弹图片创建子弹节点bullet
• 子弹碰到敌人，自己和敌人都销毁
• 子弹出了屏幕，自动销毁
• 在 Scripts文件夹下创建BulletControl.ts，将这个脚本文件挂载在子弹节点bullet上

// BulletControl.ts
import EnemyControl from "./EnemyControl";

const { ccclass, property } = cc._decorator;

@ccclass
export default class BulletControl extends cc.Component {
  @property
  speed: number = 800

  start() {
  }

  update(dt) {
    // 移动
    this.node.y += this.speed * dt
    if (this.node.y > 820) {
      this.node.destroy()
    }
  }

  onCollisionEnter(other) {
    // 如果碰到敌人，让敌人死亡，销毁自己
    console.debug("peng")
    if (other.tag == 1) {
      // 销毁敌人
      other.getComponent(EnemyControl).die()
      // 销毁自己
      this.node.destroy()
    }
  }
}

敌人

• 拖拽敌人图片创建敌人节点enemy
• 敌人被子弹碰撞，销毁
• 敌人碰撞tag为1
• 在 Scripts文件夹下创建EnemyControl.ts，将这个脚本文件挂载在敌人节点enemy上

// EnemyControl.ts
const { ccclass, property } = cc._decorator;

@ccclass
export default class EnemyControl extends cc.Component {
  // 是否死亡
  isDie: boolean = false

  start() {
    // 开启碰撞
    // cc.director.getCollisionManager().enabled = true
  }

  update(dt) {
    // 移动
    if (!this.isDie) {
      this.node.y -= 300 * dt
    }

    if (this.node.y < -850) {
      this.node.destroy()
    }
  }

  // 死亡
  die() {
    this.isDie = true
    // 加载爆炸图片
    cc.loader.loadRes("enemy0_die", cc.SpriteFrame, (err, res) => {
      this.node.getComponent(cc.Sprite).spriteFrame = res
    })
    // 300 ms后销毁
    setTimeout(() => {
      this.node.destroy()
    }, 300);
  }
}

敌人管理

• 创建一个空节点为EnemyManager
• 将enemy作为预设体
• 在 Scripts文件夹下创建EnemyManager.ts，将这个脚本文件挂载在EnemyManager上

// EnemyManager.ts
const { ccclass, property } = cc._decorator;

@ccclass
export default class EnemyManager extends cc.Component {

  @property(cc.Prefab)
  enemyPre: cc.Prefab = null;

  // onLoad () {}

  start() {
    // 每隔2s，创建一个敌人
    this.schedule(() => {
      console.debug(222)
      let enemy = cc.instantiate(this.enemyPre)
      enemy.setParent(cc.director.getScene())
      enemy.y = this.node.y
      enemy.x = Math.random() * 400 + 20
    }, 2)
  }

  // update (dt) {}
}