ゲーム内のメニューを作る

ゲーム中に呼び出せるメニューを作ります。

こちらがスタート画面で、タップしてメイン画面に進むと・・・

左端に、menuというタブができます。

タップすると、色々な画面へ飛べるようになります。（画面は開発中のものです）

特別なものを作ったのではなく、jqueryを使った
mb.extruder
をそのまま設置しています。
用意するもの
mbExtruder.js(上記の公式HPから入手できます)
jquery

jqueryとは何か・・・というのは詳しい人に譲るとして、monacaでは簡単にjqueryを設置できます。

ビルド設定からjqueryを有効にすれば、loader.jsで自動的に読み込んでくれます。

それでは、設定してみます。
ポイントは、スタート画面ではメニューを入れず、ゲーム画面になったら表示するというところ。
まず、スタート画面であるindex.htmlに
<script src="components/mbExtruder.js"></script>と書いておきます。
もちろん、mbExtruder.jsはアップロードしておきましょう。

<script src="components/loader.js"></script>
と記述してあるかも確認します。

次に、<div id="demo-left" class="a {title:'menu'}"></div>
と、空のdivを記述しておきます。後々にメニュー部分となるところですが、今は中身を記述しません。
また、script部分に、gamstart=false;という変数を宣言しておきます。
これで下準備は完了です。

次に、main画面で、
if(menuopen === false)
{
menuopen=true;
var main = document.getElementById("demo-left");
var mainhtml='<h3><a class = "sidemenu" href="javascript:void(0)" onclick="pagejump(\'main\'); return false;">MAIN</a></h3><h3></p><h3><a class = "sidemenu" href="javascript:void(0)" onclick="pagejump(\'shop\'); return false;" >SHOP</a></h3><h3><a class = "sidemenu" href="javascript:void(0)" onclick="pagejump(\'party\'); return false;" >PARTY</a></h3>';
main.innerHTML =mainhtml;

$(function(){//以下、MbExtruderの設定
    $("#demo-left").buildMbExtruder({
    position:"left",
    width:250,
    extruderOpacity:.8,
    hidePanelsOnClose:false,
    closeOnExternalClick:true,
    accordionPanels:false,
    onExtOpen:function(){},
    onExtContentLoad:function(){$("#demo-left").openPanel();},
    onExtClose:function(){}
  });
});

}
とscript内に書きます。
こうすることで、
「メイン画面に移動した最初の一回目のみ、メニューを起動する」
という動作が行えます。後は、公式HPを見ながらお好みでMbExtruderの設定を書き換えてカスタマイズしていけばいいでしょう。

もし、戦闘中とかでメニューを消したい場合は、
var main = document.getElementById("demo-left");
var mainhtml='';
main.innerHTML =mainhtml;
menuopen=false;
と書いておけば、最初のゲーム画面に戻るまで、メニューを隠すことが出来ます。