JavaScriptで脱出ゲームを作る方法
(画面遷移~アイテムの使用)

画面遷移

ここでは左右移動以外の画面遷移を行います。
シーンWの箱をクリックすると箱がアップのシーンに移動しましょう。

    
   	AddImage("BOX", "./img/BOX.png");

	・・・

	sceneManager.AddScene("sceneBox", "BOX", ShowBox);
        
        
まず表示する画像と画像を表示するシーン"sceneBox"をinitializeで登録します。
    
function ShowBox() {
	sceneManager.AddDefaultD("sceneW");
}
        
対応するコールバックShowBoxを追加します。
AddDefaultD()では画面下部にクリックポイントを追加し、クリックされたときにシーン"sceneW"シーンに戻るように指定しています。

以上で新しいシーンの準備は完了です。

次に作成したシーンに移動する処理を追加しましょう。
    
function ShowW() {
  	sceneManager.AddEmptyObject(237, 260, 352, 335, BoxCB);
	sceneManager.AddDefaultLR("sceneS", "sceneN");
}
        
ShowWにAddEmptyObject()でクリックポイントを追加します。
    
function BoxCB() {
	sceneManager.MoveScene("sceneBox");
}
        
クリックポイントのコールバックBoxCBを追加しsceneManager.MoveScene()でシーン"sceneBox"に移動します

以上で画面遷移が行えます。クリックでサンプル起動
現段階のコード

アイテムの使用とフラグ

ここではアイテムの使用とフラグの読み書きを行います。
箱のくぼみに四角をセットする実装をしましょう。
まずは箱のアップのシーンにクリックポイントを設定します。
    
function ShowBox() {
	sceneManager.AddDefaultD("sceneW");
  	sceneManager.AddEmptyObject(240, 226, 326, 261, BoxSwSetCB);
}
クリックしたときに呼ばれるコールバックは以下のように記載します。
    
function BoxSwSetCB() {
	if (itemManager.IsCurrent("shikaku")) {
		messageManager.ShowMessage("四角をセットした。");
		sceneManager.MoveScene("sceneBoxSw");
		itemManager.SetUsed("shikaku", true);
		flagManager.AddFlag("setSW", true);
	} else {
		messageManager.ShowMessage("穴が開いている。\nなにかはまりそうだ。");
	}
}
          
itemManager.IsCurrent("shikaku")でアイテム"shikaku"を選択しているか確認します。
選択していない場合はmessageManager.ShowMessage()でメッセージを表示しています。
選択している場合はitemManager.SetUsed()でアイテム"shikaku"使用済みにしています。
使用済みになるとアイテム欄からは消えますが、itemManager.IsHave("shikaku")はtrueを返します。
flagManager.AddFlag("setSW", true);では、フラグ"setSW"にTrueを設定しています。


今回は四角をセットした箱のアップのシーンを別に追加しています。 四角使用時にsceneManager.MoveScene("sceneBoxSw");で移動しています
        
    	AddImage("BOXsw", "./img/BOXsw.png");

・・・・

    	sceneManager.AddScene("sceneBoxSw", "BOXsw", ShowBoxSw);
        
・・・・
        
	function ShowBoxSw() {
		sceneManager.AddDefaultD("sceneW");
	}
最後に箱をクリックした際にflagManager.GetFlag("setSW")で"setSW"フラグを確認し移動先のシーンを決めます。
        

function BoxCB() {
	if (flagManager.GetFlag("setSW")) {
		sceneManager.MoveScene("sceneBoxSw");
	} else {
		sceneManager.MoveScene("sceneBox");
	}
}

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


戻る