ブロックくずしを作る３「ゲームエリア」

export class GameMng extends GameLoop {
    /**
     * ゲームエリア
     */
    public Area: Rectangle | undefined;
}

export class GameMng extends GameLoop {
    /**
     * id="gameCanvas"のCANVAS
     */
    public Canvas = new GameCanvas("gameCanvas");

    /**
     * ゲームエリア
     */
    public Area: Rectangle | undefined;

    /**
     * コンストラクタ
     */
    constructor() {
        super();
        this.AddPart(this.Canvas);

        let width = this.Canvas.Width;
        let height = this.Canvas.Height;
        this.Area = new Rectangle(20, 20, width - 20, height - 40);        
    }
}

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

    /**
     * _elementを使った処理を必須のときに、
     * _elementがセットされるまで待つためのPromise。
     * 次のように使う
     * 
     * this._AsyncElement.then(element => { elementを使った処理})
     */
    protected _AsyncElement: Promise<T>;

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

    /**
     * コンストラクタで指定したid名に対応するHTML要素を取得するまで待つ。
     * @returns 取得したHTML要素のPromise
     */
    public async WaitUntil_GetHtmlElement(){
        return this._AsyncElement;
    }
}

import { GameLoop } from './game/GameLoop';
import { GameCanvas } from './game/GameCanvas';
import { GameCanvasPart } from './game/GameCanvasPart';
import { Rectangle } from './shape/Rectangle';
import { GameParameter } from './GameParameter';

export class GameMng extends GameLoop {
    /**
     * id="gameCanvas"のCANVAS
     */
    public Canvas = new GameCanvas("gameCanvas");

    /**
     * ゲームエリア
     */
    public Area: Rectangle | undefined;

    /**
     * コンストラクタ
     */
    constructor() {
        super();
        this.AddPart(this.Canvas);
        this._AfterReadyCanvas();

        let tmp = new GameCanvasPart();
        tmp.onDrawCanvas = context => {
            if (this.Area) {
                let TL = `${this.Area.Left},${this.Area.Top}`;
                let BR = `${this.Area.Right},${this.Area.Bottom}`
                let text = `ゲームエリアは、(${TL})-(${BR})`;
                context.strokeStyle = "yellow";
                context.strokeText(text, 10, 10);
                context.strokeStyle = "white";
                context.strokeRect(this.Area.Left, this.Area.Top, this.Area.Width, this.Area.Height);
            }
            else {
                let text = `ゲームエリアを設定できません。`;
                context.strokeStyle = "red";
                context.strokeText(text, 0, 12);
            }
        }
        this.Canvas.AddPart(tmp);
    }

    /**
     * ゲームキャンバスの準備ができてから行なう処理
     */
    private async _AfterReadyCanvas() {
        await this.Canvas.WaitUntil_GetHtmlElement();
        let width = this.Canvas.Width;
        let height = this.Canvas.Height;
        if (width > GameParameter.CanvasMinWidth && height > GameParameter.CanvasMinHeight) {
            this.Area = new Rectangle(20, 20, width - 20, height - 40);
        }
    }
}

/**
 * ゲームパラメーター
 */
export const GameParameter = {
    /**
     * ゲームキャンバスの幅の最小値
     */
    CanvasMinWidth: 40,
    /**
     * ゲームキャンバスの高さの最小値
     */
    CanvasMinHeight: 60,
} as const;