JavaScriptで脱出ゲームを作る方法
(ゲームの起動準備～部屋内の移動)

ゲームの起動 (最初の画面の表示)

まずは起動をして最初の画面を表示してみましょう。
htmlファイルを作成しbody内に以下の用に記載します。 
    
<canvas id="game_canvas" width="760" height="570" style="user-select:none"></canvas><br>
<script type="text/javascript" src="./marudatsu-1.00.js"></script>
<script type="text/javascript" src="./game2-1.js"></script>
1.00以外のMARUDATSUJSを使用する場合はmarudatsu-1.00.jsを対象のバージョンのファイル名に変更します。
game2-1.jsは作成するjavascriptのファイル名に変更します。

今回の game2-1.jsは以下の通りです。 
    
/////////////////Firstly this methid will be called 
function initialize() {
	//add all images//
	AddImage("N", "./img/N.png"); // background image should be 600x400

	//add all scenes//
	sceneManager.AddScene("sceneN", "N", ShowN);

	PrepareGame();
}

/////////////////after PrepareGame this function  will be called
function StartGame() {
	sceneManager.MoveScene("sceneN");
}
/////////////////functions for each screen
function ShowN() {
}

//////////////////////////////////////////keep below
initialize();
initialize関数の中で使用する画像とシーンをAddImage、sceneManager.AddSceneそれぞれ呼び出し登録します。
全ての画像とシーンの登録が完了後にPrepareGame();を呼び出します。
シーンは背景画像を持つ場面を表します。 
AddImage("N", "./img/N.png");
"./img/N.png"を"N"という名前で登録しています。 
sceneManager.AddScene("sceneN", "N", ShowN);
AddImageで登録した画像 "N"を表示しShowNを呼び出すシーンを"sceneN"の名前で登録しています。

PrepareGame();の処理が完了すると自動でStartGame()が呼び出されます。
StartGame()にはゲームを始めるための処理を書きます。
今回はsceneNを表示するために sceneManager.MoveScene("sceneN");を呼び出しています。
画像“N”("./img/N.png")が表示され、ShowN()が呼び出されます。

以上でゲームの起動 (最初の画面の表示)が行えます。クリックでサンプル起動
現段階のコード

部屋内の移動

つづいて部屋の中を回れるようにしましょう。
initialize()内で残りの画像　　を追加します。 
    
	AddImage("E", "./img/E.png");
	AddImage("S", "./img/S.png");
	AddImage("W", "./img/W.png");
追加した画像を表示するシーンを追加します。 
    
	sceneManager.AddScene("sceneS", "S", ShowS);
	sceneManager.AddScene("sceneE", "E", ShowE);
	sceneManager.AddScene("sceneW", "W", ShowW);
シーンごとのコールバックを追加します。 
    
function ShowS() {
	sceneManager.AddDefaultLR("sceneE", "sceneW");
}
function ShowE() {
	sceneManager.AddDefaultLR("sceneN", "sceneS");
}
function ShowW() {
	sceneManager.AddDefaultLR("sceneS", "sceneN");
}
        
    
    	sceneManager.AddDefaultLR("sceneS", "sceneN");
上記の関数で左右に移動するためのクリックポイントを作成します。
上では左側のクリックポイントをクリックすると"sceneS"、右側のクリックポイントをクリックすると"sceneN"に移動するとクリックポイントを作成しています。
同様にfunction ShowN() 内で sceneManager.AddDefaultLR("sceneW", "sceneE");を呼び出して完成です。

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


戻る