Javascriptでゲームを作ってみよう⑰

Javascriptでゲームを作ってみよう⑰

GameEnd.tsの組み込み

いよいよゲーム制作も佳境。GameEnd.tsを組み込めば一通りの仕組みが完成する。

まずGameTable.tsのプライベートなメンバとして_gameendを定義し、constructorの中でインスタンス化、初期化はinitの中で行えばいいだろう。
表示は最終的な勝ち負け判定（3回勝った）をしているnextで行う。

  next(jude:boolean) {
    if (3 <= this._life.count() || !jude) {
      this._result.setup()
      this._gameend.show(jude)
      return
    }
    // 略
  }

nextで引数を取るように変更し、その結果を判定及び_gameendの表示内容に反映させている。
ところで判定を意味する「judge」を思いっきり間違えて「jude」と記述していたことに今更ながらに気がついた。まぁいいや。

nextで引数を取るようになるとそれを（間接的に）呼び出すResult.tsを修正する必要がある。

  show(jude:boolean) {
    let msg:PIXI.Text = jude ? this._win : this._lose
    gsap.to(msg, {pixi: {y: 240}, duration: 2.5,ease: "elastic.out(1, 0.3)",
      onComplete: () => {
        if (this.parent) this.parent.emit(Result.SHOWED, jude)
      }
    })
  }

emitの第二引数としてjudeをそのまま渡してやればOKだ。

再プレイ可能にする

今の段階では、_gameendが表示されたらリロードしなければ再プレイができない。
そこで再プレイが可能になるよう、修正を加える。
まずGameEndに、表示の処理が終わったことをGameTableに伝えるようemitを追加する。

  clear() {
    // 略
    if (1.5 < this._scale) {
      // 略
      if (this.parent) this.parent.emit(GameEnd.GAME_END)
    }
  }
  fail() {
    // 略
    if (1 <= this._fail.alpha) {
      this._alpha *= -1
    } else if (this._fail.alpha <= 0) {
      // 略
      if (this.parent) this.parent.emit(GameEnd.GAME_END)
    }
  }

今度は、GameTableにGameEnd.GAME_ENDを受け取るための処理を追加する。
まずconstructerに以下を追加。

this.on(GameEnd.GAME_END, this.restart)

そしてrestartメソッドを追加する。

  restart() {
    this._pad.interactive = true
    this._pad.once('pointerdown', e => {
      this._pad.interactive = false
      this.init()
    })
  }

内容はこの通りしごく簡単。_padをクリックされたらゲーム全体を初期化するよう支持するメソッドを追加した。
そうそう、init内でも_fieldのremoveChildrenを実行するようにした。

既知のバグ

現在のところ、以下の2つのバグを確認している。

ボタンのscale変更がinteractiveがtrueでないと反映されない

これはオブジェクトの親子関係が影響しているような気がする。

ハートが2つ追加になる場合がある

ダブルクリックでもしちゃってるのかしらん。

まぁここで詳しく見る気はない。
今作っているゲームをそのままパクろうと考えてくれてる人がいれば、そこを解決して私に教えてほしい。

さあ、次回はいよいよelectronでアプリ化を行う！