ブロックくずしを作る10「ブロックを壊す」

ブロックと球の衝突判定ができるようになったので、球が当たったブロックを壊す処理を追加しましょう。

ブロックを壊すための設計

ブロックを壊すために、今回は次のような設計にします。

  • ブロックに耐久力のパラメータを追加する。
  • ブロックに弾が当たると耐久力が減っていき、耐久力が0になるとブロックが壊れる。

球(Ballクラス)のコード変更

球とブロックの衝突判定後に球の速度をの処理を行っているのは、Balll._CollisionBrick()メソッドの中にあります。そこにブロックを壊す処理を追加しましょう。

以下にコードを示します。

export class Ball implements IGameCanvasPart {
    /**
     * ブロックとの衝突処理
     */
    private _CollisionBrick(){
        let collision = this._game.BrickSet.CollisionBall(this);
        if (collision.Result) {
            // 衝突したので球の速度を変更する
            this._VX += collision.AX;
            this._VY += collision.AY;

            // 衝突したブロックにダメージを与える
            if ( collision.Object instanceof Brick ){
                collision.Object.Break();
            }
        }
    }
}

球の速度を更新した後、ブロックの耐久力にダメージを与える処理を追加しました。(12-15行目)

ブロック(Brickクラス)のコード変更

以下にコードを示します。

export class Brick implements IGameCanvasPart {
    /**
     * ブロックのHP(耐久力)
     */
    public HP: number = 1;

    /**
     * ブロックが壊れているならtrueを返す。
     * @returns 
     */
    public IsBroken() {
        return this.HP <= 0;
    }

    /**
     * ブロックにダメージを与える。
     */
    public Break() {
        this.HP--;
        if ( this.IsBroken() ){
            this._game.BrickSet.DeleteBrokenBrick();
        }
    }
}

まずブロックの耐久力としてHPというメンバを追加しました。また「壊れた」ことを判定をするためのメソッドIsBroken()を追加しました。(2-13行目)

次に、HPを減らすためのメソッドBreak()を追加しました。(15-23行目)

球とブロックが衝突したときにこのメソッドを実行することでブロックのHPが徐々に減っていくようになります。そしてブロックが壊れたときは、ブロックセットから壊れたブロックを取り除くメソッドを呼び出すようにしています。

ブロックセット(BrickSet)のコード変更

コードを以下に示します。

export class BrickSet implements IGameCanvasPart {
    /**
     * ブロックリストから壊れたブロックを削除する
     * @param target 
     */
    public DeleteBrokenBrick() {
        // brickListを「壊れていないブロックのみ」にする
        this._brickList = this._brickList.filter(brick => !brick.IsBroken());
    }
}

DeleteBrokenBrick()メソッドを追加しました。

ブロックリストを「壊れていないブロックのみ」に更新することで、「壊れたブロック」を取り除いています。

ここまでを実行する

ここまでを実際に実行すると下のようになります。

なお、赤ブロックはHP3、黄色ブロックはHP2、青ブロックはHP1にしています。

SCORE:10000
メッセージ

コメント