JavaScriptで脱出ゲームを作る方法
(カウンター)

カウンター

脱出ゲームではおなじみのカウンターを表示します。 

    
	AddImage("num0", "./img/num0.png");
	AddImage("num1", "./img/num1.png");
	AddImage("num2", "./img/num2.png");
	AddImage("num3", "./img/num3.png");
	AddImage("num4", "./img/num4.png");
	AddImage("num5", "./img/num5.png");
	
	sceneManager.AddCounter("cnt1", ["num0","num1", "num2", "num3", "num4", "num5"], 4);
initialize()関数内でカウンター用の画像　　　　　　("num0"～"num5")を登録します。

さらにsceneManager.AddCounter()でカウンターを登録します。
第一引数の"cnt1"はカウンターの名前です。
第二引数には、カウンターに表示する画像を[]で囲み設定します。
第三引数には、0始まりの初期値です。ここでは5番目の"num4"が初期に表示されます。

カウンターはクリックされると第二引数で設定された次の画像が表示されます。
    
function ShowN() {
	sceneManager.ShowCounter("cnt1", 200, 110);

}
表示したいシーンにsceneManager.ShowCounter()で表示します。
結果、以下のようにカウンターが表示できるようになります。


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

カウンターの使用

表示したカウンターを操作してみます。 

    
	sceneManager.AddCounter("cnt1", ["num0","num1", "num2", "num3", "num4", "num5"], 4);
	sceneManager.AddCounter("cnt2", ["num0","num1", "num2", "num3", "num4", "num5"], 4);
	sceneManager.AddCounter("cnt3", ["num0","num1", "num2", "num3", "num4", "num5"], 4);
initialize()関数内でカウンターを追加で2個を登録します。

カウンターを三つ表示し、カウンターが1，2，3になったときに カウンターを0にするように実装してみます。
    
function ShowN() {
	if (sceneManager.GetCurrentCounterIndex("cnt1") == 1 && sceneManager.GetCurrentCounterIndex("cnt2") == 2 && sceneManager.GetCurrentCounterIndex("cnt3") == 3) {
		sceneManager.SetCurrentCounterIndex("cnt1",0)
		sceneManager.SetCurrentCounterIndex("cnt2",0)
		sceneManager.SetCurrentCounterIndex("cnt3",0)

        sceneManager.RedrawScreen();
	}
  
	sceneManager.ShowCounter("cnt1", 200, 110);
	sceneManager.ShowCounter("cnt2", 280, 110);
  	sceneManager.ShowCounter("cnt3", 360, 110);
}
ShowNで表示するカウンターを2つ追加します。
sceneManager.GetCurrentCounterIndex()で現在表示している画像の0始まりのIndexを取得します。
sceneManager.SetCurrentCounterIndex()では指定したカウンターに表示する画像をの0始まりのIndexで指定しています。


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


戻る