轻装上阵Html5游戏开发，JEESJS（四）

下面我将通过完善Demo的形式，来演示下用法。首先在html中导入需要的库，我定义了一个index.html用来作为演示的入口：

index.html:

<!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>

基本导入了之后，准备程序入口模块 mod_index.js：

// 构造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

轻装上阵Html5游戏开发，JEESJS（四）

猜你喜欢