TypeScriptでゲームプログラム４「ラケットに球を跳ね返させる」

/**
 * 球の状態更新
 */
function UpdateBall() {
    if (GameStatus == "game") {

        // 衝突を考慮しない新座標と速度を計算する。
        let x = Ball.X + Ball.VX;
        let y = Ball.Y + Ball.VY;
        let vx = Ball.VX;
        let vy = Ball.VY + 0.25;

        // ラケットとの衝突処理
        ({ y, vy } = CollisionBallAndRachket(y, x, vy));

        // 左右の壁との衝突処理
        let left = Area.X + Ball.SIZE;
        let right = Area.X + Area.Width - Ball.SIZE;
        if (x < left) {
            x = left + left - x;
            vx = - vx;
        }
        else if (x > right) {
            x = right + right - x;
            vx = - vx;
        }

        // 天井との衝突処理
        let top = Area.Y + Ball.SIZE;
        if (y < top) {
            y = top + top - y;
            vy = - 0.5 * vy;
        }

        // 床との衝突処理
        let bottom = Area.Y + Area.Height - Ball.SIZE;
        if (y > bottom) {
            GameStatus = "gameover";
            ChangeButton1Text("NEXTゲーム");
            ChangeMessage("ゲームオーバー\nボタンを押すと次のゲームを開始します。");
        }

        Ball.X = x;
        Ball.Y = y;
        Ball.VX = vx;
        Ball.VY = vy;
    }
}

/**
 * 球がラケットに衝突したときの処理
 * @param y 球のX座標
 * @param x 球のY座標
 * @param vy 球のY軸速度
 * @returns 
 */
function CollisionBallAndRachket(y: number, x: number, vy: number) {
    let racket_left = Racket.X - Racket.Width / 2;
    let racket_right = Racket.X + Racket.Width / 2;
    let racket_top = Racket.Y - Racket.Height / 2;

    // 球がラケットに当たるとき、以下の条件を満たす。
    // - 球が下向きに移動している
    // - 球のX座標がラケットの左右の間にある。
    // - 球の最も下にある点座標(y+Ball.SIZE)とラケットの上面の距離が0以下になる
    let ball_bottom = y + Ball.SIZE;
    if (vy > 0 && racket_top <= ball_bottom) {
        if (racket_left <= x && x <= racket_right) {
            // 球がラケット上面に衝突したので、跳ね返す。
            y += (racket_top - ball_bottom);
            vy = -vy;
        }
    }
    return { y, vy };
}

/**
 * ゲームの状況を表すtype
 * start - ゲーム開始
 * stop - ゲーム停止中
 * game - ゲーム実行中
 * gameover - ゲームオーバー
 */
type GameStatus_t = 'start' | 'stop' | 'game' | 'gameover';
/**
 * ゲームの状況
 */
let GameStatus: GameStatus_t = "start";

document.addEventListener("DOMContentLoaded", () => {
    let button1 = document.getElementById("button1");
    if (button1) {
        button1.addEventListener("click", () => {
            switch (GameStatus) {
                case "game":
                    GameStatus = "stop";
                    ChangeButton1Text("スタート");
                    ChangeMessage("ゲームポーズ中\nボタンを押すと再開します。");
                    break;
                case "stop":
                    GameStatus = "game";
                    ChangeButton1Text("ストップ");
                    ChangeMessage("");
                    break;
                case "start":
                case "gameover":
                    GameStatus = "game";
                    InitGameSituation();
                    ChangeButton1Text("ストップ");
                    ChangeMessage("");
                    break;
            }
        })
    }
});

/**
 * ゲーム状態を初期化する。
 */
function InitGameSituation() {
    // フレームカウンターをランダム値として使う。
    let random = FrameCounter ?? 0;

    // ボールの座標、速度を初期化する。
    // X座標：初期値はフレームカウンタに応じてランダムに変化
    Ball.X = Area.X + Area.Width * 0.1 * (1 + (random % 9));
    // Y座標：初期値はAreaの上辺から球のSIZEだけ下
    Ball.Y = Area.Y + Ball.SIZE;
    // X軸速度：初期値はフレームカウンタが奇数なら-5、偶数なら5に変化する。
    Ball.VX = (random & 1) ? 5 : -5;
    // Y軸速度：初期値は0
    Ball.VY = 0;

    // ラケットの座標を初期化する。
    // X座標：初期値はAreaの横幅の真ん中
    Racket.X = Area.X + Area.Width / 2;
    // Y座標：初期値はAreaの下辺からラケットの縦幅の半分だけ上
    Racket.Y = Area.Y + Area.Height - Racket.Height / 2
}


InitGameSituation();
window.requestAnimationFrame(GameLoop);