phaser3之飛機大戰（二）

接上篇phaser3之飛機大戰（一） 本篇包含遊戲場景的部分邏輯，包括飛機拖拽，邊界檢測，發射子彈，敵機碰撞檢測。

寫在前面

該飛機大戰素材來源於phaser小站:
www.phaser-china.com/tutorial-de…
原文使用phaser2進行實現，本文用phaser3將飛機大戰重構一遍，在實戰中學習一下phaser3的api
源碼：github.com/YUPENG12138…

一、添加遊戲場景，設置背景板滾動

1.首先要新增一個play場景；
2.在點擊開始按鈕的時候切換場景；
3.添加飛機及背景，設置背景循環滾動，視覺上產生飛機向前飛行的感受。

// plane/src/index.js 
...
// 在start場景中，startbutton擡起的時候設置跳到遊戲場景
startButton.on('pointerup', () => {
  startButton.setFrame(1);
  console.log('start game');
  this.scene.start('play');
})

...

// 新增play場景
gameSenceCenter.play = {
  key: 'play',
  create() {

    // 添加背景
    this.bg = this.add.tileSprite(0, 0, this.game.config.width, this.game.config.height, 'bg').setOrigin(0);
    // 引入飛機精靈
    const plane = this.add.sprite(this.game.config.width / 2, 100, 'myplane');

    // 建立飛行幀動畫
    this.anims.create({
      key: 'fly',
      frames: this.anims.generateFrameNumbers('myplane', { start: 0, end: 3 }),
      frameRate: 10,
      repeat: -1
    })
    // 飛機調用飛行動畫
    plane.anims.play('fly');
  },
  update() {
    // 設置垂直滾動
    // api連接： https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.TileSprite.html
    this.bg.tilePositionY -= 1;
  },
}
...
const config = {
  type: Phaser.AUTO,
  width: 240,
  height: 400,
  // 將新增的play場景加進來
  scene: [gameSenceCenter.boot, gameSenceCenter.start, gameSenceCenter.play],
};

複製代碼

二、添加飛機移動到底部

如今飛機在頂部飛行，咱們須要在遊戲開始後讓它自動飛行到底部。

// plane/src/index.js

// 飛機調用飛行動畫
plane.anims.play('fly');

// 新增補間動效
// api: https://photonstorm.github.io/phaser3-docs/Phaser.Tweens.TweenManager.html#add__anchor
this.tweens.add({
  targets: plane,
  y: this.game.config.height - plane.height,
  duration: 1000,
});
複製代碼

三、設置飛機拖拽，發射子彈計分文案

1.在飛機自動飛行飛行到底部時，咱們設置飛機可拖拽； 2.進入play場景後，飛機開始發射子彈，左上角添加計分文案；

// 添加計分文本
this.add.text(0, 0, 'Score: 0', {color: '#ff0000', fontSize: '16px'});.

// 爲了保證plane實例可在create,update生命週期中都訪問獲得，咱們將plane實例掛到this中；
// 這裏用到了`setInteractive`方法，是用來設置精靈可輸入配置
// api連接: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Sprite.html#setInteractive__anchor
// draggable: true 表示可拖拽
this.plane = this.add.sprite(this.game.config.width / 2, 100, 'myplane').setInteractive({ draggable: true });
...

// 在飛機的補間動效完成的回調裏，咱們設置飛機跟隨鼠標位置進行移動
this.tweens.add({
  ...
  onComplete: () => {
    this.plane.on('drag', function(pointer, dragX, dragY) {
      this.x = dragX;
      this.y = dragY;
    });
  },
});

// 這裏咱們記錄一個初始的時間，用來存每一個子彈的生成時間
this.beforeTime = 0;

...
// 在update生命週期中，咱們建立子彈
// 這裏咱們用到了物理引擎，用來處理子彈的移動，因此咱們須要在總的配置中添加上物理引擎的配置
update() {
    const time = new Date().getTime();
    // 引入子彈
    if (time - this.beforeTime > 500) {
      const bullet = this.add.sprite(this.plane.x, this.plane.y - this.plane.height / 2, 'mybullet');
      this.beforeTime = time;
      
      // 給子彈添加物理引擎
      // api連接： https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Factory.html#existing__anchor
      this.physics.add.existing(bullet);
      
      // 在將精靈添加到物理引擎後，它就被賦予一個body對象
      // setVelocity設置子彈的移動速度
      // api連接： https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html#setVelocity__anchor
      bullet.body.setVelocity(0, -300);
    }
    this.bg.tilePositionY -= 1;
},

const config = {
  type: Phaser.AUTO,
  width: 240,
  height: 400,
  scene: [gameSenceCenter.boot, gameSenceCenter.start, gameSenceCenter.play],
  physics: {
    default: 'arcade',
  }
};
複製代碼

四、飛機拖拽邊界檢測

咱們發現上面雖然能夠拖拽了，可是飛機會拖拽出咱們的畫面，這裏咱們處理一下。

// 這裏咱們只要給飛機添加物理引擎，而後設置一下它和世界碰撞檢測就行了
// 在onComplete回調裏作處理
// setCollideWorldBounds用來設置與世界邊界碰撞檢測
// api連接： https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html#setCollideWorldBounds__anchor
 onComplete: () => {
    ...
    this.physics.add.existing(this.plane);
    this.plane.body.setCollideWorldBounds(true);
}
複製代碼

五、添加子彈組，建立敵機 檢測子彈與敵機碰撞

咱們建立一個子彈組，將全部的子彈都添加到這個組裏，用組來和敵機進行碰撞檢測，統一處理。

// 在craete生命週期中，咱們建立子彈組和一個敵機，並設置它們進行碰撞檢測
// 建立一個子彈組
// api連接： https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObjectFactory.html#group__anchor
this.bullets = this.add.group();

// 建立一個敵機
this.enemySmall = this.add.sprite(30, 30, 'enemy1');
this.physics.add.existing(this.enemySmall);
// 設置默認時間爲0
this.beforeTime = 0;

// overlap碰撞檢測方法
// api連接： https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Factory.html#overlap__anchor
this.physics.add.overlap(this.bullets, this.enemySmall, function (bullet, enemy) {
  bullet.destroy();
  enemy.destroy();
}, null, this);

...
// 在update生命週期中，咱們將建立的子彈添加到子彈組中
// api連接： https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Group.html#add__anchor
this.bullets.add(bullet);
複製代碼

本期就到這裏了，下期會處理子彈的性能優化，製做敵機生成邏輯