JavaScriptで脱出ゲームを作る方法
(アイテムの詳細)

アイテムの詳細

アイテムを選択した状態で、同じアイテムをクリックしたときにアイテムの詳細を表示できまるようにします。

    
	AddImage("Tri", "./img/item_tri.png");
	AddImage("TriD", "./img/item_tri_detail.png");

	itemManager.AddItem("sankaku", "Tri"); // item's image shuld be 60x60
  	itemManager.AddItemDetail("sankaku", "TriD", ShowTriDetail);
initialize()関数内で詳細用の画像("TriD")を登録します。
詳細用の画像は300x300の画像を登録してください。
さらにitemManager.AddItemDetailで詳細画面を登録します。
"sankaku"は詳細画面に紐づけたいitemManager.AddItem()で登録したアイテムの名前、 "TriD"はAddImage()で登録した画像の名前です。

ShowTriDetailは以下の用に、詳細画面にクリックポイントを設定します。
itemManager.AddEmptyObject()はsceneManager.AddEmptyObject()とは異なり座標の原点はゲーム画面の左上ではなく、詳細画面の左上です。
    
function ShowTriDetail() {
	itemManager.AddEmptyObject(0, 0, DETAIL_SIZE, DETAIL_SIZE, "MESSAGE:三角。");

}
結果、以下のようにアイテム詳細が表示できるようになります。


以上でアイテムの詳細表示が行えます。クリックでサンプル起動
現段階のコード

アイテムの詳細からの移動

アイテム詳細から別のアイテム詳細に移動するようにします。

    
	AddImage("Tri", "./img/item_tri.png");
	AddImage("TriD", "./img/item_tri_detail.png");
	AddImage("TriD2", "./img/item_tri_detail2.png");
  
	itemManager.AddItem("sankaku", "Tri"); // item's image shuld be 60x60
  	itemManager.AddItemDetail("sankaku", "TriD", ShowTriDetail);
  	itemManager.AddItemDetail("sankaku2", "TriD2", ShowTriDetail2);
initialize()関数内で移動先きの詳細用の画像("TriD2")を登録します。
移動先の画像も300x300の画像を登録してください。
さらにitemManager.AddItemDetailで詳細画面を登録します。
今回の詳細画面には対応するアイテムがないので、重複しない"sankaku2"の名前を付けます。

通常のアイテム詳細と同じくコールバックを設定します。
    
function ShowTriDetail2() {
	itemManager.AddEmptyObject(0, 0, DETAIL_SIZE, DETAIL_SIZE, "MESSAGE:裏だ。");
}


最後に三角の詳細の右側をクリックした際に移動するようクリックポイントを追記します。
    
function ShowTriDetail() {
	itemManager.AddEmptyObject(0, 0, DETAIL_SIZE, DETAIL_SIZE, "MESSAGE:三角。");
	itemManager.AddEmptyObject(DETAIL_SIZE / 2, 0, DETAIL_SIZE, DETAIL_SIZE, () => { itemManager.ShowItemDetail("sankaku2"); });
}
上記の記載は以下の記述と同義です。 
    
function ShowTriDetail() {
	itemManager.AddEmptyObject(0, 0, DETAIL_SIZE, DETAIL_SIZE, "MESSAGE:三角。");
	itemManager.AddEmptyObject(DETAIL_SIZE / 2, 0, DETAIL_SIZE, DETAIL_SIZE, ClickCB);
}
function ClickCB(){
	itemManager.ShowItemDetail("sankaku2"); 
}
以上でアイテムの詳細表示が行えます。クリックでサンプル起動
現段階のコード


戻る