輕裝上陣Html5遊戲開發，JEESJS（四）
阿新 • • 發佈：2018-12-15
下面我將通過完善Demo的形式，來演示下用法。首先在html中匯入需要的庫，我定義了一個index.html用來作為演示的入口：
index.html:
基本匯入了之後，準備程式入口模組 mod_index.js：<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, height=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script src="../../../assets/createjs/easeljs-0.8.2.min.js"></script> <script src="../../../assets/createjs/tweenjs-0.6.2.min.js"></script> <script src="../../../assets/createjs/preloadjs-0.6.2.min.js"></script> <script src="../../../assets/createjs/soundjs-0.6.2.min.js"></script> <script src="../lib/jeesjs-1.0.0.min.js"></script> <script src="mod/mod_index.js"></script> <script src="mod/mod_topbar.js"></script> <script src="mod/mod_blank.js"></script> <script src="mod/mod_ui.js"></script> <script src="mod/mod_button.js"></script> <script src="mod/mod_imagebox.js"></script> <script src="mod/mod_imagespt.js"></script> <script src="mod/mod_panel.js"></script> <script src="mod/mod_textbox.js"></script> <link href="../lib/jeesjs.min.css" rel="stylesheet" /> </head> <body> <canvas id="gCanvas"></canvas> <script type="text/javascript"> Mod_Index.init(); jeesjs.APP.init( Mod_Index ); jeesjs.APP.showFPS( true ); </script> </body> </html>
// 構造Module物件 var Mod_Index = new jeesjs.Module(); // 過載Module的enter實現 Mod_Index.enter = function(){ var size = jeesjs.APP.getSize(); var p = new jeesjs.Panel(); p.setSize( size.w, size.h ); jeesjs.CM.addWidget( p ); // 在更高一級的位置顯示選單。避免遮擋 jeesjs.MM.enter( Mod_Topbar, 1 ); }; Mod_Index.init = function(){ // 初始化一部分資源 jeesjs.QM.addSource( "btn", "res/buttons/btn_green.png" ); jeesjs.QM.addSource( "btnc", "res/buttons/btn_check.png" ); jeesjs.QM.addSource( "png", "res/demo.png" ); jeesjs.QM.addSource( "grant", "res/spritesheet_grant.png" ); jeesjs.QM.addSource( "ground", "res/ground.png" ); jeesjs.QM.addSource( "hill1", "res/hill1.png" ); jeesjs.QM.addSource( "hill2", "res/hill2.png" ); jeesjs.QM.addSource( "sky", "res/sky.png" ); }
入口處可以預載入資源，也可以通過jeesjs.QM來獲取載入進度，寫一個載入介面。
下面我們看下，模組之間的切換，操作和選單的顯示通過mod_topbar.js 來完成:
// 構造Module物件 var Mod_Topbar = new jeesjs.Module(); // 過載Module的enter實現 Mod_Topbar.enter = function() { // 邏輯屬性部分 this._index = 0; // 預設選中的選單索引 this._btns = new Array(); // 選單 this._mods = [ Mod_Blank, Mod_UI ] // 選單對應的模組物件 // 介面部分 this._panel = new jeesjs.Panel(); var size = jeesjs.APP.getSize(); this._panel.setSize(size.w, 40); this._panel.setColor("#ffffff"); var top_menus = ["首 頁", "U I"]; // 生成選單按鈕 for (var i = 0; i < top_menus.length; i++) { var tmp = new jeesjs.Button(jeesjs.Button.TYPE_NORMAL, "btn", top_menus[i], this._panel); tmp.index = i; // 定義一個用於識別是哪個按鈕的索引 tmp.setPosition(i * (tmp.getSize().w + 5), 0); tmp.setEnabled(i != this._index); tmp.onEvent("click", this._handle_click_btns ); this._btns.push(tmp); } jeesjs.CM.addWidget( this._panel ); jeesjs.MM.enter( this._mods[ this._index ], 0 ); }; // 選單的點選事件 Mod_Topbar._handle_click_btns = function(_e, _w) { var _this = Mod_Topbar; if (_this._index === _w.index) return; // 離開上一個模組 jeesjs.MM.leave( _this._mods[ _this._index ] ); // 進入下一個模組 _this._btns[ _this._index ].setEnabled( true ); _this._btns[ _w.index ].setEnabled( false ); _this._index = _w.index; jeesjs.MM.enter( _this._mods[ _this._index ] ); }
切換模組時，同時改變了對應的按鈕狀態。這採用了相對簡單的處理方式。
完整的示例，請參考這裡的Demo部分：https://github.com/aiyoyoyo/jeesjs