TypeScriptでゲームプログラム１１「キャンバス関連処理もクラス化する」

/**
 * \<div id="xxxx">や\<button id="yyyy">のような、
 * id付のHTML要素を管理するためのクラスのテンプレート
 */
abstract class ElementMng<T extends HTMLElement> implements IGamePart {
    /**
     * HTML要素のID名
     */
    protected _id;
    /**
     * _idに対するHTML要素
     */
    protected _element: T | undefined;

    /**
     * コンストラクタ
     * 
     * 本クラスは継承して使うことを前提としているので、継承時の注意
     * 
     * 継承で、\<div id="SCORE">に対する管理クラスを作る時には、
     * そのコンストラクタ内で
     * 
     * super("SCORE",HTMLDivElement);
     * 
     * と記載すること。
     * @param id ID名
     * @param typecheck 型チェックするためにHTMLElementの派生クラスを指定する
     */
    constructor(id: string, typecheck: new (...args: any) => T) {
        this._id = id;
        document.addEventListener("DOMContentLoaded", () => {
            let element = document.getElementById(id);
            if (element instanceof typecheck) {
                this._element = element;
            }
            else {
                let typeName = this._getTypeName(typecheck);
                console.log(`id="${id}"の${typeName}要素がありません。`)
            }
        });
    }

    /**
     * typecheckに対応するクラス名が HTML*Element に一致するときに、*の部分の文字列を返す。
     * @param typecheck HTMLElementの派生クラスのコンストラクタ
     * @returns 文字列
     */
    private _getTypeName(typecheck: new (...args: any) => T) {
        let match = typecheck.toString().match(/HTML(.*)Element/);
        if (match) {
            return match[1];
        }
        else {
            return "";
        }
    }

    public abstract Update(): void;
    public abstract Show(): void;
}

/**
 * メッセージボックス（\<div id="message">）を管理するクラス
 */
class MessageMng extends ElementMng<HTMLDivElement> {
    /**
     * コンストラクタ
     */
    constructor() {
        super("message", HTMLDivElement);
    }
    // その他は変更なし
}

/**
 * ボタン１（\<button id="button1">）を管理するクラス
 */
class Button1Mng extends ElementMng<HTMLButtonElement> {
    /**
     * コンストラクタ
     */
    constructor() {
        super("button1", HTMLButtonElement);
    }
    // その他は変更なし
}

/**
 * ゲームCANVAS（\<canvas id="game">）を管理するクラス
 */
class GameCanvasMng extends ElementMng<HTMLCanvasElement> {
    /**
     * コンストラクタ
     */
    constructor() {
        super("game", HTMLCanvasElement);
    }

    /**
     * CANVASの部品を更新する。
     */
    public Update() {
        Racket1.Update();
        Ball1.Update();
    }

    /**
     * CANVASの部品を描画する。
     */
    public Show() {
        if (this._element) {
            let width = this._element.width;
            let height = this._element.height;
            let context = this._element.getContext("2d");
            if (context && width > 0 && height > 0) {
                // 実際の描画処理
                // 背景を黒に
                context.fillStyle = "black";
                context.fillRect(0, 0, width, height);

                // Areaの範囲を白で描画
                context.strokeStyle = "white";
                context.strokeRect(Area.Left, Area.Top, Area.Width, Area.Height);

                // ラケットを描画
                Racket1.DrawCanvas(context);

                // 球を黄色で描画
                Ball1.DrawCanvas(context);
            }
        }
    }
}

let GameCanvas = new GameCanvasMng();

/**
 * キャンバスに描画されるゲームの部品を表すインターフェイス
 */
 export interface IGameCanvasPart {
    /**
     * ゲームフレームが更新されたときに、部品の状態を更新するメソッド
     */
    Update(): void;

    /**
     * Updateの後で、部品をCANVASに描画するメソッド
     * @param context 描画するCANVASのCanvasRenderingContext2D
     */
    DrawCanvas(context: CanvasRenderingContext2D): void;
}

class GameCanvasMng extends ElementMng<HTMLCanvasElement> {
    /**
     * CANVASの部品を更新する。
     */
    public Update() {
        // ゲーム部品を更新する。
        this._partlist.forEach(part => part.Update());
    }

    /**
     * CANVASの部品を描画する。
     */
    public Show() {
        if (this._element) {
            let width = this._element.width;
            let height = this._element.height;
            let context = this._element.getContext("2d");
            if (context && width > 0 && height > 0) {
                let _context = context;
                // ゲーム部品を表示する。
                this._partlist.forEach(part => part.DrawCanvas(_context));
            }
        }
    }

    /**
     * CANVAS部品のリスト
     */
    protected _partlist: IGameCanvasPart[] = [];

    /**
     * CANVAS部品を登録する
     * @param part CANVAS部品
     */
    public AddPart(part: IGameCanvasPart) {
        this._partlist.push(part);
    }
}

let GameCanvas = new GameCanvasMng();
let background = new class implements IGameCanvasPart {
    Update(): void { }
    DrawCanvas(context: CanvasRenderingContext2D): void {
        // 実際の描画処理
        // 背景を黒に
        context.fillStyle = "black";
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);

        // Areaの範囲を白で描画
        context.strokeStyle = "white";
        context.strokeRect(Area.Left, Area.Top, Area.Width, Area.Height);

    }
};
GameCanvas.AddPart(background)
GameCanvas.AddPart(Racket1);
GameCanvas.AddPart(Ball1);