前回の「選択肢を表示する方法」のコードでは、選択肢毎にコードを書く必要がありif文だらけのコードになっていました。
今回はこの問題を解消する方法を記します。
以下の例では、見た目では分かりませんが、画像、メッセージ、選択肢情報といったパラメータを変えただけで、全て共通のコードを実行しています。
そのため、どれだけ画像やメッセージ、選択肢が増えても、if文等のコードが増えることはありません。

ファイル構成

ファイルとそれを入れるフォルダーを以下のような構成します。
※背景と人物の画像はBing Image Creatorで生成しています（AI生成）。

scene.js　-　場面情報クラス

class 選択肢情報クラス {
    constructor(ar) {
        this.id = ar[0];
        this.名称 = ar[1];
    }
}

class 画像情報クラス {
    constructor(ar) {
        this.スプライトid = ar[0];
        this.レイヤーid = ar[1];
        this.画像id = ar[2];
        this.x1 = ar[3];
        this.y1 = ar[4];
        this.x2 = ar[5];
        this.y2 = ar[6];
        this.表示メソッド = ar[7];
        this.p1 = ar[8];
        this.p2 = ar[9];
        this.p3 = ar[10];
    }
}

export class 場面情報クラス {
    constructor(ar) {
        this.id = ar[0];
        this.メッセージ = ar[1];

        this.選択肢情報リスト = [];
        ar[2].forEach(x => this.選択肢情報リスト.push(new 選択肢情報クラス(x)));

        this.画像情報リスト = [];
        if (ar[3]) ar[3].forEach(x => this.画像情報リスト.push(new 画像情報クラス(x)));
    }
}

1. 選択肢情報クラス

このクラスは「選択肢」を管理するためのものです。

• コンストラクタ：クラスを作るときに、配列 ar を受け取ります。
  • ar[0] は選択肢の「id」。
  • ar[1] は選択肢の「名称」（例えば「はい」や「いいえ」など）。

このクラスを使うことで、選択肢のデータを簡単に扱えるようになります。

2. 画像情報クラス

このクラスは、プログラム内で表示する画像の情報を管理します。

• コンストラクタ：配列 ar を受け取り、画像に関する情報を格納します。
  • スプライトid：画像の識別ID。
  • レイヤーid：どの層（レイヤー）に画像を表示するか。
  • 画像id：実際の画像データの識別子。
  • x1, y1：画像の開始位置（左上の座標）。
  • x2, y2：画像の終了位置（右下の座標）。
  • 表示メソッド：画像をどのように表示するか（例えば拡大・縮小）。
  • p1, p2, p3：追加のパラメータ（用途に応じて設定）。

このクラスにより、画像を座標やレイヤーに基づいて管理できます。

3. 場面情報クラス

このクラスは、「場面」を管理するためのメインクラスです。

• コンストラクタ：配列 ar を受け取り、以下の情報を設定します。
  • id：場面の識別子。
  • メッセージ：この場面で表示する文章。
  • 選択肢情報リスト：ar[2] に含まれる選択肢のデータを 選択肢情報クラス に変換して保存します。
  • 画像情報リスト：ar[3] が存在する場合、画像データを 画像情報クラス に変換して保存します。

このクラスを利用すると、場面に対応するメッセージ、選択肢、画像を一括して扱えます。

sceneTransition.js　-　場面遷移クラス

import { スプライトクラス } from './sprite.js'; // クラスをインポート

export class 場面遷移 {
    static レイヤー管理 = {};
    static スプライト管理 = {};
    static 場面情報管理 = {};
    static 場面情報 = null;
    static 画像管理 = null;
    static メッセージウィンドウ = null;
    static コマンドウィンドウ = null;

    static async 開始する() {
        if (!場面遷移.場面情報) throw new Error("場面情報が初期化されていません");

        while (1) {
            await 場面遷移.画像を表示する();
            await 場面遷移.メッセージを表示する();
            const 選択肢情報 = 場面遷移.場面情報.選択肢情報リスト[0];
            if (!選択肢情報.名称) {
                // 選択肢情報に名称が無い場合は場面を遷移する
                場面遷移.場面情報 = 場面遷移.場面情報管理[選択肢情報.id];
                continue;
            }
            await 場面遷移.コマンドウィンドウを表示する();
        }
    }

    static async 画像を表示する() {
        if (場面遷移.場面情報.画像情報リスト.length == 0) return; // 画像情報が無い場合は何もしない

        let スプライト, 画像要素;
        const プロミスリスト = [];
        場面遷移.場面情報.画像情報リスト.forEach(画像情報 => {
            スプライト = 場面遷移.スプライト管理[画像情報.スプライトid];
            if (!画像情報.画像id) {
                if (!スプライト) return; // 画像idが無い場合はスプライトを作成できないので何もしない
            } else {
                画像要素 = 場面遷移.画像管理.取得する(画像情報.画像id);
                if (スプライト) {
                    // 指定したスプライトに別の画像を設定したい場合は新たにスプライトを作り直す
                    if (スプライト.画像要素 != 画像要素) スプライト = 場面遷移.スプライトを作成する(画像要素, 画像情報);
                } else {
                    // 指定したスプライトが存在しない場合は新たに作成する
                    スプライト = 場面遷移.スプライトを作成する(画像要素, 画像情報);
                }
            }

            場面遷移.表示メソッドに従って画像を表示する(画像情報, スプライト, プロミスリスト);
        });

        if (プロミスリスト.length == 0) return;
        await Promise.all(プロミスリスト);
    }

    static スプライトを作成する(画像要素, 画像情報) {
        const スプライト = new スプライトクラス(
            場面遷移.レイヤー管理[画像情報.レイヤーid],
            画像要素,
            画像情報.x1,
            画像情報.y1,
            画像情報.x2,
            画像情報.y2
        );
        場面遷移.スプライト管理[画像情報.スプライトid] = スプライト;
        return スプライト;
    }

    static 表示メソッドに従って画像を表示する(画像情報, スプライト, プロミスリスト) {
        if ((画像情報.表示メソッド == "フェードインする") || (画像情報.表示メソッド == "フェードアウトする")) {
            プロミスリスト.push(スプライト[画像情報.表示メソッド](画像情報.p1));
        } else if (画像情報.表示メソッド == "移動してフェードインする") {
            const 正位置 = { x: スプライト.x, y: スプライト.y };
            const 移動距離 = { x: 0, y: 0 };
            場面遷移.移動距離を取得する(画像情報, 移動距離, -640);
            スプライト.座標を設定する(
                画像情報.x1 + 移動距離.x,
                画像情報.y1 + 移動距離.y,
                画像情報.x2 + 移動距離.x,
                画像情報.y2 + 移動距離.y
            );
            プロミスリスト.push(スプライト[画像情報.表示メソッド](画像情報.p1, 画像情報.p2, 正位置.x, 正位置.y, 画像情報.p3));
        } else if (画像情報.表示メソッド == "移動してフェードアウトする") {
            const 移動距離 = { x: 0, y: 0 };
            場面遷移.移動距離を取得する(画像情報, 移動距離, 640);
            プロミスリスト.push(スプライト[画像情報.表示メソッド](画像情報.p1, 画像情報.p2, 移動距離.x, 移動距離.y, 画像情報.p3));
        }
    }

    static 移動距離を取得する(画像情報, 移動距離, 基本移動距離) {
        if (画像情報.p1 > 0) 移動距離.x = 基本移動距離;
        else if (画像情報.p1 < 0) 移動距離.x = -基本移動距離;

        if (画像情報.p2 > 0) 移動距離.y = 基本移動距離;
        else if (画像情報.p2 < 0) 移動距離.y = -基本移動距離;
    }

    static async メッセージを表示する() {
        if (!場面遷移.場面情報.メッセージ) return; // 表示するメッセージが無い場合は何もしない
        await 場面遷移.メッセージウィンドウ.表示する();
        await 場面遷移.メッセージウィンドウ.メッセージを表示する(場面遷移.場面情報.メッセージ);
    }

    static async コマンドウィンドウを表示する() {
        const id = await 場面遷移.コマンドウィンドウ.表示する(場面遷移.場面情報.選択肢情報リスト);
        場面遷移.場面情報 = 場面遷移.場面情報管理[id];
    }
}

1. 場面遷移クラス全体の役割

このクラスは、プログラムの場面を管理するためのメインクラスです。例えば、特定の画像やメッセージを表示したり、場面を切り替えたりします。

• 静的プロパティ：各種データ（レイヤー管理、スプライト管理、場面情報管理など）を一括で管理します。
• 場面遷移：開始する メソッドを呼び出すことで、プログラムの場面遷移が始まります。
• ループ構造：無限ループ (while(1)) を使って、場面表示の処理を繰り返します。

2. 静的プロパティ

場面遷移クラスでは、多くのデータを静的プロパティで管理しています。

• レイヤー管理：レイヤー（表示する層）を管理します。
• スプライト管理：スプライト（プログラム内の画像要素）を管理します。
• 場面情報管理：複数の場面に対応するデータを保存します。
• 場面情報：現在の場面のデータを保持します。
• 画像管理：画像を取得したりするための機能を提供します。
• メッセージウィンドウ & コマンドウィンドウ：メッセージや選択肢を表示するための管理要素です。

3. 場面を開始する: 開始する メソッド

このメソッドは、場面遷移の主要な処理を行います。

処理手順：

1. 初期化チェック：場面情報 が設定されていない場合はエラー (throw new Error) を発生させます。
2. 画像とメッセージの表示：画像を表示する メソッドで画像を表示し、次に メッセージを表示する メソッドでメッセージを表示します。
3. 場面遷移：選択肢情報に基づいて次の場面を設定します。選択肢に名称がない場合は、自動的に次の場面に進みます。
4. 選択肢の表示：コマンドウィンドウを表示する メソッドで選択肢をユーザーに提示します。

4. 画像を表示する: 画像を表示する メソッド

画面に画像を表示するための処理を行います。

• 画像情報の確認：現在の場面情報に画像情報がない場合は何もしません。
• スプライトの作成：必要に応じて新しいスプライト（画像要素）を作成します。
• 表示メソッド：画像を表示する際の方法（フェードインや移動など）に従って処理します。
• 非同期処理：Promise.all を利用して画像表示の処理が完了するのを待ちます。

5. スプライトの管理: スプライトを作成する メソッド

スプライトは、画像を画面上に表示するための単位です。

• パラメータ：画像要素、座標 (x1, y1, x2, y2) を指定してスプライトを作成します。
• レイヤー設定：スプライトを配置するレイヤーを管理します。

6. 画像表示メソッドの適用: 表示メソッドに従って画像を表示する メソッド

画像の表示方法を指定して実行します。

• フェードイン/フェードアウト：画像を徐々に表示したり消したりします。
• 移動して表示：画像を指定した位置に移動させながら表示します。
• 座標計算：必要に応じて移動距離や座標を計算します。

7. メッセージ表示: メッセージを表示する メソッド

場面のメッセージを画面に表示します。

• メッセージウィンドウの表示：メッセージウィンドウを表示します。
• メッセージ内容の更新：現在の場面のメッセージを設定して表示します。

8. 選択肢の表示: コマンドウィンドウを表示する メソッド

選択肢情報リストに基づいて選択肢を表示します。

• 選択肢の取得：ユーザーが選んだ選択肢のIDを取得します。
• 場面遷移：選択肢に応じて次の場面情報を設定します。

sample.js　-　サンプルクラス

このプログラムでは、次のような流れで「場面」を管理します：

1. 必要な画像やレイヤー、ウィンドウを準備。
2. 「場面」の情報（テキスト、画像、選択肢など）を管理する。
3. 実際に選択肢を選びながら場面を遷移する仕組みを実現。

import { 画像管理クラス } from './imageManager.js'; // クラスをインポート
import { レイヤークラス } from './layer.js'; // クラスをインポート
import { ループ } from './loop.js'; // クラスをインポート
import { メッセージウィンドウクラス } from './messageWindow.js'; // クラスをインポート
import { コマンドウィンドウクラス } from './commandWindow.js'; // クラスをインポート
import { Data } from './data.js'; // クラスをインポート
import { 場面情報クラス } from './scene.js'; // クラスをインポート
import { 場面遷移 } from './sceneTransition.js'; // クラスをインポート

export class サンプル {
    static 遷移データリスト = [
        ["スタート", , [["町の広場へ行く",]],]
        , ["町の広場へ行く", "プレイヤーは町の広場に来た<w>10</w>", [["町の広場",]], [["背景01", , , , , , , "フェードアウトする", 1, ,], ["背景01", "レイヤー1", "町", 0, 0, 640, 640, "フェードインする", 1, ,], ["人物01", , , , , , , "移動してフェードアウトする", -20, 0, 1], ["人物01", "レイヤー2", "プレイヤー", 0, 0, 640, 640, "移動してフェードインする", -20, 0, 1]]]
        , ["町の広場", "どうする？", [["話す", "話す"], ["持物を見る", "持物を見る"], ["移動する", "移動する"]],]
        , ["話す", "話が聞けそうな人は誰もいない<w>10</w>", [["町の広場",]],]
        , ["持物を見る", "今のところ、何も持っていない<w>10</w>", [["町の広場",]],]
        , ["移動する", "どこへ行く？", [["町の広場", "やめる"], ["武器屋へ行く", "武器屋へ行く"], ["防具屋へ行く", "防具屋へ行く"], ["道具屋へ行く", "道具屋へ行く"], ["宿屋へ行く", "宿屋へ行く"], ["町を出る", "町を出る"]],]
        , ["武器屋へ行く", "武器屋は開いていないようだ<w>10</w>", [["町の広場",]],]
        , ["防具屋へ行く", "防具屋は開いていないようだ<w>10</w>", [["町の広場",]],]
        , ["道具屋へ行く", "道具屋は開いていないようだ<w>10</w>", [["町の広場",]],]
        , ["宿屋へ行く", "プレイヤーは宿屋に来た<w>10</w>", [["宿屋01",]], [["背景01", , , , , , , "フェードアウトする", 1, ,], ["背景01", "レイヤー1", "宿屋", 0, 0, 640, 640, "フェードインする", 1, ,], ["人物01", , , , , , , "移動してフェードアウトする", 20, 0, 1]]]
        , ["宿屋01", "受付：<br>いらっしゃいませ<br>一泊100カーネですが<br>お泊りになりますか？", [["宿屋02", "泊まる"], ["宿屋05", "やめる"]], [["人物01", "レイヤー2", "受付", 0, 0, 640, 640, "移動してフェードインする", 20, 0, 1]]]
        , ["宿屋02", "受付：<br>それではお休みください<w>10</w>", [["宿屋03",]],]
        , ["宿屋03", "プレイヤーはしばし眠りについた<w>10</w>", [["宿屋04",]], [["背景01", , , , , , , "フェードアウトする", 1, ,], ["人物01", , , , , , , "移動してフェードアウトする", -20, 0, 1], ["人物01", "レイヤー2", "プレイヤー", 0, 0, 640, 640, "移動してフェードインする", -20, 0, 1]]]
        , ["宿屋04", "受付：<br>お早うございます<br>またのお越しをお待ちしております<w>10</w>", [["町の広場へ行く",]], [["背景01", , , , , , , "フェードインする", 1, ,], ["人物01", , , , , , , "移動してフェードアウトする", 20, 0, 1], ["人物01", "レイヤー2", "受付", 0, 0, 640, 640, "移動してフェードインする", 20, 0, 1]]]
        , ["宿屋05", "受付：<br>やめるのですね<br>またのお越しをお待ちしております<w>10</w>", [["町の広場へ行く",]],]
        , ["町を出る", "まだ装備が整っていない<w>10</w>", [["町の広場",]],]];

    static async main() {
        await サンプル.使用する画像を読み込む();
        サンプル.ループ処理を作成する();
        サンプル.メッセージウィンドウを作成する();
        サンプル.コマンドウィンドウを作成する();
        サンプル.レイヤーを作成する();
        サンプル.場面情報管理を作成する();
        場面遷移.開始する();
    }

    static async 使用する画像を読み込む() {
        const 画像情報リスト = [
            { id: '町', src: 'img/bg02.jpg' },
            { id: '宿屋', src: 'img/bg03.jpg' },
            { id: 'プレイヤー', src: 'img/chara01.png' },
            { id: '受付', src: 'img/chara03.png' }
        ];
        場面遷移.画像管理 = new 画像管理クラス();
        await 場面遷移.画像管理.画像を読み込む(画像情報リスト);
    }

    static ループ処理を作成する() {
        ループ.初期化する();
        ループ.開始する();
    }

    static メッセージウィンドウを作成する() {
        場面遷移.メッセージウィンドウ = new メッセージウィンドウクラス(".スクリーン", ".メッセージウィンドウ");
        Data.オブジェクト管理["サンプル"] = サンプル;
    }

    static コマンドウィンドウを作成する() {
        場面遷移.コマンドウィンドウ = new コマンドウィンドウクラス(".スクリーン", ".コマンドウィンドウ");
    }

    static レイヤーを作成する() {
        場面遷移.レイヤー管理["レイヤー1"] = new レイヤークラス('canvas.レイヤー1'); // 背景用のレイヤ
        場面遷移.レイヤー管理.レイヤー1.描画処理をループ処理に追加する();
        場面遷移.レイヤー管理["レイヤー2"] = new レイヤークラス('canvas.レイヤー2'); // 前景用のレイヤ
        場面遷移.レイヤー管理.レイヤー2.描画処理をループ処理に追加する();
    }

    static 場面情報管理を作成する() {
        サンプル.遷移データリスト.forEach(x => 場面遷移.場面情報管理[x[0]] = new 場面情報クラス(x));
        場面遷移.場面情報 = 場面遷移.場面情報管理['スタート'];
    }
}

addEventListener('load', サンプル.main);

1. 必要なクラスのインポート

最初に、import 文で外部ファイルに定義されたクラスを読み込んでいます。各クラスの役割は以下の通りです：

• 画像管理クラス：使用する画像を読み込み、管理する。
• レイヤークラス：背景やキャラクターなどの表示エリア（レイヤー）を作成する。
• ループクラス：処理を繰り返すための仕組み（主にアニメーション）。
• メッセージウィンドウクラス：メッセージを表示するウィンドウを制御。
• コマンドウィンドウクラス：選択肢（コマンド）を表示するウィンドウ。
• 場面情報クラス：各場面のデータ（テキストや画像など）を管理。
• 場面遷移：現在の場面を変更してストーリーを進める。

2. サンプルクラスの役割

サンプルクラスは、このプログラムのセットアップと管理を行います。

重要な静的プロパティ：

• 遷移データリスト：各場面の情報（テキスト、画像、選択肢）を定義した配列です。
  • 例えば、"町の広場へ行く" という選択肢を選んだときのシーンが定義されています

3. サンプルクラスのメソッド

1. main メソッド

プログラムの全体的な流れを準備する主なメソッドです。以下の処理を行います。

• 画像の準備（使用する画像を読み込む）。
• レイヤーやウィンドウの作成。
• 場面遷移.開始する を呼び出してプログラムを開始。

2. 使用する画像を読み込む メソッド

必要な画像（背景やキャラクター）を読み込む処理。

const 画像情報リスト = [
    { id: '町', src: 'img/bg02.jpg' },
    { id: '宿屋', src: 'img/bg03.jpg' },
    { id: 'プレイヤー', src: 'img/chara01.png' },
    { id: '受付', src: 'img/chara03.png' }
];

このように、画像の識別IDとファイルパスを指定して管理します

3. ループ処理を作成する メソッド

プログラム全体で利用する「繰り返し処理」を初期化し、開始します。

4. メッセージウィンドウを作成する メソッド

プレイヤーにメッセージを表示するためのウィンドウを用意します。

5. コマンドウィンドウを作成する メソッド

プレイヤーが選択肢を選べるウィンドウを作成します。

6. レイヤーを作成する メソッド

描画を行うための「レイヤー」を作成。画面の背景やキャラクターの表示を管理します。

7. 場面情報管理を作成する メソッド

遷移データリスト をもとに、各場面を管理するオブジェクトを作成します。

4. 各場面のデータ構造（遷移データリスト）

遷移データリスト には各場面の情報が含まれています。

["町の広場へ行く", "プレイヤーは町の広場に来た<w>10</w>", [["町の広場",]], [["背景01", "レイヤー1", "町", 0, 0, 640, 640, "フェードインする", 1, ,]]]

これは、「町の広場へ行く」という選択肢を選んだときに表示する情報を表します。

• メッセージ：プレイヤーは町の広場に来た。
• 選択肢情報：次に選べる選択肢。
• 画像情報：背景やキャラクターの画像をどのように表示するか（例えば「フェードイン」）。

5. プログラムの開始

プログラムは addEventListener('load', サンプル.main) でスタート。

• ページが読み込まれると、main が実行され、セットアップが行われます。

選択肢を表示する方法を記します。
以下の例では、選択肢をクリックすると該当するメッセージを表示します。

ファイル構成

ファイルとフォルダーを以下のような構成します。
※前回と同じファイル名でも内容が変わっている場合があります。
※背景と人物の画像はBing Image Creatorで生成しています（AI生成）。

index.html　-　HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=660,user-scalable=no,shrink-to-fit=yes">
    <title>選択肢を表示する方法</title>
    <link href="css/sample.css" rel="stylesheet" />
</head>
<body>
    <script type="module" src="js/sample.js"></script>

    <aside class="画面更新情報">
        <p>
            リフレッシュレート：<span class="リフレッシュレート">0</span>Hz
            ／フレームレート：<span class="フレームレート">0</span>fps
        </p>
    </aside>
    <main class="スクリーン">
        <canvas class="レイヤー1" width="640" height="640"></canvas>
        <canvas class="レイヤー2" width="640" height="640"></canvas>
        <article class="メッセージウィンドウ 消去 透明化">
            <p class="メッセージエリア">
                <span class="メッセージ"></span>
                <span class="カーソル 点滅 不可視化">■</span>
            </p>
        </article>
        <article class="コマンドウィンドウ 消去">
            <button class="通常ボタン" value="0">
                <span></span>
            </button>
            <button class="通常ボタン" value="1">
                <span></span>
            </button>
            <button class="通常ボタン" value="2">
                <span></span>
            </button>
            <button class="通常ボタン" value="3">
                <span></span>
            </button>
            <button class="通常ボタン" value="4">
                <span></span>
            </button>
            <button class="通常ボタン" value="5">
                <span></span>
            </button>
            <button class="通常ボタン" value="6">
                <span></span>
            </button>
            <button class="通常ボタン" value="7">
                <span></span>
            </button>
            <button class="通常ボタン" value="8">
                <span></span>
            </button>
            <button class="通常ボタン" value="9">
                <span></span>
            </button>
        </article>
    </main>
</body>
</html>

1. 全体の構造

このHTMLは前回の「メッセージウィンドウを表示する方法」に「コマンドウィンドウ」クラスの要素を追加しており、それ以外はほぼ同じです。

2. コマンドウィンドウ

<article class="コマンドウィンドウ 消去">
    <button class="通常ボタン" value="0"><span></span></button>
    <!-- 以下省略 -->
</article>

• 役割：選択肢を表示するウィンドウ。
• クラス設定：
  • コマンドウィンドウ：ウィンドウのスタイルを定義。
  • 消去：初期状態では非表示（CSSでdisplay: none）。
• 動的要素：
  • <button>：各ボタンが選択肢を表し、value 属性でボタンの番号を指定。
  • <span>：ボタン上に表示するテキストを動的に更新。

sample.css　-　CSS

:root {
    --通常文字サイズ: 26px;
    --通常文字行高さ: 38px;
    --小文字サイズ: 18px;
    --小文字行高さ: 24px;
    --黒い影: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 2px 0px 1px #000, -2px -0px 1px #000, 0px 2px 1px #000, 0px -2px 1px #000;
    --トランジションスピード: 0.8s;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior-y: none;
}

.画面更新情報 {
    text-align: center;
    font-size: var(--小文字サイズ);
    line-height: var(--小文字行高さ);
    color: #333;
}

.スクリーン {
    width: 640px;
    height: 840px;
    margin: 20px auto;
    border: 2px solid #ccc;
    position: relative;
    background-color: black;
}

canvas {
    position: absolute;
    top: 200px;
}

.不可視化 {
    visibility: hidden;
}

.透明化 {
    opacity: 0;
}

.消去 {
    display: none;
}

.表示 {
    display: block;
}

@keyframes 点滅 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.点滅 {
    animation: 点滅 1s ease-out infinite;
}

.メッセージウィンドウ {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    border: solid 3px white;
    padding: 12px 17px;
    margin: 5px;
    transition: opacity var(--トランジションスピード) ease-out;
}

    .メッセージウィンドウ .メッセージエリア {
        padding: 3px;
        margin: 0px;
        font-size: var(--通常文字サイズ);
        line-height: var(--通常文字行高さ);
        color: white;
        text-shadow: var(--黒い影);
        width: 584px;
        height: 154px;
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .メッセージウィンドウ .メッセージエリア::-webkit-scrollbar {
            display: none;
        }

    .メッセージウィンドウ .カーソル {
        transition: opacity var(--トランジションスピード) ease-in;
        font-size: var(--通常文字サイズ);
        display: inline-block;
        transform: translateY(-2px);
    }

.通常ボタン {
    font-size: var(--小文字サイズ);
    line-height: var(--小文字行高さ);
    color: white;
    text-shadow: var(--黒い影);
    background-color: rgba(250, 250, 250, 0.1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) 30%, rgba(255, 255, 255, 0.3));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
    border: solid 1px black;
    border-radius: 5px;
    padding: 10px 20px;
    margin:1px 0;
}

    .通常ボタン:hover {
        background-color: rgb(255, 255, 45);
    }

    .通常ボタン:active {
        box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
    }

    .通常ボタン span {
        display: flex;
        align-items: center;
    }

.コマンドウィンドウ {
    position: absolute;
    padding: 12px 17px;
    margin: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -35%);
    text-align: center;
    max-height: 600px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .コマンドウィンドウ::-webkit-scrollbar {
        display: none;
    }

    .コマンドウィンドウ .通常ボタン span {
        justify-content: center;
        white-space: nowrap;
        min-width:250px;
    }

1. 全体の構造

このCSSは前回の「メッセージウィンドウを表示する方法」に「コマンドウィンドウ」クラスと「通常ボタン」クラスを追加しており、それ以外はほぼ同じです。

2. コマンドウィンドウ

.コマンドウィンドウ {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -35%);
    text-align: center;
    ...
}

• 中央配置：top: 50%; left: 50%; transform: translate(-50%, -35%); によって画面中央に配置。
• 最大高さ：600px以内に設定し、オーバーフロー時はスクロール。

2. ボタン（.通常ボタン）

.通常ボタン {
    font-size: var(--小文字サイズ);
    background-color: rgba(250, 250, 250, 0.1);
    border-radius: 5px;
    ...
}

• ボタンデザイン。
  • 背景：半透明の白と斜めのグラデーション。
  • 角丸：5pxの角を丸く。
  • ホバー効果：ボタンにマウスを載せると黄色に変化。

commandWindow.js　-　コマンドウィンドウクラス

このクラスの目的：

• コマンド（ボタンを介して実行される選択肢）を表示するウィンドウを作成。
• 選択肢をクリックすると適切な処理が実行される仕組みを提供。

export class コマンドウィンドウクラス {
    constructor(スクリーンセレクタ, コマンドウィンドウセレクタ) {
        this.スクリーン要素 = document.querySelector(スクリーンセレクタ);
        if (!this.スクリーン要素) throw new Error(`スクリーンセレクタ:'${スクリーンセレクタ}'が見つかりません`);

        this.コマンドウィンドウ要素 = this.スクリーン要素.querySelector(コマンドウィンドウセレクタ);
        if (!this.コマンドウィンドウ要素) throw new Error(`コマンドウィンドウセレクタ:'${コマンドウィンドウセレクタ}'が見つかりません`);

        this.ボタン要素リスト = this.コマンドウィンドウ要素.querySelectorAll('button');
        if (!this.ボタン要素リスト.length) throw new Error(`'${コマンドウィンドウセレクタ}'にbuttonタグが見つかりません`);

        this.名称要素リスト = this.コマンドウィンドウ要素.querySelectorAll('span');
        if (!this.名称要素リスト.length) throw new Error(`'${コマンドウィンドウセレクタ}'にspanタグが見つかりません`);

        this.ボタン要素リスト.forEach(x => x.onclick = this.ボタンをクリックする.bind(this));
    }

    async 表示する(コマンドリスト) {
        for (let i = 0; i < this.名称要素リスト.length; i++) {
            if (コマンドリスト.length <= i) {
                this.ボタン要素リスト[i].classList.toggle('消去', true);
                continue;
            }
            this.ボタン要素リスト[i].classList.toggle('消去', false);
            this.名称要素リスト[i].innerHTML = コマンドリスト[i].名称;
        }
        this.コマンドリスト = コマンドリスト;
        this.コマンドウィンドウ要素.classList.toggle('消去', false);
        this.以前のクリックハンドラ = this.スクリーン要素.onclick;
        this.スクリーン要素.onclick = this.ウィンドウ外をクリックする.bind(this);
        return new Promise(resolve => this.resolve = resolve);
    }

    async ウィンドウ外をクリックする() {
        this.コマンドウィンドウ要素.classList.toggle('消去');
    }

    async ボタンをクリックする(event) {
        this.コマンドウィンドウ要素.classList.toggle('消去', true);
        event.stopPropagation();
        this.スクリーン要素.onclick = this.以前のクリックハンドラ;
        this.resolve(this.コマンドリスト[Number(event.currentTarget.value)].id);
    }
}

1. constructor() コンストラクタ

この部分は、クラスのインスタンスが作られるときに最初に呼び出されます。ウィンドウやボタンなどのHTML要素を取得し、操作できるようにします。

• スクリーンセレクタ：コマンドウィンドウが配置される「画面」を示すセレクタ（CSSセレクタの指定）。
• コマンドウィンドウセレクタ：コマンドを表示する「ウィンドウ」のセレクタ。

処理の流れ：

1. this.スクリーン要素 に「画面」要素を取得。
2. this.コマンドウィンドウ要素 に「コマンドウィンドウ」を取得。
3. ウィンドウ内のボタンタグ（<button>）や名前を表示するスパンタグ（<span>）をリストとして取得。
4. 各ボタンにクリックイベントを設定しておく（「this.ボタンをクリックする」を登録）。

ポイント：各ステップで、要素が見つからない場合はエラーとして処理を終了します（例：ボタンがない場合）

2. 表示する(コマンドリスト) メソッド

このメソッドは、コマンドウィンドウにコマンドを表示し、選択肢をユーザーに提示します。

処理の流れ：

1. コマンドリストを反映：
   • 入力されたコマンドリストに基づいて、ボタンと名前を表示。
   • リストの長さが不足している場合、そのボタンを隠す。
2. ウィンドウを表示：
   • コマンドウィンドウのCSSクラス消去（非表示状態）を削除。
3. クリックハンドラの変更：
   • ウィンドウ外（背景など）をクリックすると閉じる処理を登録。
4. Promise：
   • 選択が完了したら、その結果（id）を返す仕組みになっています。

ポイント：Promise は、非同期処理が完了するまで待つ仕組みを提供します

3. ウィンドウ外をクリックする() メソッド

ウィンドウ外の画面部分がクリックされたとき、コマンドウィンドウを非表示にします。 （例：ユーザーが選択せずに閉じたいときの処理）

4. ボタンをクリックする(event) メソッド

ボタンがクリックされたときの処理を担当します。

処理の流れ：

1. ウィンドウを非表示に変更。
2. イベントを伝播しないようにevent.stopPropagation()を呼び出し。
3. 前のクリックハンドラ（画面のクリックイベントなど）を復元。
4. 選択されたボタンの値（id）をPromiseで返す。

sample.js　-　サンプルクラス

import { 画像管理クラス } from './imageManager.js'; // クラスをインポート
import { レイヤークラス } from './layer.js'; // クラスをインポート
import { ループ } from './loop.js'; // クラスをインポート
import { メッセージウィンドウクラス } from './messageWindow.js'; // クラスをインポート
import { コマンドウィンドウクラス } from './commandWindow.js'; // クラスをインポート
import { Data } from './data.js'; // クラスをインポート
import { スプライトクラス } from './sprite.js'; // クラスをインポート

export class サンプル {
    static async main() {
        await サンプル.使用する画像を読み込む();
        サンプル.ループ処理を作成する();
        サンプル.メッセージウィンドウを作成する();
        サンプル.コマンドウィンドウを作成する();
        サンプル.レイヤーを作成する();
        サンプル.読み込んだ画像でスプライトを作成する();
        サンプル.作成した物を使って画面に表示する();
    }

    static async 使用する画像を読み込む() {
        const 画像情報リスト = [
            { id: '町', src: 'img/bg02.jpg' },
            { id: 'プレイヤー', src: 'img/chara01.png' }
        ];
        サンプル.画像管理 = new 画像管理クラス();
        await サンプル.画像管理.画像を読み込む(画像情報リスト);
    }

    static ループ処理を作成する() {
        ループ.初期化する();
        ループ.開始する();
    }

    static メッセージウィンドウを作成する() {
        サンプル.メッセージウィンドウ = new メッセージウィンドウクラス(".スクリーン", ".メッセージウィンドウ");
        Data.オブジェクト管理["サンプル"] = サンプル;
    }

    static コマンドウィンドウを作成する() {
        サンプル.コマンドウィンドウ = new コマンドウィンドウクラス(".スクリーン", ".コマンドウィンドウ");
    }

    static レイヤーを作成する() {
        サンプル.レイヤー1 = new レイヤークラス('canvas.レイヤー1'); // 背景用のレイヤ
        サンプル.レイヤー2 = new レイヤークラス('canvas.レイヤー2'); // 前景用のレイヤ
        サンプル.レイヤー2.描画処理をループ処理に追加する();
    }

    static 読み込んだ画像でスプライトを作成する() {
        サンプル.背景01 = new スプライトクラス(サンプル.レイヤー1, サンプル.画像管理.取得する('町'), 0, 0, 640, 640);
        サンプル.人物01 = new スプライトクラス(サンプル.レイヤー2, サンプル.画像管理.取得する('プレイヤー'), 0, 0, 640, 640);
        サンプル.人物01正位置 = { x: サンプル.人物01.x, y: サンプル.人物01.y };
        サンプル.人物01.座標を設定する(640, 0, 1280, 640); //初期表示位置を設定する
    }

    static async 作成した物を使って画面に表示する() {
        サンプル.背景01.描画する();
        await サンプル.人物01.移動してフェードインする(-10, 0, サンプル.人物01正位置.x, 0, 1);
        ループ.処理を削除する(サンプル.レイヤー2);
        await サンプル.メッセージウィンドウ.表示する();
        await サンプル.メッセージウィンドウ.メッセージを表示する("プレイヤーは町の広場に来た<w>10</w>");

        let id = 0;
        while (1) {
            await サンプル.メッセージウィンドウ.メッセージを表示する("どうする？");
            id = await サンプル.コマンドウィンドウ.表示する([
                { id: 0, 名称: "話す" },
                { id: 1, 名称: "持物を見る" },
                { id: 2, 名称: "移動する" }
            ]);
            if (id == 0) {
                await サンプル.メッセージウィンドウ.メッセージを表示する("話が聞けそうな人は誰もいない<w>10</w>");
                continue;
            } else if (id==1) {
                await サンプル.メッセージウィンドウ.メッセージを表示する("今のところ、何も持っていない<w>10</w>");
                continue;
            }

            await サンプル.メッセージウィンドウ.メッセージを表示する("どこへ行く？");
            id = await サンプル.コマンドウィンドウ.表示する([
                { id: 0, 名称: "やめる" },
                { id: 1, 名称: "武器屋へ行く" },
                { id: 2, 名称: "防具屋へ行く" },
                { id: 3, 名称: "道具屋へ行く" },
                { id: 4, 名称: "宿屋へ行く" },
                { id: 5, 名称: "町を出る" }
            ]);
            if (id == 0) continue;
            else if (id == 1) {
                await サンプル.メッセージウィンドウ.メッセージを表示する("武器屋は開いていないようだ<w>10</w>");
                continue;
            } else if (id == 2) {
                await サンプル.メッセージウィンドウ.メッセージを表示する("防具屋は開いていないようだ<w>10</w>");
                continue;
            } else if (id == 3) {
                await サンプル.メッセージウィンドウ.メッセージを表示する("道具屋は開いていないようだ<w>10</w>");
                continue;
            } else if (id == 4) {
                await サンプル.メッセージウィンドウ.メッセージを表示する("宿屋は開いていないようだ<w>10</w>");
                continue;
            }
            await サンプル.メッセージウィンドウ.メッセージを表示する("まだ装備が整っていない<w>10</w>");
        }
    }
}

addEventListener('load', サンプル.main);

1. プログラムの全体像

このコードの目的は次の通り：

• 必要な画像を読み込み、それを画面に表示する。
• ユーザーが選択肢（コマンドウィンドウ）を選んで進行できる仕組みを提供する。
• メッセージウィンドウを使って物語や状況を表示する。

2. 必要なクラスのインポート

• この部分で外部ファイル（モジュール）からクラスを読み込みます。

  import { 画像管理クラス } from './imageManager.js';
  import { レイヤークラス } from './layer.js';
  

  読み込まれたクラスは、このプログラムの中で使用されます。

3. メイン処理 (main メソッド)

• このプログラムのスタート地点です。
• 次の手順でゲームの準備を整えます：
  1. 必要な画像をロードする。
  2. ゲームループ（繰り返し処理）を開始する。
  3. メッセージウィンドウやコマンドウィンドウを作成する。
  4. 読み込んだ画像を使ってスプライト（キャラクターや背景）を画面に描画する。
  5. 描画された画面に基づいてメッセージと選択肢を表示する。

4. 画像読み込み (使用する画像を読み込む メソッド)

• 使用する画像のリスト（例：「町」や「プレイヤー」）を準備し、それを読み込みます。
• 読み込まれた画像は 画像管理クラス に保存され、後から使うことができます。

5. レイヤーの作成 (レイヤーを作成する メソッド)

• レイヤーはゲーム画面の「背景」と「前景」を分けるために使います。
• たとえば：
  • 背景（レイヤー1）は町の画像を表示。
  • 前景（レイヤー2）はキャラクターや移動する物を表示。

6. スプライトの作成 (読み込んだ画像でスプライトを作成する メソッド)

• スプライトは画面に表示される画像（例：背景やキャラクター）のこと。
• このメソッドでは以下を設定します：
  • 背景スプライト：町の画像を表示。
  • キャラクタースプライト：「プレイヤー」の初期位置を設定。

7. メッセージウィンドウの作成

• メッセージを表示するためのウィンドウ（吹き出しのようなもの）を作ります。
• たとえば「プレイヤーは町の広場に来た」という物語を表示します。

8. コマンドウィンドウの作成

• 画面に「話す」「持物を見る」「移動する」などの選択肢を表示するウィンドウを用意します。
• プレイヤーが選択肢をクリックすると、それに対応する処理が実行されます。

9. プログラムの流れ

1. 背景とキャラクターを表示：
   • 画面に背景とキャラクター画像を描画します。
   • キャラクターはフェードイン（徐々に表示）します。
2. メッセージを表示：
   • メッセージウィンドウに「プレイヤーは町の広場に来た」などの文章を表示します。
3. コマンドの選択：
   • プレイヤーが選択肢をクリックし、次の行動を決めます。
   • たとえば、「話す」を選ぶと「話が聞けそうな人は誰もいない」と表示されます。
4. 繰り返し処理：
   • どの選択肢を選んでも、また次の選択肢が表示されます。

以下のようなメッセージウィンドウを表示する方法を記します。

• 一定時間ごとに1文字づつ表示します。
• メッセージを表示中に画面内をクリックすると一括で表示します。
• メッセージ内に以下のような制御を入れることが出来ます。
  1. 改行：メッセージを途中で改行します。
  2. クリア：メッセージを好きな箇所でクリアします。
  3. クリック待ち：メッセージ表示をクリックされるか指定した時間まで停止します。
  4. 変数：変数を埋め込むことで、メッセージを使いまわすことができます。サンプルでは時刻の表示に変数を使っています。

ファイル構成

ファイルとそれを入れるフォルダーを以下のような構成します。
※前回と同じファイル名でも内容が変わっている場合があります。
※背景と人物の画像はBing Image Creatorで生成しています（AI生成）。

index.html　-　HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=660,user-scalable=no,shrink-to-fit=yes">
    <title>メッセージウィンドウを作成する方法</title>
    <link href="css/sample.css" rel="stylesheet" />
</head>
<body>
    <script type="module" src="js/sample.js"></script>

    <aside class="画面更新情報">
        <p>
            リフレッシュレート：<span class="リフレッシュレート">0</span>Hz
            ／フレームレート：<span class="フレームレート">0</span>fps
        </p>
    </aside>
    <main class="スクリーン">
        <canvas class="レイヤー1" width="640" height="640" aria-label="グラフィックコンテンツ"></canvas>
        <article class="メッセージウィンドウ 消去 透明化">
            <p class="メッセージエリア">
                <span class="メッセージ"></span>
                <span class="カーソル 点滅 不可視化">■</span>
            </p>
        </article>
    </main>
</body>
</html>

1. <head> セクション

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=660,user-scalable=no,shrink-to-fit=yes">
    <title>メッセージウィンドウを作成する方法</title>
    <link href="css/sample.css" rel="stylesheet" />
</head>

• <meta charset="UTF-8"> セクション：日本語を含む多言語を正しく表示するためにUTF-8を使用しています。
• <meta name="viewport"> セクション：モバイル端末での表示を最適化するため、幅を660pxに固定し、ユーザーがズームできないよう設定しています。
• <title> セクション：ブラウザのタブに表示されるページタイトルです。
• <link href="css/sample.css" rel="stylesheet"> セクション：別ファイル（css/sample.css）からスタイル情報を読み込む設定です。

2. <body> セクション

<script type="module" src="js/sample.js"></script>

• type="module"：モジュール化されたJavaScriptファイルを読み込みます。
• src="js/sample.js"：読み込む外部JavaScriptファイルを設定しています。このスクリプトにはメッセージウィンドウの動作等が定義されています。

3. 画面の更新情報

<aside class="画面更新情報">
    <p>
        リフレッシュレート：<span class="リフレッシュレート">0</span>Hz
        ／フレームレート：<span class="フレームレート">0</span>fps
    </p>
</aside>

• 役割：ここでは、画面の更新状況（リフレッシュレートとフレームレート）を表示しています。
• クラス名の設定：
  • "画面更新情報"：全体のコンテナのスタイリング（例：中央揃えやフォントサイズなど）に対応。
  • "リフレッシュレート" や "フレームレート"：動的に数値が書き換えられる部分となります。

4. スクリーンエリア

<main class="スクリーン">
    <canvas class="レイヤー1" width="640" height="640" aria-label="グラフィックコンテンツ"></canvas>
    <article class="メッセージウィンドウ 消去 透明化">
        <p class="メッセージエリア">
            <span class="メッセージ"></span>
            <span class="カーソル 点滅 不可視化">■</span>
        </p>
    </article>
</main>

1. Canvas要素：

   <canvas class="レイヤー1" width="640" height="640" aria-label="グラフィックコンテンツ"></canvas>
   

   • Canvasタグ：描画エリアを提供します。このコードでは画像やスプライトを表示する「レイヤー」として使われます。
   • 属性：
     • class="レイヤー1"：CSSやJavaScriptで制御するためのクラス名。
     • width="640" height="640"：Canvasの横幅と高さを指定。
     • aria-label="グラフィックコンテンツ"：アクセシビリティのためにコンテンツの説明を付けています。
2. メッセージウィンドウ：

   <article class="メッセージウィンドウ 消去 透明化">
       <p class="メッセージエリア">
           <span class="メッセージ"></span>
           <span class="カーソル 点滅 不可視化">■</span>
       </p>
   </article>
   

   • <article class="メッセージウィンドウ 消去 透明化">：
     • 「メッセージウィンドウ」クラス：このクラスは、吹き出しやダイアログのように画面上にメッセージを表示するためのウィンドウのスタイルを定義しています。
     • 「消去」クラス：CSS では display: none; として定義され、初期状態ではウィンドウが存在しているものの画面には表示されません。
     • 「透明化」クラス：CSS では opacity: 0; の設定になっており、見た目を透明にして隠しています。 ※「消去」と「透明化」を組み合わせて、ウィンドウを非表示状態にセットしています。
   • <p class="メッセージエリア">：メッセージテキストが表示される領域です。CSS によりスクロールなどの設定がされています。
   • <span class="メッセージ">：実際のメッセージテキストを 1 文字ずつ追加して表示していく部分です。
   • <span class="カーソル 点滅 不可視化">：
     • 「カーソル」クラス：メッセージ表示時に、クリック待ちを示すためのアイコン（ここでは■）の表示に使います。
     • 「点滅」クラス：CSS の @keyframes 点滅 や animation 設定を使って、「■」が点滅するアニメーションが適用されます。
     • 「不可視化」クラス：CSS では visibility: hidden; として定義され、初期状態でカーソル自体が見えないようにしています。

sample.css　-　CSS

:root {
    --通常文字サイズ: 26px;
    --通常文字行高さ: 38px;
    --小文字サイズ: 18px;
    --小文字行高さ: 24px;
    --黒い影: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 2px 0px 1px #000, -2px -0px 1px #000, 0px 2px 1px #000, 0px -2px 1px #000;
    --トランジションスピード: 0.8s;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior-y: none;
}

.画面更新情報 {
    text-align: center;
    font-size: var(--小文字サイズ);
    line-height: var(--小文字行高さ);
    color: #333;
}

.スクリーン {
    width: 640px;
    height: 640px;
    margin: 20px auto;
    border: 2px solid #ccc;
    position: relative;
    background-color: black;
}

canvas {
    position: absolute;
}

.不可視化 {
    visibility: hidden;
}

.透明化 {
    opacity: 0;
}

.消去 {
    display: none;
}

.表示 {
    display: block;
}

@keyframes 点滅 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.点滅 {
    animation: 点滅 1s ease-out infinite;
}

.メッセージウィンドウ {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    border: solid 3px white;
    padding: 12px 17px;
    margin: 5px;
    transition: opacity var(--トランジションスピード) ease-out;
}

    .メッセージウィンドウ .メッセージエリア {
        padding: 3px;
        margin: 0px;
        font-size: var(--通常文字サイズ);
        line-height: var(--通常文字行高さ);
        color: white;
        text-shadow: var(--黒い影);
        width: 584px;
        height: 154px;
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .メッセージウィンドウ .メッセージエリア::-webkit-scrollbar {
            display: none;
        }

    .メッセージウィンドウ .カーソル {
        font-size: var(--通常文字サイズ);
        display: inline-block;
        transform: translateY(-2px);
    }

1. 変数（:rootセクター）

:root {
    --通常文字サイズ: 26px;
    --通常文字行高さ: 38px;
    --小文字サイズ: 18px;
    --小文字行高さ: 24px;
    --黒い影: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 2px 0px 1px #000, -2px -0px 1px #000, 0px 2px 1px #000, 0px -2px 1px #000;
    --トランジションスピード: 0.8s;
}

• 目的：ここでは CSS 変数を定義しています。たとえば、文章の基本サイズや行の高さ、テキストに付ける影、アニメーションの速さなど、後で何度も使う数値を 1か所で管理できるようにしています。
• 例：
  • --通常文字サイズ は 26px に設定されており、通常のテキストサイズとして使用。
  • --黒い影 は、文字を際立たせるために複数の影を短いオフセットとともに定義しています。
  • --トランジションスピード はアニメーションや状態変化の際の速度（ここでは 0.8秒）を指定しています。

2. 全体の設定（bodyセレクター）

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior-y: none;
}

• 目的：ページ全体の基本となるスタイルを設定しています。
• 全体のデザイン：
  • font-family：フォントの種類を指定。Arialがメイン。
  • margin と padding：0 にすることで、ブラウザの初期余白をリセット。
  • background-color：薄いグレー（#f4f4f4）で全体の背景色に指定。
• 特殊な設定：
  • -webkit-tap-highlight-color：スマホでタップしたときのハイライトを無効化。
  • overscroll-behavior-y：スクロールの挙動を制御することで、特にスマートフォンなどでの意図しない操作を防いでいます。

3. 更新情報のスタイル（.画面更新情報）

.画面更新情報 {
    text-align: center;
    font-size: var(--小文字サイズ);
    line-height: var(--小文字行高さ);
    color: #333;
}

• 更新情報（リフレッシュレートやフレームレート）の文字を中央揃えにし、小さなフォントサイズで表示しています。

4. スクリーンエリアの設定（.スクリーン）

.スクリーン {
    width: 640px;
    height: 640px;
    margin: 20px auto;
    border: 2px solid #ccc;
    position: relative;
    background-color: black;
}

• 目的：画面のメイン表示部分となるエリアのスタイル設定です。
• ポイント：
  • width & height：幅と高さを640pxずつ固定。
  • margin: 20px auto：上下に20pxの余白を作り、中央に配置。
  • border：灰色（#ccc）の2px枠線を追加。
  • background-color：背景を黒に設定。
  • position: relative：内部に配置する要素（たとえば canvas やメッセージウィンドウ）の絶対配置の基準となります。

5. Canvas（キャンバス）の設定

canvas {
    position: absolute;
}

• 目的：描画領域として利用する canvas 要素を絶対配置にしています。
• ポイント：これにより、canvas は親要素（ここでは .スクリーン）の中で自由に配置できるようになります。

6. 表示や非表示を制御するクラス

.不可視化 {
    visibility: hidden;
}

.透明化 {
    opacity: 0;
}

.消去 {
    display: none;
}

.表示 {
    display: block;
}

• 目的：HTML 要素の表示状態を切り替えるための便利なクラスを定義しています。
• 違い：
  • .不可視化：visibility: hidden; は、その領域はレイアウトに残るが見えなくなる。
  • .透明化：opacity: 0; は、要素が透明になり見えなくなるが、クリックなどのイベントは受ける場合もある。
  • .消去：display: none; は、要素自体を完全に除去してレイアウトに影響を与えない。
  • .表示：display: block; は、要素を改めてブロック表示させます。

7. 点滅アニメーションの定義

7.1 キーフレームの定義

@keyframes 点滅 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

• 目的：点滅のアニメーションです。
• ポイント：
  • 0%（開始時）と 100%（終了時）の時点で透明度 opacity が 1 ＝完全に表示
  • 50% の時点で透明度が 0 ＝完全に消える
  • これにより、要素が周期的に現れたり消えたりします

7.2 点滅クラスの適用

.点滅 {
    animation: 点滅 1s ease-out infinite;
}

• 目的：このクラスを要素につけると、先ほど定義した点滅のアニメーションが適用されます。
• ポイント：
  • animation：点滅 1s ease-out infinite;
    • アニメーション名は「点滅」
    • アニメーション期間は 1 秒
    • ease-out により、終了に向かってゆっくり変化する効果
    • infinite で繰り返し無限に実行

8. メッセージウィンドウの設定

.メッセージウィンドウ {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    border: solid 3px white;
    padding: 12px 17px;
    margin: 5px;
    transition: opacity var(--トランジションスピード) ease-out;
}

• メッセージウィンドウ全体のデザイン：
  • 背景：半透明の黒（rgba(0, 0, 0, 0.7)）。
  • 枠線：白色の3px枠線。
  • アニメーション：transition により透明度（opacity）を滑らかに変化させる。

8.1 メッセージエリア

.メッセージウィンドウ .メッセージエリア {
    padding: 3px;
    margin: 0px;
    font-size: var(--通常文字サイズ);
    line-height: var(--通常文字行高さ);
    color: white;
    text-shadow: var(--黒い影);
    width: 584px;
    height: 154px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.メッセージウィンドウ .メッセージエリア::-webkit-scrollbar {
    display: none;
}

• 文字デザイン：
  • font-size と line-height は設定済みの変数を使用。
  • 白色の文字（color: white）に影（text-shadow）を追加。
• スクロールバー非表示：
  • overflow: scroll; により、テキストがあふれる場合はスクロールできるように設定。ただし、IE と Firefox のスクロールバーは none で非表示にしています。
  • また、WebKit系ブラウザではスクロールバーを完全に非表示にする設定も追加。

8.2 カーソル（■）の設定

.メッセージウィンドウ .カーソル {
    font-size: var(--通常文字サイズ);
    display: inline-block;
    transform: translateY(-2px);
}

• 目的：メッセージウィンドウ内の「カーソル」要素（■）をスタイリングします。
• ポイント：
  • transform: translateY(-2px); は、カーソルがテキストの高さに合わせて少し位置調整されるための設定です。
  • 先ほどの「点滅」クラスを付けると、点滅するカーソルとして動作させることができます。

com.js　-　共通処理クラス

Com クラス は共通で使用できる処理をまとめています。
一時停止と時間フォーマットの２つがあります。

export class Com {
    static 一時停止(時間) {
        return new Promise(resolve => setTimeout(resolve, 時間 * 1000));
    }

    static シリアル値を時分秒に変換する(シリアル値) {
        // シリアル値をDateオブジェクトに変換
        const date = new Date(シリアル値);

        // 時間、分、秒を取得
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();

        // フォーマットして返す
        return `${hours}時${minutes}分${seconds}秒`;
    }
}

1. 一時停止(時間) メソッド

役割：指定した時間だけプログラムを停止する機能を提供します。例えば、ゲームやタイマー機能で使われることがあります。

仕組み：

• setTimeout という JavaScriptの関数を利用して、一時停止を実現します。
• setTimeout は、第2引数で指定した時間が経過した後に、第1引数で指定した関数をコールします。
• Promise を使って、停止が終わった後に次の処理を続けられるようにしています。

コードの流れ：

1. setTimeout を使って指定した時間（秒×1000ミリ秒）だけ待ちます。
2. 待ち時間が終わったら resolve で「再開していいよ」と合図します。

2. シリアル値を時分秒に変換する(シリアル値) メソッド

役割：シリアル値（数値形式の時刻）を、「〇〇時〇〇分〇〇秒」という形に変換して表示します。

仕組み：

• JavaScript の Date オブジェクトを利用してシリアル値を時間に変換します。
• 変換された日時から「時」「分」「秒」を取り出します。
• 最後にフォーマットして使いやすい形（日本語の時刻表記）にします。

コードの流れ：

1. new Date(シリアル値) でシリアル値を日時オブジェクトに変換します。
2. getHours、getMinutes、getSeconds でそれぞれ「時」「分」「秒」を取得します。
3. フォーマットして、「〇〇時〇〇分〇〇秒」の形で返します。

data.js　-　データ管理クラス

この Data クラスは、文字列に埋め込まれた <var>変数名</var> の形式で記述された変数を、事前に登録されたデータ（オブジェクト管理）から値を引き出して置き換えます。
イメージとしては、テンプレートに変数名を埋め込んでおき、実行時にそれを動的に値へ変える仕組みです。

export class Data {
    static オブジェクト管理 = {};

    static 文字列内の変数を値に変換する(文字列) {
        let 変換結果 = 文字列;
        const varList = 変換結果.match(/<var>[^<]*<\/var>/g);
        if (!varList) return 変換結果; // 変数が無い場合は何もせずにそのまま返す

        varList.forEach(varTag => {
            const 変数名 = varTag.replace(/<var>([^<]*)<\/var>/, "$1");
            const 値 = Data.変数の値を取得する(変数名);
            変換結果 = 変換結果.replace(varTag, 値); // <var>・・・</var>を値に置き換える
        });
        return 変換結果;
    }

    static 変数の値を取得する(変数名) {
        const 名称リスト = 変数名.split(".");
        let 値 = Data.オブジェクト管理;

        for (const 名称 of 名称リスト) {
            値 = 値?.[名称];
            if (値 === undefined || 値 === null) return ""; // 値がない場合は空文字を使用
        }
        return 値;
    }
}

1. オブジェクト管理：静的プロパティ

static オブジェクト管理 = {};

• このプロパティは「変数名と値」を管理するための大元のデータ構造です。
• 登録されたデータを基に、変数名の値を検索します。

例: もし オブジェクト管理 = { "user": { "name": "プレイヤー", "level": 25 } } となっている場合、user.name の値は "プレイヤー" となります。

2. 文字列内の変数を値に変換する：メソッド

役割：

• 入力：変換対象の文字列（例: "こんにちは、<var>user.name</var>さん！"）
• 出力：変換結果の文字列（例: "こんにちは、プレイヤーさん！"）

コードの流れ：

1. 変数タグを探す:

   const varList = 変換結果.match(/<var>[^<]*<\/var>/g);
   

   この正規表現を使って <var>変数名</var> の形を探し出します。例えば、<var>user.name</var> が該当します。
2. 変数名を取り出す:

   const 変数名 = varTag.replace(/<var>([^<]*)<\/var>/, "$1");
   

   この処理で <var> と </var> を取り除き、純粋な変数名（例: user.name）を取り出します。
3. 値に置き換える:

   const 値 = Data.変数の値を取得する(変数名);
   変換結果 = 変換結果.replace(varTag, 値);
   

   Data.変数の値を取得する メソッドで値を検索し、該当する場合は置き換えます。

3. 変数の値を取得する：メソッド

このメソッドは、「変数名の構造」を辿りながら オブジェクト管理 の中から適切な値を見つけ出します。

コードの流れ：

1. 変数名を分割:

   const 名称リスト = 変数名.split(".");
   

   例えば、user.name なら ["user", "name"] に分解されます。
2. 値を辿る:

   値 = 値?.[名称];
   

   名前リストを順番に参照しながらネストされた構造を探索します。

   例：

   • オブジェクト管理 = { "user": { "name": "プレイヤー" } }
   • 変数名 = "user.name"
   • 処理結果: "プレイヤー"
3. 値が存在しなければ空文字を返す:

   if (値 === undefined || 値 === null) return "";
   

4. 全体の動作イメージ

例えば、以下のように使われます：

Data.オブジェクト管理 = {
    user: { name: "プレイヤー", level: 25 },
    system: { time: "12:00" }
};

const result = Data.文字列内の変数を値に変換する(
    'こんにちは、<var>user.name</var>さん。現在の時刻は<var>system.time</var>です。'
);

console.log(result);
// 結果: "こんにちは、プレイヤーさん。現在の時刻は12:00です。"

messageWindow.js　-　メッセージウィンドウクラス

import { Data } from './data.js'; // クラスをインポート
import { ループ } from './loop.js'; // クラスをインポート
import { Com } from './com.js'; // クラスをインポート

class 制御情報クラス {
    constructor(メッセージ, メッセージエリア要素) {
        this.メッセージ = メッセージ;
        this.表示位置 = 0;
        this.表示メッセージ = "";
        this.クリック待ちフラグ = false;
        this.表示フレームカウンタ = 0;
        this.クリック待ちフレームカウンタ = 0;
        this.スクロール高さ = メッセージエリア要素.scrollHeight;
        this.一括表示フラグ = false;
    }
}

export class メッセージウィンドウクラス {
    constructor(スクリーンセレクタ, メッセージウィンドウセレクタ, 出現時間 = 1.0
        , 表示フレーム間隔 = 2, クリック待ち時間 = 30) {
        this.スクリーン要素 = document.querySelector(スクリーンセレクタ);
        this.メッセージウィンドウ要素 = this.スクリーン要素.querySelector(メッセージウィンドウセレクタ);
        this.メッセージエリア要素 = this.メッセージウィンドウ要素.querySelector(".メッセージエリア");
        this.メッセージ要素 = this.メッセージエリア要素.querySelector(".メッセージ");
        this.カーソル要素 = this.メッセージエリア要素.querySelector(".カーソル");
        this.出現時間 = 出現時間;
        this.表示フレーム間隔 = 表示フレーム間隔;
        this.クリック待ちフレーム数 = this.基本クリック待ちフレーム数 = クリック待ち時間 > 0 ? ループ.フレームレート * クリック待ち時間 : 0;
    }

    メッセージを表示する(メッセージ) {
        const 制御情報 = new 制御情報クラス(Data.文字列内の変数を値に変換する(メッセージ), this.メッセージエリア要素);
        this.スクリーン要素.onclick = this.メッセージ表示時にクリックする.bind(this, 制御情報);
        return new Promise(resolve => {
            ループ.処理を追加する(this, () => {
                if (this.クリック待ち時の処理を行う(制御情報)) return;

                // 表示フレーム間隔でメッセージを表示する
                if (0 < 制御情報.表示フレームカウンタ--) return;
                制御情報.表示フレームカウンタ = this.表示フレーム間隔;

                // 指定されたメッセージを全て表示したら処理を終了する
                if (制御情報.表示位置 >= 制御情報.メッセージ.length) {
                    ループ.処理を削除する(this);
                    this.スクリーン要素.onclick = null;
                    resolve();
                    return;
                }

                if (this.メッセージを一括で表示する(制御情報)) return;
                if (this.制御タグを取得する(制御情報)) return;
                this.指定した文字数のメッセージを表示する(制御情報, 1);
            });
        });
    }

    クリック待ち時の処理を行う(制御情報) {
        if (!制御情報.クリック待ちフラグ) return false;

        // クリック待ち時間（クリック待ちフレーム数）が0の場合は無限にクリックを待つ
        if (!this.クリック待ちフレーム数) return true;

        // クリック待ち時間までクリックを待つ
        if (this.クリック待ちフレーム数 > 制御情報.クリック待ちフレームカウンタ++) return true;

        制御情報.クリック待ちフレームカウンタ = 0;
        this.クリック待ち時にクリックする(制御情報);
        return true;
    }

    メッセージを一括で表示する(制御情報) {
        if (!制御情報.一括表示フラグ) return false;

        // 制御タグまでの文字を一括で表示する
        let 表示文字数 = 制御情報.メッセージ.indexOf('<', 制御情報.表示位置) - 制御情報.表示位置;
        if (表示文字数 == 0) return false; // 次の文字が制御タグだった場合
        if (表示文字数 < 0) {
            // 制御タグが無い場合は最後まで表示する
            表示文字数 = 制御情報.メッセージ.length - 制御情報.表示位置;
        }
        this.指定した文字数のメッセージを表示する(制御情報, 表示文字数);
        return true;
    }

    指定した文字数のメッセージを表示する(制御情報, 文字数) {
        制御情報.表示メッセージ += 制御情報.メッセージ.substring(制御情報.表示位置, 制御情報.表示位置 + 文字数);
        制御情報.表示位置 += 文字数;
        this.メッセージ要素.innerHTML = 制御情報.表示メッセージ;
        if (制御情報.スクロール高さ == this.メッセージエリア要素.scrollHeight) return;
        this.メッセージエリア要素.scrollTop = 制御情報.スクロール高さ = this.メッセージエリア要素.scrollHeight;
        return;
    }

    制御タグを取得する(制御情報) {
        if (制御情報.メッセージ.charAt(制御情報.表示位置) != '<') return false;
        if (this.制御タグの処理を行う(制御情報, '<br>', () => 制御情報.表示メッセージ += '<br>')) return true; // 改行する
        if (this.制御タグの処理を行う(制御情報, '<c>', () => 制御情報.表示メッセージ = '')) return true; // クリアする
        if (this.クリック待ちにする(制御情報)) return true;
        return false;
    }

    制御タグの処理を行う(制御情報, タグ名, 処理) {
        if (!制御情報.メッセージ.startsWith(タグ名, 制御情報.表示位置)) return false;
        制御情報.表示位置 += タグ名.length;
        処理();
        this.メッセージ要素.innerHTML = 制御情報.表示メッセージ;
        return true;
    }

    クリック待ちにする(制御情報) {
        const タグ名 = '<w>';
        if (!制御情報.メッセージ.startsWith(タグ名, 制御情報.表示位置)) return false;
        const 取得メッセージ = 制御情報.メッセージ.substring(制御情報.表示位置);
        const wList = 取得メッセージ.match(/^<w>\d*<\/w>/);
        if (wList) {
            const 待ち時間 = Number(wList[0].replace(/<w>(\d*)<\/w>/, "$1"));
            制御情報.表示位置 += wList[0].length;
            this.クリック待ちフレーム数 = 待ち時間 > 0 ? ループ.フレームレート * 待ち時間 : 0;
        } else {
            制御情報.表示位置 += タグ名.length;
        }
        制御情報.クリック待ちフラグ = true;
        制御情報.一括表示フラグ = false;
        this.スクリーン要素.onclick = this.クリック待ち時にクリックする.bind(this, 制御情報);
        this.カーソル要素.classList.toggle('不可視化', false);
        return true;
    }

    クリック待ち時にクリックする(制御情報) {
        制御情報.クリック待ちフラグ = false;
        this.クリック待ちフレーム数 = this.基本クリック待ちフレーム数;
        this.カーソル要素.classList.toggle('不可視化' , true);
        this.スクリーン要素.onclick = this.メッセージ表示時にクリックする.bind(this, 制御情報);
    }

    メッセージ表示時にクリックする(制御情報) {
        制御情報.一括表示フラグ = true;
    }

    async 表示する() {
        this.メッセージウィンドウ要素.classList.replace('消去', '表示');
        await Com.一時停止(this.出現時間); // 少しずつ出現する時間
        this.メッセージウィンドウ要素.classList.toggle('透明化', false);
        await Com.一時停止(this.出現時間); // 出現した後に少し待つ
    }

    async 消去する() {
        this.メッセージウィンドウ要素.classList.toggle('透明化', true);
        this.メッセージウィンドウ要素.classList.replace('表示', '消去');
        this.メッセージ要素.innerHTML = "";
    }
}

1. 全体の流れ

このコードは、以下の3つの主要なクラスを利用しています：

• Dataクラス：文字列内に変数を埋め込んで値を変換します。
• ループクラス：アニメーションや継続的な処理を管理します。
• Comクラス：一時停止や時刻表示などの補助的な処理を提供します。

さらに、以下の2つのクラスを新たに定義しています：

• 制御情報クラス：メッセージを管理する内部データ構造。
• メッセージウィンドウクラス：メッセージウィンドウの動作を管理します。

2. 制御情報クラス

このクラスは、文字表示の進捗状況を管理します。

プロパティの内容：

• メッセージ：「表示する全文字列」。 ※ここには、変数の値に変換された後のテキストが格納されます。
• 表示位置：現在、どこまで文字列を表示済みかのインデックスです。
• 表示メッセージ：実際に画面上に表示中の文字列。
• クリック待ちフラグ：制御タグ（例えば <w>）でクリック待ち状態になったときに true となります。
• 表示フレームカウンタ：１文字表示するまでのフレーム間隔を管理するためのカウンタ。
• クリック待ちフレームカウンタ：クリック待ちの時間（フレーム数）をカウントするためのもの。
• スクロール高さ：メッセージエリアのスクロール位置を更新する必要があるかどうかを判断するため、初期のスクロール高さを記録します。
• 一括表示フラグ：ユーザーが画面（スクリーン）をクリックすると、通常の１文字ずつの表示ではなく「一括表示」に切り替えるためのフラグです。

3. メッセージウィンドウクラス

■ コンストラクタ

このクラスのコンストラクタでは、引数としてセレクタ（例えば、スクリーンおよびメッセージウィンドウの要素を指定する文字列）が渡されます。また、出現時間、１文字ずつ表示する際のフレーム間隔、クリック待ち時間（フレーム換算）を受け取ります。 処理の流れは以下のとおり：

1. DOM要素の取得：
   • 画面全体を示す「スクリーン要素」
   • その中の「メッセージウィンドウ要素」
   • ウィンドウ内の「メッセージエリア」および「メッセージ」要素
   • 最後に、カーソル（点滅させる対象）の要素を取得
2. 各種パラメータの保持：出現時間や表示フレーム間隔、そしてクリック待ちフレーム数（ループのフレームレート×待ち時間）を設定しています。

4. メッセージの表示処理

■ メッセージを表示する：メソッド

1. 初期設定：
   • 渡されたメッセージ（変数の置換済みのテキスト）とメッセージエリア要素の情報をもとに、新しい 制御情報クラス のインスタンスを作成します。
2. クリックイベントの設定：
   • 画面（スクリーン要素）をクリックすると、メッセージ表示時にクリックする メソッド（後述）で処理が走るようにします。
3. ループ処理の追加：
   • 外部のループ管理（requestAnimationFrame を利用している ループ クラス）に対して、このメッセージ表示処理関数を登録します。
4. 各フレームでの動作：
   • クリック待ちの場合は、クリックされるか指定した時間が経過するまで待機します。
   • それ以外の場合、設定されたフレーム間隔ごとに表示する文字数を更新します。
   • もし全メッセージが表示されていれば、ループ処理を削除して Promise を解決（終了）します。
5. 一括表示の確認：
   • ユーザーのクリックによって一括表示フラグが true になっている場合は、通常の１文字ずつの表示ではなく、次の制御タグ（< で始まる部分）までのテキストを一気に表示します。
6. 制御タグの処理：
   • 現在の位置が < なら、制御タグを取得する でタグ内容を処理します（たとえば <br> なら改行、<c> ならメッセージクリア、<w> ならクリック待ち）。
7. 最後は１文字ずつ表示：
   • 上記いずれにも該当しなければ、指定した文字数のメッセージを表示する メソッドで１文字だけ追加して表示します。

5. 制御タグの処理

■ 制御タグの例

• <br>：改行を挿入するタグ。
  • 処理関数により、表示中のメッセージに <br> を追加します。
• <c>：表示中のメッセージをクリアするタグ。
  • このタグを検出すると、表示文字列を空文字にリセットします。
• <w>数字</w>：クリック待ちタグ。
  • ここではタグ内の数字を読み取り、その秒数分（ループのフレームレート×秒数）のクリック待ち状態にします。
  • 同時に「クリック待ちフラグ」が true になり、カーソルの表示も切り替えられます（不可視を無効にする）。

6. ユーザークリックでの一括表示

■ メッセージ表示時にクリックする：メソッド

• ユーザーが画面（スクリーン）をクリックすると、通常は１文字ずつ表示されるところを、一括表示フラグを true に設定します。
• 次のループ処理時に、メッセージを一括で表示する が呼ばれ、次の制御タグまでのテキストをまとめて表示します。

7. 表示・消去の演出

■ 表示する：メソッド

• メッセージウィンドウを出現させる際に、CSS クラスを切り替えます。
  1. 初めは非表示状態（たとえば、消去 クラスが付いている）から、表示 クラスに切り替えます。
  2. その後、指定した出現時間だけ一時停止（Com.一時停止 を使用）し、さらに透明状態を解除（透明化 クラスの切替）して、ふわっと表示されるようにします。

■ 消去する：メソッド

• 表示されたメッセージウィンドウを非表示にするため、透明度を下げ、表示 クラスを 消去 に変更し、メッセージ内容をクリアします。

sample.js　-　サンプルクラス

このプログラムは次のような処理を行います：

1. 必要なクラスをインポートします。
2. メイン処理 (main) を実行します。
3. ループ処理や画面描画を初期化します。
4. 画像を読み込み、それを基にスプライトを作成します。
5. 作成したスプライトやメッセージウィンドウを表示します。

import { 画像管理クラス } from './imageManager.js'; // クラスをインポート
import { スプライトクラス } from './sprite.js'; // クラスをインポート
import { レイヤークラス } from './layer.js'; // クラスをインポート
import { ループ } from './loop.js'; // クラスをインポート
import { メッセージウィンドウクラス } from './messageWindow.js'; // クラスをインポート
import { Data } from './data.js'; // クラスをインポート
import { Com } from './com.js'; // クラスをインポート

class サンプル {
    static async main() {
        サンプル.ループ処理を作成する();
        サンプル.メッセージウィンドウを作成する();
        サンプル.レイヤーを作成する();
        if (!await サンプル.使用する画像を読み込む()) return;
        サンプル.読み込んだ画像でスプライトを作成する();
        サンプル.作成した物を使って画面に表示する();
    }

    static ループ処理を作成する() {
        ループ.初期化する();
        ループ.開始する();
    }

    static メッセージウィンドウを作成する() {
        サンプル.メッセージウィンドウ = new メッセージウィンドウクラス(".スクリーン", ".メッセージウィンドウ");
        Data.オブジェクト管理["サンプル"] = サンプル;
    }

    static レイヤーを作成する() {
        サンプル.レイヤー = new レイヤークラス('canvas.レイヤー1');
        ループ.処理を追加する(サンプル.レイヤー, サンプル.レイヤー.描画する.bind(サンプル.レイヤー));
    }

    static async 使用する画像を読み込む() {
        const 画像情報リスト = [
            { id: '町01', src: 'img/bg02.jpg' },
            { id: '人物01', src: 'img/chara01.png' }
        ];
        サンプル.画像管理 = new 画像管理クラス();
        return await サンプル.画像管理.画像を読み込む(画像情報リスト);
    }

    static 読み込んだ画像でスプライトを作成する() {
        サンプル.背景01 = new スプライトクラス(サンプル.レイヤー, サンプル.画像管理.取得する('町01'), 0, 0, 640, 640);
        サンプル.レイヤー.処理を追加する(サンプル.背景01, サンプル.背景01.描画する.bind(サンプル.背景01));
        サンプル.人物01 = new スプライトクラス(サンプル.レイヤー, サンプル.画像管理.取得する('人物01'), 0, 150, 640, 640);
        サンプル.人物01正位置 = { x: サンプル.人物01.x, y: サンプル.人物01.y };
        サンプル.人物01.座標を設定する(640, 150, 1280, 640); //初期表示位置を設定する
    }

    static async 作成した物を使って画面に表示する() {
        サンプル.主人公名 = "プレイヤー";
        サンプル.現時刻 = Com.シリアル値を時分秒に変換する(Date.now());

        await サンプル.人物01.移動してフェードインする(-10, 0, サンプル.人物01正位置.x, 0, 1);
        ループ.処理を削除する(サンプル.レイヤー);

        await サンプル.メッセージウィンドウ.表示する();
        await サンプル.メッセージウィンドウ.メッセージを表示する(
    "<var>サンプル.主人公名</var>は町を訪れた<w>5</w><br><c><var>サンプル.主人公名</var>はとりあえず町の人に今何時か聞いてみた<w><br>すると「<var>サンプル.現時刻</var>」だと教えてくれた<w>"
        );
        await サンプル.メッセージウィンドウ.消去する();

        while (1) {
            サンプル.現時刻 = Com.シリアル値を時分秒に変換する(Date.now());

            await サンプル.メッセージウィンドウ.表示する();
            await サンプル.メッセージウィンドウ.メッセージを表示する(
    "暫くして、<var>サンプル.主人公名</var>はまた何時なのか気になった<w>2</w><br>辺りの人に聞いてみると「<var>サンプル.現時刻</var>」だと教えてくれた<w>"
            );
            await サンプル.メッセージウィンドウ.消去する();
        }
    }
}

addEventListener('load', サンプル.main);

1. クラスをインポート

import { 画像管理クラス } from './imageManager.js'; // 画像管理に関する機能を提供
import { スプライトクラス } from './sprite.js'; // スプライト（画像）管理に関する機能
import { レイヤークラス } from './layer.js'; // レイヤー（描画画面）管理
import { ループ } from './loop.js'; // 繰り返し処理管理
import { メッセージウィンドウクラス } from './messageWindow.js'; // メッセージ表示管理
import { Data } from './data.js'; // データ管理
import { Com } from './com.js'; // 共通処理管理

これらのインポートにより、各機能を効率的に使うことができます。例えば、画像管理やスプライト表示、ループ処理などのモジュールが含まれています。

2. メイン処理

サンプル.main() は全体の流れを管理するメイン処理です。これにより以下の手順が実行されます：

1. ループ処理を設定。
2. メッセージウィンドウを作成。
3. 画像を読み込んでスプライトを作成。
4. 画面にスプライトやメッセージを表示。

3. 画像を使用する流れ

• 画像読み込み処理：

  const 画像情報リスト = [
      { id: '町01', src: 'img/bg02.jpg' }, // 背景画像
      { id: '人物01', src: 'img/chara01.png' } // キャラクター画像
  ];
  サンプル.画像管理 = new 画像管理クラス();
  

  画像情報リストを定義し、それらを読み込みます。
• スプライト作成処理：

  サンプル.背景01 = new スプライトクラス(サンプル.レイヤー, サンプル.画像管理.取得する('町01'), 0, 0, 640, 640);
  サンプル.人物01 = new スプライトクラス(サンプル.レイヤー, サンプル.画像管理.取得する('人物01'), 0, 150, 640, 640);
  

  背景やキャラクターなどをスプライトとして設定し、画面上に表示できるようにします。

4. メッセージウィンドウの流れ

• メッセージウィンドウを使ってテキストを表示します。例えば：

  await サンプル.メッセージウィンドウ.メッセージを表示する("プレイヤーは町を訪れた...");
  

  このコードで、メッセージウィンドウにテキストを表示できます。

5. 繰り返し処理

while (1) {
    サンプル.現時刻 = Com.シリアル値を時分秒に変換する(Date.now());
    await サンプル.メッセージウィンドウ.メッセージを表示する("現在時刻は" + サンプル.現時刻);
}

ここでは永遠ループを使って、時間の変化を表示しています。

前回までに画像を移動する方法とフェードイン、フェードアウトする方法を記したので、今度はそれらを合わせて、移動しながらフェードイン、フェードアウトする方法を記します。

01　ファイル構成

ファイルとそれを入れるフォルダーを以下のような構成します。
前回の「フェードイン／アウトする方法」と同じです。

02　ファイル全体の流れ

今回のコードは前回の「フェードイン／アウトする方法」に、移動しながらフェードインする処理と、移動しながらフェードアウトする処理を追加しています。

03　各部分の詳細解説

変更を行った「sample.js」と「sprite.js」のファイルについて解説していきます。

a.　sprite.js - スプライトクラス

export class スプライトクラス {
    constructor(レイヤー, 画像要素, x1, y1, x2, y2) {
        this.レイヤー = レイヤー;
        this.ctx = レイヤー.ctx;
        this.画像要素 = 画像要素;
        this.座標を設定する(x1, y1, x2, y2);
    }

    座標を設定する(x1, y1, x2, y2) {
        const 画像要素 = this.画像要素;
        const 表示幅 = x2 - x1;
        const 表示高さ = y2 - y1;

        const 画像縦横比 = 画像要素.width / 画像要素.height;
        const 表示縦横比 = 表示幅 / 表示高さ;

        let 描画幅, 描画高さ, 位置調整x, 位置調整y;

        if (画像縦横比 > 表示縦横比) {
            描画幅 = 表示幅;
            描画高さ = 表示幅 / 画像縦横比;
            位置調整x = 0;
            位置調整y = (表示高さ - 描画高さ) / 2; // 垂直中央揃え
        } else {
            描画高さ = 表示高さ;
            描画幅 = 表示高さ * 画像縦横比;
            位置調整x = (表示幅 - 描画幅) / 2; // 水平中央揃え
            位置調整y = 0;
        }

        this.x = x1 + 位置調整x;
        this.y = y1 + 位置調整y;
        this.幅 = 描画幅;
        this.高さ = 描画高さ;
    }

    描画する() {
        this.ctx.drawImage(this.画像要素, this.x, this.y, this.幅, this.高さ); // 画像を描画
    }

    移動して描画する(移動幅x, 移動幅y, 停止位置x, 停止位置y) {
        const 制御情報 = { 状態フラグ: 1 }; // 状態フラグ = 1(移動フラグオン)
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.移動する(制御情報, 移動幅x, 移動幅y, 停止位置x, 停止位置y);
                this.描画する();
                if (制御情報.状態フラグ) return;

                // 停止位置に来たら描画だけの処理に切替える
                this.レイヤー.処理を追加する(this, this.描画する.bind(this));
                resolve();
            });
        })
    }

    フェードインする(フェード時間 = 1) {
        const 増減値 = 1 / (60 * フェード時間); // フェード時間は秒単位とする
        const 制御情報 = { 状態フラグ: 2, 不透明度: 0.0 }; // 状態フラグ = 2(フェードフラグオン)
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.描画してフェードする(制御情報, 増減値);
                if (制御情報.状態フラグ) return;

                // 不透明度が100%になったら描画だけの処理に切替える
                this.レイヤー.処理を追加する(this, this.描画する.bind(this));
                resolve();
            });
        })
    }

    フェードアウトする(フェード時間 = 1) {
        const 増減値 = -1 / (60 * フェード時間); // フェード時間は秒単位とする
        const 制御情報 = { 状態フラグ: 2, 不透明度: 1.0 }; // 状態フラグ = 2(フェードフラグオン)
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.描画してフェードする(制御情報, 増減値);
                if (制御情報.状態フラグ) return;

                // 不透明度が0%になったら描画処理を削除する
                this.レイヤー.処理を削除する(this);
                resolve();
            });
        })
    }

    移動してフェードインする(移動幅x, 移動幅y, 停止位置x, 停止位置y, フェード時間 = 1) {
        const 増減値 = 1 / (60 * フェード時間); // フェード時間は秒単位とする
        const 制御情報 = { 状態フラグ: 3, 不透明度: 0.0 }; // 状態フラグ = 1(移動フラグオン) + 2(フェードフラグオン)
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.移動する(制御情報, 移動幅x, 移動幅y, 停止位置x, 停止位置y);
                this.描画してフェードする(制御情報, 増減値);
                if (制御情報.状態フラグ) return;

                // 停止位置に来て、尚かつ不透明度が100%なったら描画だけの処理に切替える
                this.レイヤー.処理を追加する(this, this.描画する.bind(this));
                resolve();
            });
        })
    }

    移動してフェードアウトする(移動幅x, 移動幅y, 停止位置x, 停止位置y, フェード時間 = 1) {
        const 増減値 = -1 / (60 * フェード時間); // フェード時間は秒単位とする
        const 制御情報 = { 状態フラグ: 3, 不透明度: 1.0 }; // 状態フラグ = 1(移動フラグオン) + 2(フェードフラグオン)
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.移動する(制御情報, 移動幅x, 移動幅y, 停止位置x, 停止位置y);
                this.描画してフェードする(制御情報, 増減値);
                if (制御情報.状態フラグ) return;

                // 停止位置に来て、尚かつ不透明度が0%なったら描画処理を削除する
                this.レイヤー.処理を削除する(this);
                resolve();
            });
        })
    }

    移動する(制御情報, 移動幅x, 移動幅y, 停止位置x, 停止位置y) {
        if ((制御情報.状態フラグ & 1) ^ 1) return; // 移動フラグがオフなら移動しない

        if (移動幅x) {
            this.x += 移動幅x;
            if (移動幅x > 0) {
                if (this.x >= 停止位置x) 制御情報.状態フラグ &= ~1; // 移動フラグをオフにする
            } else {
                if (this.x <= 停止位置x) 制御情報.状態フラグ &= ~1; // 移動フラグをオフにする
            }
        }
        if (移動幅y) {
            this.y += 移動幅y;
            if (移動幅y > 0) {
                if (this.y >= 停止位置y) 制御情報.状態フラグ &= ~1; // 移動フラグをオフにする
            } else {
                if (this.y <= 停止位置y) 制御情報.状態フラグ &= ~1; // 移動フラグをオフにする
            }
        }
    }

    描画してフェードする(制御情報, 増減値) {
        this.ctx.save(); // 現在の描画状態を保存
        this.ctx.globalAlpha = 制御情報.不透明度;
        this.描画する();
        this.ctx.restore(); // 元の描画状態を復元

        if ((制御情報.状態フラグ & 2) ^ 2) return; // フェードフラグがオフならフェードしない

        制御情報.不透明度 += 増減値;
        if (制御情報.不透明度 > 0 && 制御情報.不透明度 < 1) return;

        // 不透明度が下限値または上限値を超えたら、フェードフラグをオフにする
        制御情報.状態フラグ &= ~2;

        // 不透明度が下限値と上限値を超えないようにする
        制御情報.不透明度 = Math.max(0, Math.min(1, 制御情報.不透明度));
    }
}

移動しながらフェードイン

    移動してフェードインする(移動幅x, 移動幅y, 停止位置x, 停止位置y, フェード時間 = 1) {
        const 増減値 = 1 / (60 * フェード時間); // フェード時間は秒単位とする
        const 制御情報 = { 状態フラグ: 3, 不透明度: 0.0 }; // 状態フラグ = 1(移動フラグオン) + 2(フェードフラグオン)
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.移動する(制御情報, 移動幅x, 移動幅y, 停止位置x, 停止位置y);
                this.描画してフェードする(制御情報, 増減値);
                if (制御情報.状態フラグ) return;

                // 停止位置に来て、尚かつ不透明度が100%なったら描画だけの処理に切替える
                this.レイヤー.処理を追加する(this, this.描画する.bind(this));
                resolve();
            });
        })
    }

• 移動処理（移動する）と透明度変更処理（描画してフェードインする）を同時に行います。

移動しながらフェードアウト

    移動してフェードアウトする(移動幅x, 移動幅y, 停止位置x, 停止位置y, フェード時間 = 1) {
        const 増減値 = -1 / (60 * フェード時間); // フェード時間は秒単位とする
        const 制御情報 = { 状態フラグ: 3, 不透明度: 1.0 }; // 状態フラグ = 1(移動フラグオン) + 2(フェードフラグオン)
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.移動する(制御情報, 移動幅x, 移動幅y, 停止位置x, 停止位置y);
                this.描画してフェードする(制御情報, 増減値);
                if (制御情報.状態フラグ) return;

                // 停止位置に来て、尚かつ不透明度が0%なったら描画処理を削除する
                this.レイヤー.処理を削除する(this);
                resolve();
            });
        })
    }

• 移動処理（移動する）と透明度変更処理（描画してフェードアウトする）を同時に行います。

状態管理 (フラグの活用)

このコードでは「状態フラグ」を使ってスプライトの状態を管理しています。

const 制御情報 = { 状態フラグ: 3, 不透明度: 0.0 };

• 状態フラグ：スプライトが「移動中」か「フェード中」かを判定します。
  • 0:処理完了
  • 1:移動中（移動フラグ）
  • 2:フェード中（フェードフラグ）
  • 3:移動中＋フェード中
• 移動処理が完了すると状態フラグの移動フラグ（1）をオフにします。
• 透明度変更処理が完了すると状態フラグのフェードフラグ（2）をオフにします。
• 移動処理と透明度変更処理の両方が完了すると状態フラグは処理完了（0）になります。

b.　sample.js - サンプルクラス

import { 画像管理クラス } from './imageManager.js'; // クラスをインポート
import { スプライトクラス } from './sprite.js'; // クラスをインポート
import { レイヤークラス } from './layer.js'; // クラスをインポート
import { ループ } from './loop.js'; // クラスをインポート

class サンプル {
    static async main() {
        const レイヤー = new レイヤークラス('canvas.レイヤー1');
        const 画像管理 = new 画像管理クラス();
        ループ.初期化する(1000/60);
        ループ.開始する();

        // 事前に読み込む画像の配列
        const 画像情報リスト = [
            { id: '草原', src: 'img/bg01.jpg' },
            { id: '人物01', src: 'img/chara01.png' },
            { id: '炎竜', src: 'img/mon01.png' },
            { id: 'デビル', src: 'img/mon02.png' }
        ];

        // ページ初期化時に画像をプリロード
        if (!await 画像管理.画像を読み込む(画像情報リスト)) return;

        // 画像の描画位置を設定
        const 背景01 = new スプライトクラス(レイヤー, 画像管理.取得する('草原'), 0, 0, 640, 640);

        const 人物01 = new スプライトクラス(レイヤー, 画像管理.取得する('人物01'), 0, 100, 640, 640);
        const 人物01正位置 = { x: 人物01.x, y: 人物01.y };
        人物01.座標を設定する(640, 100, 1280, 640); //初期表示位置を設定する

        const モンスター01 = new スプライトクラス(レイヤー, 画像管理.取得する('炎竜'), 0, 0, 640, 540);
        const モンスター01正位置 = { x: モンスター01.x, y: モンスター01.y };
        モンスター01.座標を設定する(-640, 0, 0, 540); //初期表示位置を設定する

        const モンスター02 = new スプライトクラス(レイヤー, 画像管理.取得する('デビル'), 0, 320, 320, 640);
        const モンスター02正位置 = { x: モンスター02.x, y: モンスター02.y };
        モンスター02.座標を設定する(640, -640, 960, 320); //初期表示位置を設定する

        const モンスター03 = new スプライトクラス(レイヤー, 画像管理.取得する('デビル'), 320, 320, 640, 640);

        ループ.処理を追加する(レイヤー, レイヤー.描画する.bind(レイヤー));
        背景01.レイヤー.処理を追加する(背景01, 背景01.描画する.bind(背景01));

        let プロミスリスト;
        while (1) {
            await 人物01.移動してフェードインする(-10, 0, 人物01正位置.x, 0, 1);
            await サンプル.一時停止(2000);

            プロミスリスト = [];
            プロミスリスト.push(人物01.移動してフェードアウトする(5, 0, 640, 0, 0.5));
            プロミスリスト.push(モンスター01.移動して描画する(5, 0, モンスター01正位置.x, 0));
            プロミスリスト.push(モンスター02.移動してフェードインする(-10, 10, モンスター02正位置.x, モンスター02正位置.y, 1.5));
            プロミスリスト.push(モンスター03.フェードインする(0.5));
            await Promise.all(プロミスリスト);
            await サンプル.一時停止(2000);

            プロミスリスト = [];
            プロミスリスト.push(モンスター01.移動して描画する(0, 10, 0, 640));
            プロミスリスト.push(モンスター02.移動してフェードアウトする(0, 5, 0, 640,0.5));
            プロミスリスト.push(モンスター03.フェードアウトする(3));
            await Promise.all(プロミスリスト);
            await サンプル.一時停止(2000);

            モンスター01.座標を設定する(-640, 0, 0, 540); //初期表示位置を設定する
            モンスター02.座標を設定する(640, -640, 960, 320); //初期表示位置を設定する
        }
    }

    static 一時停止(時間) {
        return new Promise(resolve => setTimeout(resolve, 時間));
    }
}

addEventListener('load', サンプル.main);

このコードの全体の流れ

1. 画像を読み込む:
   
   • 必要な画像を事前にメモリへロードします（画像管理クラスを使用）。
   • ロード後に各画像をスプライトクラスとして設定し、描画を準備します。
2. アニメーションの管理:
   
   • ループを使って、画面内の描画やアニメーション（フェードイン/アウト）を繰り返します。
3. 移動しながらフェード処理を実行:
   
   • 人物 や モンスター 画像を移動しながらフェードインまたはフェードアウトさせ、アニメーションを構成します。
4. 一時停止（待機）:
   
   • 指定時間だけ処理を止めることで、画面切り替えのタイミングを調整します。

主要なポイントの解説

1. 移動しながらフェードイン処理：

   人物01.移動してフェードインする(-10, 0, 人物01正位置.x, 0, 1);
   

   • 移動速度：上記の例では、1フレームごとに10ピクセル左に移動します。
   • フェードイン：上記の例では、1秒以内に透明度が上がり（0⇒1）、完全に表示されます。
2. 移動しながらフェードアウト処理：

   人物01.移動してフェードアウトする(5, 0, 640, 0, 0.5);
   

   • 移動速度：上記の例では、1フレームごとに5ピクセル右に移動します。
   • フェードイン：上記の例では、0.5秒以内に透明度が下がり（1⇒0）、完全に非表示になります。

01　ファイル構成

02　ファイル全体の流れ

03　各部分の詳細解説

a.　sprite.js - スプライトクラス

export class スプライトクラス {
    constructor(レイヤー, 画像要素, x1, y1, x2, y2) {
        this.レイヤー = レイヤー;
        this.ctx = レイヤー.ctx;
        this.画像要素 = 画像要素;
        this.座標を設定する(x1, y1, x2, y2);
    }

    座標を設定する(x1, y1, x2, y2) {
        const 画像要素 = this.画像要素;
        const 表示幅 = x2 - x1;
        const 表示高さ = y2 - y1;

        const 画像縦横比 = 画像要素.width / 画像要素.height;
        const 表示縦横比 = 表示幅 / 表示高さ;

        let 描画幅, 描画高さ, 位置調整x, 位置調整y;

        if (画像縦横比 > 表示縦横比) {
            描画幅 = 表示幅;
            描画高さ = 表示幅 / 画像縦横比;
            位置調整x = 0;
            位置調整y = (表示高さ - 描画高さ) / 2; // 垂直中央揃え
        } else {
            描画高さ = 表示高さ;
            描画幅 = 表示高さ * 画像縦横比;
            位置調整x = (表示幅 - 描画幅) / 2; // 水平中央揃え
            位置調整y = 0;
        }

        this.x = x1 + 位置調整x;
        this.y = y1 + 位置調整y;
        this.幅 = 描画幅;
        this.高さ = 描画高さ;
    }

    描画する() {
        this.ctx.drawImage(this.画像要素, this.x, this.y, this.幅, this.高さ); // 画像を描画
    }

    移動して描画する(移動幅x, 移動幅y, 停止位置x, 停止位置y) {
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                if (移動幅x) this.x += 移動幅x;
                if (移動幅y) this.y += 移動幅y;
                this.描画する();

                let 停止フラグ = false;
                if (移動幅x) {
                    if (移動幅x > 0) {
                        if (this.x >= 停止位置x) 停止フラグ = true;
                    } else if (移動幅x < 0) {
                        if (this.x <= 停止位置x) 停止フラグ = true;
                    }
                }
                if (移動幅y) {
                    if (移動幅y > 0) {
                        if (this.y >= 停止位置y) 停止フラグ = true;
                    } else if (移動幅y < 0) {
                        if (this.y <= 停止位置y) 停止フラグ = true;
                    }
                }
                if (!停止フラグ) return;

                // 停止位置に来たら描画だけの処理に切替える
                this.レイヤー.処理を追加する(this, this.描画する.bind(this));
                resolve();
            });
        })
    }

    フェードアウトする(フェード時間 = 1) {
        const 減少値 = 1 / (60 * フェード時間); // フェード時間は秒単位とする
        let 不透明度 = 1.0;
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.ctx.save(); // 現在の描画状態を保存
                this.ctx.globalAlpha = 不透明度;
                this.描画する();
                this.ctx.restore(); // 元の描画状態を復元
                不透明度 -= 減少値;
                if (不透明度 > 0) return;

                // 不透明度が0%になったら描画処理を削除する
                this.レイヤー.処理を削除する(this);
                resolve();
            });
        })
    }

    フェードインする(フェード時間 = 1) {
        const 増加値 = 1 / (60 * フェード時間); // フェード時間は秒単位とする
        let 不透明度 = 0.0;
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.ctx.save(); // 現在の描画状態を保存
                this.ctx.globalAlpha = 不透明度;
                this.描画する();
                this.ctx.restore(); // 元の描画状態を復元
                不透明度 += 増加値;
                if (不透明度 < 1) return;

                // 不透明度が100%になったら描画だけの処理に切替える
                this.レイヤー.処理を追加する(this, this.描画する.bind(this));
                resolve();
            });
        })
    }
}

追加したコードについて

    フェードアウトする(フェード時間 = 1) {
        const 減少値 = 1 / (60 * フェード時間); // フェード時間は秒単位とする
        let 不透明度 = 1.0;
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.ctx.save(); // 現在の描画状態を保存
                this.ctx.globalAlpha = 不透明度;
                this.描画する();
                this.ctx.restore(); // 元の描画状態を復元
                不透明度 -= 減少値;
                if (不透明度 > 0) return;

                // 不透明度が0%になったら描画処理を削除する
                this.レイヤー.処理を削除する(this);
                resolve();
            });
        })
    }

    フェードインする(フェード時間 = 1) {
        const 増加値 = 1 / (60 * フェード時間); // フェード時間は秒単位とする
        let 不透明度 = 0.0;
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                this.ctx.save(); // 現在の描画状態を保存
                this.ctx.globalAlpha = 不透明度;
                this.描画する();
                this.ctx.restore(); // 元の描画状態を復元
                不透明度 += 増加値;
                if (不透明度 < 1) return;

                // 不透明度が100%になったら描画だけの処理に切替える
                this.レイヤー.処理を追加する(this, this.描画する.bind(this));
                resolve();
            });
        })
    }

初心者向けのポイント

1. 不透明度は時間でコントロール：
   • フェード効果は、「何秒以内に透明度を変える」といった具合に、秒で指定できるようにしています（小数点も可）。
   • 1フレーム（このコードでは、約1/60秒）ごとに透明度を少しずつ調整しています。
2. 非同期処理：
   • フェード効果を非同期で行う仕組み（Promise）を使うことで、他の処理と平行して行えるようになっています。

b.　sample.js - サンプルクラス

import { 画像管理クラス } from './imageManager.js'; // クラスをインポート
import { スプライトクラス } from './sprite.js'; // クラスをインポート
import { レイヤークラス } from './layer.js'; // クラスをインポート
import { ループ } from './loop.js'; // クラスをインポート

class サンプル {
    static async main() {
        const レイヤー = new レイヤークラス('canvas.レイヤー1');
        const 画像管理 = new 画像管理クラス();
        ループ.初期化する(1000/60);
        ループ.開始する();

        // 事前に読み込む画像の配列
        const 画像情報リスト = [
            { id: '草原', src: 'img/bg01.jpg' },
            { id: '人物01', src: 'img/chara01.png' },
            { id: '炎竜', src: 'img/mon01.png' },
            { id: 'デビル', src: 'img/mon02.png' }
        ];

        // ページ初期化時に画像をプリロード
        if (!await 画像管理.画像を読み込む(画像情報リスト)) return;

        // 画像の描画位置を設定
        const 背景01 = new スプライトクラス(レイヤー, 画像管理.取得する('草原'), 0, 0, 640, 640);
        const 人物01 = new スプライトクラス(レイヤー, 画像管理.取得する('人物01'), 0, 100, 640, 640);
        const モンスター01 = new スプライトクラス(レイヤー, 画像管理.取得する('炎竜'), 0, 0, 640, 540);
        const モンスター02 = new スプライトクラス(レイヤー, 画像管理.取得する('デビル'), 0, 320, 320, 640);
        const モンスター03 = new スプライトクラス(レイヤー, 画像管理.取得する('デビル'), 320, 320, 640, 640);

        ループ.処理を追加する(レイヤー, レイヤー.描画する.bind(レイヤー));
        背景01.レイヤー.処理を追加する(背景01, 背景01.描画する.bind(背景01));

        let プロミスリスト;
        while (1) {
            await 人物01.フェードインする();
            await サンプル.一時停止(2000);

            プロミスリスト = [];
            プロミスリスト.push(人物01.フェードアウトする(2.5));
            プロミスリスト.push(モンスター01.フェードインする(4));
            プロミスリスト.push(モンスター02.フェードインする(3));
            プロミスリスト.push(モンスター03.フェードインする(1.5));
            await Promise.all(プロミスリスト);
            await サンプル.一時停止(2000);

            await モンスター02.フェードアウトする();
            await サンプル.一時停止(2000);

            プロミスリスト = [];
            プロミスリスト.push(モンスター01.フェードアウトする(1.5));
            プロミスリスト.push(モンスター03.フェードアウトする(3));
            await Promise.all(プロミスリスト);
            await サンプル.一時停止(2000);
        }
    }

    static 一時停止(時間) {
        return new Promise(resolve => setTimeout(resolve, 時間));
    }
}

addEventListener('load', サンプル.main);

このコードの全体の流れ

主要なポイントの解説

01　ファイル構成

02　ファイル全体の流れ

03　各部分の詳細解説

a.　sample.html - HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=660,user-scalable=no,shrink-to-fit=yes">
    <title>画像を移動する方法</title>
</head>
<body>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
    
        canvas {
            display: block;
            margin: 20px auto;
            border: 1px solid #ccc;
        }
    
        p {
            font-size: 18px;
            color: #333;
        }
    </style>
    
    <p>
        リフレッシュレート：<span class="リフレッシュレート">0</span>Hz
        ／フレームレート：<span class="フレームレート">0</span>fps
    </p>
    <canvas class="レイヤー1" width="640" height="640"></canvas>
    <script type="module" src="js/sample.js"></script>
</body>
</html>

b.　layer.js - レイヤークラス

export class レイヤークラス {
    constructor(セレクター) {
        this.canvas = document.querySelector(セレクター);
        this.ctx = this.canvas.getContext('2d');
        this.処理リスト = [];
    }

    描画する() {
        this.クリアする();

        // ループ中に処理リストの処理が削除されてもいいように逆順でループします
        for (let i = this.処理リスト.length - 1; i >= 0; i--) {
            this.処理リスト[i].処理();
        }
    }

    クリアする() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

    処理を追加する(id, 処理) {
        const 既存処理 = this.処理リスト.find(x => x.id == id);
        if (既存処理) {
            既存処理.処理 = 処理; // 既にある場合は差し替える
            return;
        }

        this.処理リスト.unshift({ id, 処理 });
    }

    処理を削除する(id) {
        this.処理リスト = this.処理リスト.filter(x => x.id != id);
    }
}

const レイヤー = new レイヤークラス('.レイヤー1'); 
// 上記はキャンバス（.レイヤー1）を管理する新しいレイヤーを作成します。

c.　sprite.js - スプライトクラス

export class スプライトクラス {
    constructor(レイヤー, 画像要素, x1, y1, x2, y2) {
        this.レイヤー = レイヤー;
        this.ctx = レイヤー.ctx;
        this.画像要素 = 画像要素;
        this.レイヤー.処理を追加する(this, this.描画する.bind(this));
        this.座標を設定する(x1, y1, x2, y2);
    }

    座標を設定する(x1, y1, x2, y2) {
        const 画像要素 = this.画像要素;
        const 表示幅 = x2 - x1;
        const 表示高さ = y2 - y1;

        const 画像縦横比 = 画像要素.width / 画像要素.height;
        const 表示縦横比 = 表示幅 / 表示高さ;

        let 描画幅, 描画高さ, 位置調整X, 位置調整Y;

        if (画像縦横比 > 表示縦横比) {
            描画幅 = 表示幅;
            描画高さ = 表示幅 / 画像縦横比;
            位置調整X = 0;
            位置調整Y = (表示高さ - 描画高さ) / 2; // 垂直中央揃え
        } else {
            描画高さ = 表示高さ;
            描画幅 = 表示高さ * 画像縦横比;
            位置調整X = (表示幅 - 描画幅) / 2; // 水平中央揃え
            位置調整Y = 0;
        }

        this.x = x1 + 位置調整X;
        this.y = y1 + 位置調整Y;
        this.幅 = 描画幅;
        this.高さ = 描画高さ;
    }

    描画する() {
        this.ctx.drawImage(this.画像要素, this.x, this.y, this.幅, this.高さ); // 画像を描画
    }

    移動して描画する(移動幅x, 移動幅y, 停止位置x, 停止位置y) {
        return new Promise(resolve => {
            this.レイヤー.処理を追加する(this, () => {
                if (移動幅x) this.x += 移動幅x;
                if (移動幅y) this.y += 移動幅y;
                this.描画する();

                let 停止フラグ = false;
                if (移動幅x) {
                    if (移動幅x > 0) {
                        if (this.x >= 停止位置x) 停止フラグ = true;
                    } else if (移動幅x < 0) {
                        if (this.x <= 停止位置x) 停止フラグ = true;
                    }
                }
                if (移動幅y) {
                    if (移動幅y > 0) {
                        if (this.y >= 停止位置y) 停止フラグ = true;
                    } else if (移動幅y < 0) {
                        if (this.y <= 停止位置y) 停止フラグ = true;
                    }
                }
                if (!停止フラグ) return;

                // 停止位置に来たら描画だけの処理に切替える
                this.レイヤー.処理を追加する(this, this.描画する.bind(this));
                resolve();
            });
        })
    }
}

const 人物01 = new スプライトクラス(レイヤー, 画像, x1, y1, x2, y2);
// 人物01というスプライトを作成し、レイヤー上に表示します。

d.　loop.js - ループクラス

export class ループ {
    static 初期化する(フレームレート) {
        ループ.処理リスト = [];
        ループ.リフレッシュ時刻;
        ループ.処理時刻;
        ループ.リフレッシュカウンタ = 0;
        ループ.処理カウンタ = 0;
        ループ.フレームレート = フレームレート | 1000 / 60;
        ループ.リフレッシュレート要素 = document.querySelector(".リフレッシュレート");
        ループ.フレームレート要素 = document.querySelector(".フレームレート");
    }

    static 開始する() {
        ループ.処理時刻 = ループ.リフレッシュ時刻 = Date.now();
        ループ.する();
    }

    static する() {
        ループ.処理を実行する();
        requestAnimationFrame(ループ.する);
    }

    static 処理を実行する() {
        const 現時刻 = Date.now();
        if (現時刻 - ループ.リフレッシュ時刻 < 1000) {
            ループ.リフレッシュカウンタ++;
        } else {
            ループ.リフレッシュ時刻 = 現時刻;
            ループ.リフレッシュレート要素.innerHTML = ループ.リフレッシュカウンタ;
            ループ.フレームレート要素.innerHTML = ループ.処理カウンタ;
            ループ.リフレッシュカウンタ = 0;
            ループ.処理カウンタ = 0;
        }

        if (現時刻 - ループ.処理時刻 < ループ.フレームレート) return;
        ループ.処理時刻 += ループ.フレームレート;
        ループ.処理カウンタ++;

        // ループ中に処理リストの処理が削除されてもいいように逆順でループします
        for (let i = ループ.処理リスト.length - 1; i >= 0; i--) {
            ループ.処理リスト[i].処理();
        }
    }

    static 処理を追加する(id, 処理) {
        const 既存処理 = ループ.処理リスト.find(x => x.id == id);
        if (既存処理) {
            既存処理.処理 = 処理; // 既にある場合は差し替える
            return;
        }

        ループ.処理リスト.push({ id, 処理 });
    }

    static 処理を削除する(id) {
        ループ.処理リスト = ループ.処理リスト.filter(x => x.id != id);
    }
}

ループ.初期化する();
ループ.開始する();
ループ.処理を追加する(レイヤー, レイヤー.描画する.bind(レイヤー));
// アニメーションを開始し、レイヤーの描画をループ内で実行します。

e.　sample.js - サンプルクラス

import { 画像管理クラス } from './imageManager.js'; // クラスをインポート
import { スプライトクラス } from './sprite.js'; // クラスをインポート
import { レイヤークラス } from './layer.js'; // クラスをインポート
import { ループ } from './loop.js'; // クラスをインポート

class サンプル {
    static async main() {
        const レイヤー = new レイヤークラス('canvas.レイヤー1');
        const 画像管理 = new 画像管理クラス();
        ループ.初期化する(1000/60);
        ループ.開始する();

        // 事前に読み込む画像の配列
        const 画像情報リスト = [
            { id: '草原', src: 'img/bg01.jpg' },
            { id: '人物01', src: 'img/chara01.png' },
            { id: '炎竜', src: 'img/mon01.png' },
            { id: 'デビル', src: 'img/mon02.png' }
        ];

        // ページ初期化時に画像をプリロード
        if (!await 画像管理.画像を読み込む(画像情報リスト)) return;

        // 画像の描画位置を設定
        const 背景01 = new スプライトクラス(レイヤー, 画像管理.取得する('草原'), 0, 0, 640, 640);

        const 人物01 = new スプライトクラス(レイヤー, 画像管理.取得する('人物01'), 0, 100, 640, 640);
        const 人物01正位置 = { x: 人物01.x, y: 人物01.y };
        人物01.座標を設定する(640, 100, 1280, 640); //初期表示位置を設定する

        const モンスター01 = new スプライトクラス(レイヤー, 画像管理.取得する('炎竜'), 0, 0, 640, 540);
        const モンスター01正位置 = { x: モンスター01.x, y: モンスター01.y };
        モンスター01.座標を設定する(-640, 0, 0, 540); //初期表示位置を設定する

        const モンスター02 = new スプライトクラス(レイヤー, 画像管理.取得する('デビル'), 0, 320, 320, 640);
        const モンスター02正位置 = { x: モンスター02.x, y: モンスター02.y };
        モンスター02.座標を設定する(640, -640, 960, 320); //初期表示位置を設定する

        const モンスター03 = new スプライトクラス(レイヤー, 画像管理.取得する('デビル'), 320, 320, 640, 640);
        const モンスター03正位置 = { x: モンスター03.x, y: モンスター03.y };
        モンスター03.座標を設定する(-320, -640, 0, 320); //初期表示位置を設定する

        ループ.処理を追加する(レイヤー, レイヤー.描画する.bind(レイヤー));

        let プロミスリスト;
        while (1) {
            await 人物01.移動して描画する(-40, 0, 人物01正位置.x, 0);
            await サンプル.一時停止(2000);

            プロミスリスト = [];
            プロミスリスト.push(人物01.移動して描画する(40, 0, 640, 0));
            プロミスリスト.push(モンスター01.移動して描画する(5, 0, モンスター01正位置.x, 0));
            プロミスリスト.push(モンスター02.移動して描画する(-20, 20, モンスター02正位置.x, モンスター02正位置.y));
            プロミスリスト.push(モンスター03.移動して描画する(10, 10, モンスター03正位置.x, モンスター03正位置.y));
            await Promise.all(プロミスリスト);
            await サンプル.一時停止(2000);

            プロミスリスト = [];
            プロミスリスト.push(モンスター01.移動して描画する(0, 10, 0, 640));
            プロミスリスト.push(モンスター02.移動して描画する(0, 5, 0, 640));
            プロミスリスト.push(モンスター03.移動して描画する(0, 20, 0, 640));
            await Promise.all(プロミスリスト);
            await サンプル.一時停止(2000);

            モンスター01.座標を設定する(-640, 0, 0, 540); //初期表示位置を設定する
            モンスター02.座標を設定する(640, -640, 960, 320); //初期表示位置を設定する
            モンスター03.座標を設定する(-320, -640, 0, 320); //初期表示位置を設定する
        }
    }

    static 一時停止(時間) {
        return new Promise(resolve => setTimeout(resolve, 時間));
    }
}

addEventListener('load', サンプル.main);

await サンプル.一時停止(2000); 
// 2000ミリ秒（2秒）待ってから次の処理を実行します。

f.　初心者向けまとめ

• キャンバスは「描画用の黒板」のようなものです。
• レイヤーは「黒板を管理する管理人」で、黒板消しを持っています。
• スプライトは「黒板の上を動くキャラクターや背景」で、黒板消しは持っていないため、他のスプライトが描いたものに上書きすることはあっても、消すことはありません。
• ループは「描画を永遠に繰り返す仕組み」です。
• サンプルクラスで全てをつなぎ、画像の移動や停止、再開をコントロールします。

01　ファイル構成

02　ファイル全体の流れ

03　各部分の詳細解説

a.　sample.html - HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像を表示する方法</title>
</head>
<body>
    <canvas class="レイヤー1" width="640" height="640"></canvas>
    <script type="module" src="js/sample.js"></script>
</body>
</html>

<canvas class="レイヤー1" width="640" height="640"></canvas>

b.　imageManager.js - 画像管理

export class 画像管理クラス {
    constructor() {
        this.画像キャッシュ = new Map();
    }

    async 画像を読み込む(画像情報リスト) {
        const プロミスリスト = 画像情報リスト.map(画像情報 => {
            return new Promise((resolve, reject) => {
                const 画像要素 = new Image();
                画像要素.src = 画像情報.src;

                画像要素.onload = () => {
                    this.画像キャッシュ.set(画像情報.id, 画像要素);
                    resolve();
                };

                画像要素.onerror = () => {
                    console.error(`画像が読み込めませんでした：${画像情報.src}`);
                    reject();
                };
            });
        });

        try {
            // 全ての画像が読み込まれるのを待つ
            await Promise.all(プロミスリスト);
            return true;
        } catch {
            return false;// 一つでも読み込めなかった場合
        }
    }

    取得する(id) {
        const 画像要素 = this.画像キャッシュ.get(id);
        if (!画像要素) console.error(`画像キャッシュにありません：${id}`);
        return 画像要素;
    }
}

1. クラスの宣言

export class 画像管理クラス {
    constructor() {
        this.画像キャッシュ = new Map();
    }
}

2. 画像を読み込む() 関数

async 画像を読み込む(画像情報リスト) {
    const プロミスリスト = 画像情報リスト.map(画像情報 => {
        return new Promise((resolve, reject) => {
            const 画像要素 = new Image();
            画像要素.src = 画像情報.src;
            画像要素.onload = () => {
                this.画像キャッシュ.set(画像情報.id, 画像要素);
                resolve();
            };
            画像要素.onerror = () => {
                console.error(`画像が読み込めませんでした：${画像情報.src}`);
                reject();
            };
        });
    });

    try {
        await Promise.all(プロミスリスト);
        return true;
    } catch {
        return false;
    }
}

3. 取得する() 関数

取得する(id) {
    const 画像要素 = this.画像キャッシュ.get(id);
    if (!画像要素) console.error(`画像キャッシュにありません：${id}`);
    return 画像要素;
}

4. 初心者向けのポイント

c.　sprite.js - 描画処理

export class スプライトクラス {
    constructor(canvas) {
        this.ctx = canvas.getContext('2d');
    }

    描画する(画像要素, x1, y1, x2, y2) {
        const 表示幅 = x2 - x1;
        const 表示高さ = y2 - y1;

        const 画像縦横比 = 画像要素.width / 画像要素.height;
        const 表示縦横比 = 表示幅 / 表示高さ;

        let 描画幅, 描画高さ, 位置調整X, 位置調整Y;

        if (画像縦横比 > 表示縦横比) {
            描画幅 = 表示幅;
            描画高さ = 表示幅 / 画像縦横比;
            位置調整X = 0;
            位置調整Y = (表示高さ - 描画高さ) / 2; // 垂直中央揃え
        } else {
            描画高さ = 表示高さ;
            描画幅 = 表示高さ * 画像縦横比;
            位置調整X = (表示幅 - 描画幅) / 2; // 水平中央揃え
            位置調整Y = 0;
        }

        this.ctx.drawImage(画像要素, x1 + 位置調整X, y1 + 位置調整Y, 描画幅, 描画高さ); // 画像を描画
    }
}

1. 縦横比を維持して画像を中央揃えにする処理

if (画像縦横比 > 表示縦横比) {
    // 横長画像の場合
    描画幅 = 表示幅;
    描画高さ = 表示幅 / 画像縦横比;
    位置調整Y = (表示高さ - 描画高さ) / 2; // 垂直中央
} else {
    // 縦長画像の場合
    描画高さ = 表示高さ;
    描画幅 = 表示高さ * 画像縦横比;
    位置調整X = (表示幅 - 描画幅) / 2; // 水平中央
}

2. 画像を描画する

this.ctx.drawImage(画像要素, x1 + 位置調整X, y1 + 位置調整Y, 描画幅, 描画高さ);

d.　sample.js - メインの処理

import { 画像管理クラス } from './imageManager.js'; // クラスをインポート
import { スプライトクラス } from './sprite.js'; // クラスをインポート

class サンプル {
    static async main() {
        const canvas = document.querySelector('canvas.レイヤー1');
        const スプライト = new スプライトクラス(canvas);
        const 画像管理 = new 画像管理クラス();

        // 事前に読み込む画像の配列
        const 画像情報リスト = [
            { id: '像の背景', src: 'img/statue.jpg' },
            { id: '人物01', src: 'img/chara_L.png' }
        ];

        // ページ初期化時に画像をプリロード
        if (!await 画像管理.画像を読み込む(画像情報リスト)) return;

        // プリロード完了後に画像を描画
        スプライト.描画する(画像管理.取得する('像の背景'), 0, 0, 640, 640);
        スプライト.描画する(画像管理.取得する('人物01'), 0, 100, 640, 640);
    }
}

addEventListener('load', サンプル.main);

1. キャンバスと描画に必要なクラスを準備

const canvas = document.querySelector('canvas.レイヤー1');
const スプライト = new スプライトクラス(canvas);
const 画像管理 = new 画像管理クラス();

2. 画像のプリロード処理

const 画像情報リスト = [
    { id: '像の背景', src: 'img/statue.jpg' },
    { id: '人物01', src: 'img/chara_L.png' }
];
if (!await 画像管理.画像を読み込む(画像情報リスト)) return;

3. 画像の描画処理

スプライト.描画する(画像管理.取得する('像の背景'), 0, 0, 640, 640);
スプライト.描画する(画像管理.取得する('人物01'), 0, 100, 640, 640);