TypeScriptでゲームプログラム２「操作キャラを追加」

/**
 * 球が移動できる範囲
 */
let Area = {
    X: 10,
    Y: 10,
    Width: 300,
    Height: 300,
}

/**
 * ラケット（弾を撃ち返すキャラクター）
 */
let Racket = {
    X: 0,           // X座標
    Y: 0,           // Y座標
    Width: 40,      // ラケットの横幅
    Height: 10,     // ラケットの縦幅
};

/**
 * ゲームCANVASを描画する。
 */
function DrawGameCanvas() {
    let cvsGame = document.getElementById("game") as HTMLCanvasElement;
    if (cvsGame) {
        let width = cvsGame.width;
        let height = cvsGame.height;
        let context = cvsGame.getContext("2d");
        if (context && width > 0 && height > 0) {

            // ラケット以外の描画処理は省略

            // ラケットを描画
            context.fillStyle = "yellowgreen";
            let racket_x = Racket.X - Racket.Width / 2;
            let racket_y = Racket.Y - Racket.Height / 2;
            context.fillRect(racket_x, racket_y, Racket.Width, Racket.Height);
        }
    }
}

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

window.requestAnimationFrame(GameLoop);

/**
 * ラケットの移動先のX座標
 */
let RacketDestinationX = 0;

window.addEventListener("DOMContentLoaded", () => {
    let cvsGame = document.getElementById("game") as HTMLCanvasElement;
    if (cvsGame) {
        // ゲームキャンバス内をマウスが移動したときのイベント処理を追加する。
        cvsGame.addEventListener("mousemove", (ev) => {
            RacketDestinationX = ev.offsetX;
        })
    }
});

/**
 * ゲームの状況を更新する
 */
function UpdateGameSituation() {
    let left = Area.X + Racket.Width / 2;
    let right = Area.X + Area.Width - Racket.Width / 2;

    // ラケットの移動先と現在値との距離
    let distance = RacketDestinationX - Racket.X;
    // 距離に応じて、X軸の変化速度を変更する。
    let vx = distance / 5;

    // ラケットを移動する。
    let x = Racket.X + vx;
    if (x < left) {
        x = left;
    }
    else if (x > right) {
        x = right;
    }
    Racket.X = x;
}