前回は場面の遷移処理を作りました。
これにより、画像を表示したりメッセージや選択肢を表示するのに配列変数の値を変更するだけで、処理を変更する必要がなくなりました。
しかし、この処理ではステータス画面やフィールド画面のような特殊なレイアウトの画面を表示することはできません。
今回はこの問題を解消する方法を記します。
以下の例では、選択肢から「ステータスを見る」をクリックするとステータス画面を表示します。

ファイル構成

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

index.html　-　HTML

1. ステータスウィンドウ

<article>タグでステータスウィンドウを追加しています。

<article class="ステータスウィンドウ 消去 透明化">
  <!-- 内部に画像やテキストなどさまざまな要素が配置 -->
</article>

• 目的：キャラクターの情報（名前、レベル、経験値、各種パラメータ、装備、体力や魔力のバー、所持金など）を表示します。
• 内部の構成
  • 画像エリア：<div class="画像エリア"> 内では、背景画像、キャラクター画像、フレーム画像が配置しています。これらは、各々の <img> タグで画面上にキャラクターの姿や装飾を表示します。
  • テキストエリア：キャラクターの名前やレベルは <p> や <span> を使って表示し、クラス名によって装飾（例えば斜体や通常文字、大きさの調整）を設定しています。
  • パラメータ表示：経験値、技力、ちから、素早さ、強靭さ、攻撃力、守備力などは、各 <table> 要素で配置しています。
  • バー表示：<meter>タグを使い、生命力や魔力の減り具合をバーとして視覚化しています。
  • 装備表示：武器、鎧、盾などの装備は、画像とテキストを<table> 要素で配置しています。
  • 初期表示：「消去」と「透明化」といったクラスが付与することで、初期表示時は消去かつ透明化しています。

sample.css　-　CSS

1. キーフレームアニメーション

この CSS では、いくつかのアニメーションを定義しています。

• 「点滅」アニメーション： @keyframes 点滅 では、透明度（opacity）を 1 → 0 → 1 と1秒周期で変化させ、要素を点滅させます。
• 「上下振動」アニメーション： @keyframes 上下振動 は、要素を上下にゆっくりと4秒周期で移動させます。
• 「キラリ」エフェクト： 少し特殊な効果として、.キラリ::before という疑似要素を使って、光の縞（グリッター）のようなアニメーションを設定します。

2. ステータスウィンドウのスタイル

• 「.ステータスウィンドウ」： キャラクターのステータス（名前、レベル、経験値、各パラメータ、装備など）を表示する要素に対して、背景グラデーションや影、ボーダーなどを指定しています。

sampleData.js　-　サンプルデータクラス

1. クラス「サンプルデータ」の全体構成

このコードは export class サンプルデータ { … } の中に全てのデータを定義しています。

• static キーワードを使っているので、クラスのインスタンスを作らなくても「サンプルデータ.画像データリスト」などで直に利用できるようになっています。
• プログラムで必要な情報（背景画像、キャラクター、場面の流れ、キャラクターのステータス、武器や防具、盾など）をすべてひとまとめにして、プログラムの他の部分から簡単に呼び出せるようにしています。

2. 画像データリスト

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

解説：

• ここでは、背景やキャラクターなど、表示する画像の情報を管理しています。
• 各要素はオブジェクトになっていて、id と src の２つのプロパティを持っています。
  • 例：{ id: '町', src: 'img/bg02.jpg' } は「町」という識別子と、それに対応する画像ファイルのパスを示しています。
• このリストに基づいて、プログラムは必要なタイミングで画像を読み込みます。

3. 遷移データリスト

static 遷移データリスト = [
    ["スタート", , , [["町の広場へ行く",]],],
    ["町の広場へ行く", "<var>キャラクター情報管理.0.名前</var>は町の広場に来た<w>10</w>", , [["町の広場",]], [ /* 表示時の演出用の配列 */ ]],
    // …（さらに複雑なデータが続きます）
];

解説：

• この配列は、物語や場面の流れ（シナリオ）を管理するためのデータです。
• 各要素はひとつの「場面」を表しており、以下の内容となっています。
  • [0] id（必須）：場面idです（例："スタート"、"町の広場へ行く"）。
  • [1] メッセージ： 場面内で表示するテキストです。 以下の特殊タグを入れることでメッセージの動作を制御できます。
    • <br>：改行
    • <c>：クリア
    • <w>：クリック待ち
    • <w>x</w>：x秒までクリック待ち（例：<w>10</w>の場合は10秒間待つ）
    • <var>変数</var>：変数（例：<var>キャラクター情報管理.0.名前</var>の場合は、「キャラクター情報管理.0.名前」という変数を"プレイヤー"という値に置き換えます）
  • [2] 遷移メソッド： 特殊なレイアウトの画面に遷移させるメソッドを設定します （例：「ステータスウィンドウ.表示する(キャラクター情報管理.0)」の場合は、 「ステータスウィンドウ.表示する」というメソッドを「キャラクター情報管理.0」 という引数をつけてコールします）。
  • [3] 選択肢情報リスト（必須）：
    • [0] id：その選択肢を選んだ場合の遷移先の場面idを設定します（例："町の広場へ行く"）。
    • [1] 名称：選択肢のラベルを設定します（例、"宿屋へ行く"、"ステータスを見る"）。選択肢を表示したくない場合は、名称を未設定にします
  • [4] 画像情報リスト：
    • [0] スプライトid：作成するスプライトのidを設定します（例："背景01"、"人物01"）。
    • [1] レイヤーid：スプライトを描画するレイヤーのidを設定します（例："レイヤー1"、"レイヤー2"）。
    • [2] 画像id：描画したい画像のidを設定します（例："町"、"プレイヤー"）。
    • [3] x1：描画したい領域の座標を設定します（例：0、640）。
    • [4] y1：〃
    • [5] x2：〃
    • [6] y2：〃
    • [7] 表示メソッド：表示させるメソッドを設定します（例："フェードアウトする"、"フェードインする"、"移動してフェードアウトする"、"移動してフェードインする"）。
    • [8] p1：表示メソッドの引数を設定します（例：1、20、-20）。
    • [9] p2：〃
    • [10] p3：〃

具体的な動き：

• 例えば、場面情報「町の広場へ行く」では、現状の"背景01"のスプライトを1秒間でフェードアウトさせ、
• 同時に、"町"の画像（描画領域：0,0,640,640）を設定した"背景01"のスプライトを新しく作成して"レイヤー1"に配置し、1秒間かけてフェードインさせます。
• 更に同時に、現状の"人物01"のスプライトを、ｘ座標を-20ずつ移動しながら、1秒間でフェードアウトさせ、
• これも同時に、"プレイヤー"の画像（描画領域：0,0,640,640）を設定した"人物01"のスプライトを新しく作成して"レイヤー2"に配置し、ｘ座標を-20ずつ移動しながら、1秒間でフェードインさせまていす。
• 次に、「"プレイヤーは町の広場に来た"」というメッセージを表示し、10秒間クリックを受け付けます。
• 選択肢情報の名称が未設定なので、選択肢を表示せずに、場面idが「町の広場」の場面に遷移します。

ポイント：

• 遷移データリストを変更することで、表示させたい画像やメッセージ、選択肢、そして遷移先の場面を変更することができます。
• また、特殊なレイアウトの画面を表示したい場合は、「遷移メソッド」のパラメータに表示処理が書かれたメソッドを設定することで、その画面に遷移できます。

4. キャラクター情報データリスト

static キャラクター情報データリスト = [
    [0, "プレイヤー", "プレイヤー", 0, 0, 640, 640, 1, 0, 200, 100, 20, 20, 20, 20, 200, 0, 0, 0]
];

解説：

• このリストは、プログラム内で使われるキャラクターの情報を数値や文字列の配列で定義しています。
• 各要素はひとつの「キャラクター情報」を表しており、以下の内容となっています。
  ※全て必須パラメータです。
  • [0] id：キャラクター情報のidです。
  • [1] 名前：キャラクタの名前です。
  • [2] 画像id：キャラクターの画像idです。
  • [3] 画像x1：画像の表示領域です。
  • [4] 画像y1：〃
  • [5] 画像x2：〃
  • [6] 画像y2：〃
  • [7] レベル：〃
  • [8] 経験値：キャラクターの経験値です。
  • [9] 生命力：キャラクターの生命力です。
  • [10] 魔力：キャラクターの魔力です。
  • [11] 技力：キャラクターの技力です。
  • [12] ちから：キャラクターのちからです。
  • [13] 素早さ：キャラクターの素早さです。
  • [14] 強靭さ：キャラクターの強靭さです。
  • [15] 所持金：キャラクターの所持金です。
  • [16] 装備武器id：キャラクターが装備している武器のidです。
  • [17] 装備鎧id：キャラクターが装備している鎧のidです。
  • [18] 装備盾id：キャラクターが装備している盾のidです。

5. 武器情報、鎧情報、盾情報リスト

武器情報データリスト：

static 武器情報データリスト = [
    [0, "青銅の剣", "剣", 10, 100, "青銅で出来たまあまあな切れ味の剣"],
    [1, "鉄の剣", "剣", 20, 1000, "鉄製のよく斬れる剣"],
    [2, "鋼の剣", "剣", 50, 2000, "鋼鉄製のかなり斬れる剣"]
];

鎧情報データリスト：

static 鎧情報データリスト = [
    [0, "革の鎧", "鎧", 5, 20, "軽くてまあまあ丈夫な鎧"],
    [1, "青銅の鎧", "鎧", 10, 500, "青銅で出来た結構丈夫な鎧"],
    [2, "鉄の鎧", "鎧", 20, 1000, "鉄製の頑丈な鎧"],
    [3, "鋼の鎧", "鎧", 50, 3000, "鋼鉄製でかなり守備力が高い鎧"]
];

盾情報データリスト：

static 盾情報データリスト = [
    [0, "木の盾", "盾", 5, 20, "軽くてまあまあ丈夫な盾"],
    [1, "青銅の盾", "盾", 10, 300, "青銅で出来た結構丈夫な盾"],
    [2, "鉄の盾", "盾", 25, 1000, "鉄製の頑丈な盾"],
    [3, "鋼の盾", "盾", 50, 2000, "鋼鉄製でかなり守備力が高い盾"]
];

解説：

• これらの配列は、プログラム内でキャラクターが使える各種アイテムの情報です。
• 各要素の内容は以下のとおりです。
  ※全て必須パラメータです。
  • [0] id：武器、鎧、盾のidです。
  • [1] 名前：武器、鎧、盾の名前です。
  • [2] 種別：武器、鎧、盾の種別です（例："剣"、"鎧"、"盾"）。
  • [3] 攻撃力／守備力：武器の場合は攻撃力、鎧か盾の場合は守備力を表します。
  • [4] 価格：武器、鎧、盾の価格です。
  • [5] 説明：武器、鎧、盾の説明文です。

charaInfo.js　-　キャラクター情報クラス

export class キャラクター情報クラス {
    constructor(
        [
            id, 名前, 画像id, 画像x1, 画像y1, 画像x2, 画像y2,
            レベル, 経験値, 生命力, 魔力, 技力, ちから, 素早さ, 強靭さ, 所持金
        ],
        画像要素, 装備武器, 装備鎧, 装備盾
    ) {
        Object.assign(this, {
            id, 名前, 画像id, 画像x1, 画像y1, 画像x2, 画像y2,
            レベル, 経験値, 生命力, 魔力, 技力, ちから, 素早さ, 強靭さ, 所持金,
            最大生命力: 生命力, 最大魔力: 魔力,
            画像要素, 装備武器, 装備鎧, 装備盾
        });
    }

    get 攻撃力() {
        return this.ちから + (this.装備武器?.攻撃力 ?? 0);
    }

    get 守備力() {
        return this.強靭さ + (this.装備鎧?.守備力 ?? 0) + (this.装備盾?.守備力 ?? 0);
    }
}

1. クラスの基本構造とコンストラクタ

配列を使った引数の受け取り：

• 引数の最初の部分： コンストラクタの最初の引数は配列になっています。
  これは、キャラクターの基本情報（id、名前、画像情報、レベル、経験値、生命力、魔力、技力、ちから、素早さ、強靭さ、所持金 など）をひとまとめにして受け取るためです。
  たとえば、配列の中で最初の要素はキャラクターのID、次は名前、という具合に順番に値を受け取って、変数に展開（分割代入）しています。
• 追加の引数： その後の引数として、画像要素や装備品（武器、鎧、盾）も受け取ります。

Object.assign() でプロパティを自動セット：

• コンストラクタ内では、Object.assign(this, { … }) を使っています。
  これは、分割代入で受け取った変数をそのまま this（クラスのインスタンス）にコピーするための便利な方法です。
  また、ここで「最大生命力」と「最大魔力」もプロパティとして追加し、初期値（受け取った生命力や魔力）を保存しています。
  これにより、後でキャラクターがダメージを受けたり魔法を使ったりして数値が変化しても、元の最大値が保持される仕組みになっています。

2. ゲッターで計算プロパティを作成

このクラスでは、計算によって値を求めるために getter を使用しています。

攻撃力のゲッター：

get 攻撃力() {
    return this.ちから + (this.装備武器?.攻撃力 ?? 0);
}

• 基本部分： this.ちから はキャラクターの元々持っている攻撃力の基本値を意味します。
• 装備によるボーナス： this.装備武器?.攻撃力 は、もしキャラクターに武器が装備されていれば、その武器の攻撃力を加算します。
  ここで「?.（オプショナルチェーン）」を使っているため、もし 装備武器 が存在しなかった場合でもエラーにならず、代わりに undefined を返す仕組みです。
  また、?? 0 により、undefined の場合は 0 として扱います。

守備力のゲッター：

get 守備力() {
    return this.強靭さ + (this.装備鎧?.守備力 ?? 0) + (this.装備盾?.守備力 ?? 0);
}

• 基本部分： this.強靭さ はキャラクターの基本的な守備力の値です。
• 装備によるボーナス： キャラクターが装備している鎧と盾の守備力も加算されます。
  両方ともオプショナルチェーンと nullish 合体演算子 (??) を使っているので、装備されていない場合は自動的に 0 として扱われ、エラーなく計算できるようになっています。

itemInfo.js　-　アイテム関連のクラス

1. 基底クラス「アイテム情報クラス」

class アイテム情報クラス {
    constructor(p) {
        Object.assign(this, p);
    }
}

このクラスは、すべてのアイテム情報の基本となるクラスです。

• コンストラクタの引数 p： ここでは、オブジェクト形式のデータを受け取っています。
• Object.assign(this, p)： 渡されたオブジェクト p のプロパティを、現在のインスタンス（this）にまとめてコピーしています。

2. 武器情報クラス「武器情報クラス」

export class 武器情報クラス extends アイテム情報クラス {
    constructor([id, 名前, 種別, 攻撃力, 価格, 説明]) {
        super({ id, 名前, 種別, 価格, 説明 });
        Object.assign(this, { 攻撃力 });
    }
}

このクラスは「武器」に特有の情報を管理するために作っています。

• 引数の受け取り方法： コンストラクタは、配列を受け取って分割代入しています。
  配列の中身は、順番に id、名前、種別、攻撃力、価格、説明 となっています。
• super({ id, 名前, 種別, 価格, 説明 })： 分割代入で取り出したうち、共通項目（ID、名前、種別、価格、説明）を基底クラスのコンストラクタに渡して初期化します。
• Object.assign(this, { 攻撃力 })： 武器に固有のプロパティである「攻撃力」を、インスタンスへ追加しています。

3. 防具情報クラス「防具情報クラス」

export class 防具情報クラス extends アイテム情報クラス {
    constructor([id, 名前, 種別, 守備力, 価格, 説明]) {
        super({ id, 名前, 種別, 価格, 説明 });
        Object.assign(this, { 守備力 });
    }
}

こちらは「防具」に固有の情報を管理するクラスです。

• 引数の受け取り方法： 配列を分割代入して、id、名前、種別、守備力、価格、説明 を取り出します。
• super({ id, 名前, 種別, 価格, 説明 })： 分割代入で取り出したうち、共通項目（ID、名前、種別、価格、説明）を基底クラスのコンストラクタに渡して初期化します。
• Object.assign(this, { 守備力 })： 防具に固有のプロパティである「守備力」を、インスタンスへ追加しています。

scene.js　-　場面関連のクラス

1. 選択肢情報クラス

class 選択肢情報クラス {
    constructor([id, 名称]) {
        Object.assign(this, { id, 名称 });
    }
}

このクラスは、画面上に表示する選択肢（例：「次へ進む」「戻る」など）のデータを管理するためのものです。

• コンストラクタでは、配列を受け取り、その配列から id と 名称 を分割代入しています。
• Object.assign(this, { id, 名称 })： 受け取った id と 名称 をインスタンスに一括でセットしています。

2. 画像情報クラス

class 画像情報クラス {
    constructor([
        スプライトid, レイヤーid,
        画像id, x1, y1, x2, y2,
        表示メソッド, p1, p2, p3
    ]) {
        Object.assign(this, { スプライトid, レイヤーid, 画像id, x1, y1, x2, y2, 表示メソッド, p1, p2, p3 });
    }
}

このクラスは、画像を表示する際の情報である、どのスプライトを使うか、どのレイヤーに配置するか、画像のID、画像の表示位置（x1, y1, x2, y2）や表示のためのメソッド、さらに補助的なパラメータ（p1, p2, p3）をまとめて管理します。

• コンストラクタでは、引数として配列を受け取り、配列の各要素を対応する変数（プロパティ）に分割代入しています。
• Object.assign(this, { ... })： これらの値をインスタンスのプロパティに一括でセットしています。

3. 場面情報クラス

export class 場面情報クラス {
    constructor([id, メッセージ, 遷移メソッド, 選択肢情報リスト, 画像情報リスト]) {
        Object.assign(this, { id, メッセージ, 遷移メソッド });

        this.選択肢情報リスト = Array.isArray(選択肢情報リスト)
            ? 選択肢情報リスト.map(x => new 選択肢情報クラス(x))
            : [];

        this.画像情報リスト = Array.isArray(画像情報リスト)
            ? 画像情報リスト.map(x => new 画像情報クラス(x))
            : [];
    }
}

このクラスは、ひとつの「場面」に関する情報をまとめて管理するクラスです

• コンストラクタの引数には、配列を受け取ります。
  配列の内容は、場面の id、その場面で表示する メッセージ、特殊なレイアウトの画面に遷移する場合の 遷移メソッド、そして選択肢情報のリストと画像情報のリストです。
• 最初に、id、メッセージ、遷移メソッド の3つの共通プロパティを Object.assign(this, { id, メッセージ, 遷移メソッド }) により設定します。
• 次に、受け取った「選択肢情報リスト」が配列かどうかを Array.isArray() でチェックし、もし配列なら、その各要素を new 選択肢情報クラス(x) のようにしてインスタンスに変換し、格納します。
  もし配列でなければ、空の配列を設定します。
• 同様に、画像情報リスト も確認し、配列であれば new 画像情報クラス(x) を使ってオブジェクトに変換し、保存します。

sample.js　-　サンプルクラス

このコードは、さまざまなモジュール（画像管理、ループ処理、ウィンドウ、データ管理など）を連携させて、一連の処理を順番に初期化し、最終的にシーン（場面）の遷移を開始する仕組みになっています。
コード全体は、各パーツのインスタンス化と初期化を行い、プログラムをセットアップするための「ブートストラップ」的な役割を果たしています。

1. インポート部

import { サンプルデータ } from './sampleData.js'; // クラスをインポート
import { 画像管理クラス } from './imageManager.js'; // クラスをインポート
import { ループ処理クラス } from './loop.js'; // クラスをインポート
import { データ管理クラス } from './dataManager.js'; // クラスをインポート
import { メッセージウィンドウクラス } from './messageWindow.js'; // クラスをインポート
import { コマンドウィンドウクラス } from './commandWindow.js'; // クラスをインポート
import { ステータスウィンドウクラス } from './statusWindow.js'; // クラスをインポート
import { レイヤークラス } from './layer.js'; // クラスをインポート
import { 武器情報クラス, 防具情報クラス } from './itemInfo.js'; // クラスをインポート
import { キャラクター情報クラス } from './charaInfo.js'; // クラスをインポート
import { 画像表示クラス } from './imageDisplay.js'; // クラスをインポート
import { 場面遷移クラス } from './sceneTransition.js'; // クラスをインポート
import { Com } from './com.js'; // クラスをインポート

まず、必要な各モジュール（クラス）をインポートしています。
たとえば、画像管理、ループ処理、各ウィンドウ（メッセージ、コマンド、ステータス）、場面遷移、そしてキャラクターやアイテムのデータを扱うクラスなど、多岐にわたるコンポーネントがここに含まれています。

2. クラス「サンプル」の全体構成

export class サンプル {
    constructor() {
        this.main();
    }

• コンストラクタ： インスタンスが生成されるとすぐに this.main() を呼び出して、順次初期化処理を実行しています。

3. main メソッド

    async main() {
        await this.使用する画像を読み込む();
        this.ループ処理を作成する();
        this.データ管理を作成する();
        this.メッセージウィンドウを作成する();
        this.コマンドウィンドウを作成する();
        this.ステータスウィンドウを作成する();
        this.レイヤーを作成する();
        this.武器情報を作成する();
        this.鎧情報を作成する();
        this.盾情報を作成する();
        this.キャラクター情報を作成する();
        this.画像表示を作成する();
        this.場面遷移を作成する();
        this.場面遷移.開始する();
    }

この main メソッドは非同期処理（async）になっていて、初期化の手順を順番に呼び出しています。
手順としては以下の通りです。

1. 画像の読み込み： 使用する画像を読み込む() で、サンプルデータに定義した画像リストを読み込み、画像管理クラスのインスタンスにセットします。
2. ループ処理の開始： ループ処理クラスのインスタンスを作成し、アニメーションや定期的な更新処理などを開始します。
3. データ管理、ウィンドウ類の作成： データ管理、メッセージウィンドウ、コマンドウィンドウ、ステータスウィンドウの各インスタンスを作成して、画面に配置する準備をします。
   ウィンドウクラスには、どのDOM要素に表示するかや、処理を走らせるための情報（ループ処理や共通コンポーネント Com など）が渡されます。
4. レイヤーの作成： レイヤークラスを使って、背景用（レイヤー1）と前景用（レイヤー2）のキャンバスを管理します。
   これにより、複数のグラフィック要素を適切な順序で描画することができます。
5. アイテム情報の作成： 武器、鎧、防具の情報をそれぞれ管理するために、サンプルデータから配列を読み込み、各アイテム情報クラスのインスタンスに変換して、管理用オブジェクトに格納しています。
6. キャラクター情報の作成： キャラクター情報も同様に、キャラクターごとのデータを読み込み、対応する画像（画像管理から取得）、装備情報（武器、鎧、防具）をセットして、キャラクター情報クラスのインスタンスとして作成します。
7. 画像表示の作成： 画像表示クラスのインスタンスを作成し、画像管理とレイヤー管理の情報をもとに、実際の画面上に画像を描画する準備をします。
8. 場面遷移の作成と開始： 最後に、場面遷移クラスのインスタンスを作り、場面データ（遷移データリスト）を渡して、場面の切り替え処理を開始しています。

4. 画像読み込み

    async 使用する画像を読み込む() {
        this.画像管理 = new 画像管理クラス();
        await this.画像管理.画像を読み込む(サンプルデータ.画像データリスト);
    }

• 目的： プログラム内で使用されるすべての画像を、あらかじめ読み込んでキャッシュ化しておくための処理です。
• 実装： 画像管理クラスのインスタンスを生成し、サンプルデータに定義した画像リストを渡して非同期に読み込みます。

5. ループ処理の作成

    ループ処理を作成する() {
        this.ループ処理 = new ループ処理クラス(Com);
        this.ループ処理.開始する();
    }

• 目的： プログラムの更新処理（アニメーションや定期更新）を実行するためのメインループです。
• 実装： ループ処理クラスのインスタンスを生成し、共通コンポーネント Com を渡して開始します。

6. データ管理・ウィンドウの作成

    メッセージウィンドウを作成する() {
        this.メッセージウィンドウ = new メッセージウィンドウクラス(".スクリーン", ".メッセージウィンドウ", this.ループ処理, this.データ管理, Com, 0.5);
    }

• 目的： プログラム内のテキストメッセージをユーザーに表示するためのウィンドウの設定です。
• 実装： 表示する親要素（.スクリーン）やメッセージウィンドウのセレクタを渡し、ループ処理・データ管理、共通コンポーネント Com、そしてトランジションスピードなどのパラメータも設定しています。

コマンドウィンドウやステータスウィンドウも同様にして作成します。

7. レイヤーとアイテム、キャラクターの管理

• レイヤー作成： レイヤークラスを使って、背景用と前景用のキャンバスを分け、描画順を管理します。
• 武器・鎧・盾情報の作成： サンプルデータに定義されたアイテム情報リストを、forEach で回して各アイテム情報クラスのインスタンスを生成し、管理用のオブジェクトに保存します。
• キャラクター情報の作成： キャラクター情報リストの各配列データを使って、キャラクター情報クラスのインスタンスを生成しています。
  ここでは、キャラクターが持つ画像ID（第二引数として画像管理から画像を取得する）や、装備情報（武器、鎧、盾）を設定しています。

8. 画像表示と場面遷移

• 画像表示： 画像表示クラスは、画像管理とレイヤー管理を連携して、画面上の各要素を正しく描画するためのインターフェースを提供します。
• 場面遷移： サンプルデータに定義されたアイテム情報リストを、forEach で回して各アイテム情報クラスのインスタンスを生成し、管理用のオブジェクトに保存します。
• キャラクター情報の作成： 場面遷移クラスは、サンプルデータに定義されたシナリオ（遷移データリスト）をもとに、場面の切り替えや選択肢の提示を行います。
  初期状態は「スタート」となっており、最後にこの場面遷移の開始処理（.開始する()）を呼ぶことで、実際のプログラムが動き始める仕組みです。

9. エントリーポイントの設定

addEventListener('load', () => new サンプル());

• 目的： ページのロードが完了したタイミングで、サンプル クラスの新しいインスタンスを生成します。
  これにより、上記で説明した一連の初期化処理が実行され、プログラムがセットアップされます。

sceneTransition.js　-　場面遷移クラス

このクラスは、場面を切り替える処理を一手に担っています。

1. コンストラクタでの初期化

constructor(遷移データリスト, 開始id, メッセージウィンドウ, コマンドウィンドウ, データ管理, 画像表示) {
    this.場面情報管理 = {};
    遷移データリスト.forEach(x => this.場面情報管理[x[0]] = new 場面情報クラス(x));
    this.場面情報 = this.場面情報管理[開始id];
    this.メッセージウィンドウ = メッセージウィンドウ;
    this.コマンドウィンドウ = コマンドウィンドウ;
    this.データ管理 = データ管理;
    this.画像表示 = 画像表示;
}

コンストラクタでは、外部から渡される遷移データリストや各ウィンドウ、データ管理、画像表示などの必要なコンポーネントを受け取り、初期の状態を設定しています。

• 遷移データリスト： それぞれの場面の情報が配列で渡ってきます。
  ここで、各要素（x）の最初の部分（x[0]：場面id）をキーとして、new 場面情報クラス(x) によってオブジェクト化し、場面情報管理 という連想配列（オブジェクト）に保存しています。
• 開始id： プログラム開始時に表示する場面を指定するため、このIDに紐づく場面情報オブジェクトを this.場面情報 にセットしています。
• その他のプロパティも各ウィンドウや画像表示、データ管理用のオブジェクトとして保存しています。

2. 開始する() メソッド

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

    while (1) {
        await this.画像表示.画像を表示する(this.場面情報);
        await this.メッセージを表示する();
        if (await this.遷移メソッドを実行する(this.場面情報)) continue;
        if (this.選択肢が不要な場合は1つ目の場面に遷移する()) continue;
        await this.コマンドウィンドウを表示する();
    }
}

このメソッドは、場面の遷移処理をループして実行します。

• エラーチェック： 初期の場面情報が存在しない場合はエラーを投げます。
• 無限ループ (while (1))： このループ内で、毎回同じ流れの処理を実行します。
  1. 現在の場面の画像を表示する処理（画像表示.画像を表示する）を実行します。
  2. メッセージウィンドウで場面のメッセージを表示します（メッセージを表示する）。
  3. 場面に設定されている「遷移メソッド」を実行し、もし成功すれば continue で次のループへ進みます。
  4. 遷移メソッドがなかった場合、あるいは選択肢の表示が不要な場合は、最初の選択肢情報に従って場面を切り替えます。
  5. ユーザーが選択肢（コマンド）を選ぶためのコマンドウィンドウを表示し、そこで選択された情報（id）よって次の場面に遷移します。

このループを通して、場面の画像表示、テキスト表示、遷移処理、そしてユーザーの選択が順次実行され、プログラムが進行していきます。

3. メッセージを表示する() メソッド

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

• 役割： 現在の場面情報にメッセージがあれば、それをメッセージウィンドウに表示します。
  もしメッセージが無ければ何もせず、あればウィンドウを現してメッセージを表示する、といった流れです。

4. 遷移メソッドを実行する() メソッド

async 遷移メソッドを実行する(場面情報) {
    if (!場面情報.遷移メソッド) return false;
    await this.メッセージウィンドウ.消去する();

    const メソッド情報 = {
        メソッドの構文: 場面情報.遷移メソッド,
        メソッド部: 場面情報.遷移メソッド,
        引数リスト: [],
        カレントオブジェクト: null,
        メソッド名: null
    };
    this.データ管理.メソッドの構文からメソッド部と引数リストを取得する(メソッド情報);
    this.データ管理.メソッド部からカレントオブジェクトとメソッド名を取得する(メソッド情報);

    const id = await メソッド情報.カレントオブジェクト[メソッド情報.メソッド名](...メソッド情報.引数リスト);
    const 選択肢情報 = 場面情報.選択肢情報リスト[id];
    if (!選択肢情報 || !this.場面情報管理[選択肢情報.id]) {
        throw new Error(`不正な遷移IDまたは選択肢情報が見つかりません。id: ${id}`);
    }
    this.場面情報 = this.場面情報管理[選択肢情報.id];
    return true;
}

• 機能： 場面情報に設定されている「遷移メソッド」があれば、このメソッドを実行して、どの場面に遷移するかのIDを取得します。
• 処理の流れ：
  1. まず、遷移メソッドが設定されていなければ false を返すので、次の処理に移ります。
  2. メッセージウィンドウを一度消去してから、遷移メソッドの実行に取り掛かります。
  3. メソッド情報 オブジェクトに、遷移メソッドの構文や引数リスト、カレントオブジェクト、メソッド名などを一度まとめます。
     ここでデータ管理クラスのメソッドを使って情報を整形し、必要な情報を抽出します。
  4. 次に、カレントオブジェクトの中から、指定されたメソッド名のメソッドを呼び出し、引数リストを与えて結果（遷移先場面のID）を待ちます。
  5. そのIDを使い、選択肢情報リストから該当する選択肢を取得し、もし情報が不正ならエラーを投げ、正しければ次の場面に切り替えます。

このメソッドは、特殊なレイアウトの画面に遷移させたい場合に使います。

5. 選択肢が不要な場合は1つ目の場面に遷移する() メソッド

選択肢が不要な場合は1つ目の場面に遷移する() {
    const 選択肢情報 = this.場面情報.選択肢情報リスト[0];
    if (選択肢情報.名称) return false;

    if (!this.場面情報管理[選択肢情報.id]) {
        throw new Error(`遷移IDが不正です。id: ${選択肢情報.id}`);
    }
    this.場面情報 = this.場面情報管理[選択肢情報.id];
    return true;
}

• 用途： もし現在の場面に選択肢の名称が設定されていない（＝ユーザーからの選択を必要としない場合）なら、自動的に最初の（1つ目の）選択肢情報に基づいて場面を遷移させます。
• チェック： ここでは、最初の選択肢情報の名称がないかどうかをチェックし、なければ自動的に遷移する設定になっています。

6. コマンドウィンドウを表示する() メソッド

async コマンドウィンドウを表示する() {
    const id = await this.コマンドウィンドウ.表示する(this.場面情報.選択肢情報リスト);
    this.場面情報 = this.場面情報管理[id];
    if (!this.場面情報) {
        throw new Error(`場面情報が見つかりません。id: ${id}`);
    }
}

• 役割： ここでは、ユーザーに選択肢を提示するためにコマンドウィンドウを表示し、ユーザーが選んだ選択肢に対応する次の場面のIDを取得しています。
• 処理： 取得したIDに基づいて、現在の場面情報を更新します。不正なIDの場合はエラーを投げることで、正しい場面データのみを扱うようにしています。

statusWindow.js　-　ステータスウィンドウクラス

1. クラスの概要

このクラスは、プログラム内でキャラクターのステータス（名前、レベル、各種能力値、装備、体力や魔力のバーなど）を表示するためのウィンドウを管理するために作りました。 ユーザーがステータスウィンドウを表示させ、表示中にウィンドウが徐々に出現し、画面をクリックするとフェードアウトして消えるという演出を実現しています。

2. コンストラクタ

constructor(スクリーンセレクタ, ステータスウィンドウセレクタ, Com, 現滅時間 = 0.5) {
    this.Com = Com;
    this.現滅時間 = 現滅時間;
    this.スクリーン要素 = Com.DOM要素を取得する(document, スクリーンセレクタ);
    this.ステータスウィンドウ要素 = Com.DOM要素を取得する(this.スクリーン要素, ステータスウィンドウセレクタ);
    this.キャラクター画像要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".キャラクター画像");
    this.名前要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".名前エリア .名前");
    this.レベル要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".レベルエリア .レベル");
    this.経験値要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".経験値エリア .経験値");
    this.技力要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".基本パラメータ1 .技力");
    this.ちから要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".基本パラメータ1 .ちから");
    this.素早さ要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".基本パラメータ2 .素早さ");
    this.強靭さ要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".基本パラメータ2 .強靭さ");
    this.攻撃力要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".攻撃力エリア .攻撃力");
    this.守備力要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".守備力エリア .守備力");
    this.武器要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".装備エリア .武器");
    this.鎧要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".装備エリア .鎧");
    this.盾要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".装備エリア .盾");
    this.生命力バー要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".バーエリア .生命力バー");
    this.魔力バー要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".バーエリア .魔力バー");
    this.生命力要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".バーエリア .生命力");
    this.最大生命力要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".バーエリア .最大生命力");
    this.魔力要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".バーエリア .魔力");
    this.最大魔力要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".バーエリア .最大魔力");
    this.所持金要素 = Com.DOM要素を取得する(this.ステータスウィンドウ要素, ".所持金エリア .所持金");
}

解説：

• 引数と初期設定：
  • スクリーンセレクタとステータスウィンドウセレクタは、HTML内の対象となる要素を指定するためのCSSセレクタです。
  • Com は共通のユーティリティクラスで、DOM要素の取得や一時停止（待機）などのヘルパー処理が実装されていると想定しています。
  • 現滅時間（デフォルトは0.5秒）は、フェードイン・フェードアウトのアニメーションにかける時間を指定しています。
• DOM要素の取得：
  • Com.DOM要素を取得する メソッドを利用して、指定したセレクタから必要なDOM要素（キャラクター画像、名前、レベル、各種ステータス項目、装備表示、HEAL/MPバー、所持金など）を取得しています。
  • これにより、後の処理で画面に情報を反映する際に、すぐに対象要素にアクセスできるようにしています。

3. 表示する() メソッド

async 表示する(キャラクター情報) {
    if (typeof キャラクター情報 !== "object" || キャラクター情報 === null) {
        throw new Error(`キャラクター情報がありません。キャラクター情報: ${キャラクター情報}`);
    }
    this.ステータスを表示する(キャラクター情報);
    await this.ウィンドウを表示する();
    return this.画面をクリックしたら終了する();
}

解説：

• 入力チェック： 渡されたキャラクター情報が正しいオブジェクトであるかを確認しています。存在しない場合はエラーを投げ、早期終了させます。
• ステータスの更新： ステータスを表示する(キャラクター情報) メソッドを呼び出して、各DOM要素（名前、レベル、各ステータス数値、装備など）にキャラクター情報のデータを設定します。
• ウィンドウの表示： ウィンドウを表示する() で、ステータスウィンドウの表示アニメーション（CSSクラスの操作）を実行します。
• ユーザー操作の待機： 最後に、画面をクリックしたら終了する() を呼び出し、ユーザーが画面をクリックするまで待機します。このメソッドはPromiseを返し、クリック後にウィンドウが閉じる処理をしています。

4. ステータスを表示する() メソッド

ステータスを表示する(キャラクター情報) {
    this.キャラクター画像要素.src = キャラクター情報.画像要素.src;
    this.名前要素.textContent = キャラクター情報.名前;
    this.レベル要素.textContent = キャラクター情報.レベル;
    this.経験値要素.textContent = キャラクター情報.経験値;
    this.技力要素.textContent = キャラクター情報.技力;
    this.ちから要素.textContent = キャラクター情報.ちから;
    this.素早さ要素.textContent = キャラクター情報.素早さ;
    this.強靭さ要素.textContent = キャラクター情報.強靭さ;
    this.攻撃力要素.textContent = キャラクター情報.攻撃力;
    this.守備力要素.textContent = キャラクター情報.守備力;

    if (キャラクター情報.装備武器) this.武器要素.textContent = キャラクター情報.装備武器.名前;
    else this.武器要素.textContent = "なし";
    if (キャラクター情報.装備鎧) this.鎧要素.textContent = キャラクター情報.装備鎧.名前;
    else this.鎧要素.textContent = "なし";
    if (キャラクター情報.装備盾) this.盾要素.textContent = キャラクター情報.装備盾.名前;
    else this.盾要素.textContent = "なし";

    this.生命力要素.textContent = キャラクター情報.生命力;
    this.最大生命力要素.textContent = キャラクター情報.最大生命力;
    this.生命力バー要素.value = キャラクター情報.生命力 / キャラクター情報.最大生命力 * 100;
    this.魔力要素.textContent = キャラクター情報.魔力;
    this.最大魔力要素.textContent = キャラクター情報.最大魔力;
    this.魔力バー要素.value = キャラクター情報.魔力 / キャラクター情報.最大魔力 * 100;
    this.所持金要素.textContent = キャラクター情報.所持金;
}

解説：

• 各情報の反映： キャラクター情報オブジェクトから各種プロパティ（画像、名前、レベル、経験値、技力、ちから、素早さ、強靭さなど）を取得し、対象のDOM要素に直接値を設定していきます。
• 装備の表示： 装備に関しては、装備武器、装備鎧、装備盾が存在する場合はその名前を表示し、存在しなければ「なし」と表示します。
• バーの計算： 生命力と魔力のバーは、現在値を最大値で割り、パーセンテージを算出してvalueに代入しています。これにより、グラフィカルなバー表示が実現されます。

5. ウィンドウを表示する() メソッド

async ウィンドウを表示する() {
    this.ステータスウィンドウ要素.classList.remove('消去');
    await this.Com.一時停止(this.現滅時間); // 少しずつ出現する時間
    this.ステータスウィンドウ要素.classList.remove('透明化');
}

解説：

• 表示準備： まず、消去 クラスを削除して、要素をレイアウト上に表示可能な状態にします。
• フェードイン効果： Com.一時停止(this.現滅時間) で指定された時間だけ一時停止（待機）し、少しずつ出現する効果を演出します。 その後、透明化 クラスを削除して、完全に表示します。

6. 画面をクリックしたら終了する() メソッド

画面をクリックしたら終了する() {
    return new Promise(resolve => {
        this.以前のクリックハンドラ = this.スクリーン要素.onclick;
        this.スクリーン要素.onclick = async () => {
            this.スクリーン要素.onclick = this.以前のクリックハンドラ;
            this.ステータスウィンドウ要素.classList.add('透明化');
            await this.Com.一時停止(this.現滅時間); // 少しずつ消える時間
            this.ステータスウィンドウ要素.classList.add('消去');
            resolve(0);
        };
    });
}

解説：

• ユーザー入力の待機： このメソッドは、画面（スクリーン要素）がクリックされるまで待機します。Promiseを返し、クリックイベントが発生したときに解決（resolve）します。
• クリックハンドラの一時保存： もともと設定されていたクリックハンドラを保存し、イベント終了後に元に戻すようになっています。
• フェードアウト効果： クリック後に、透明化 クラスを追加してウィンドウを徐々に透明にし、待機時間（現滅時間）を経てから、消去 クラスを追加して要素を完全に非表示にします。