游戏开始前的各种资源初始化，玩家事件的绑定，信息的本地存储（这是用了库store虽然自己写也很简单，但这个做了合成，更小）。
开始界面修改
增加了loading场景和游戏主场景（目前为空）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>胡子-即时战略游戏</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/store.js" type="text/javascript" charset="utf-8"></script>
<script src="js/resourceloader.js" type="text/javascript" charset="utf-8"></script>
<script src="js/singlegame.js" type="text/javascript" charset="utf-8"></script>
<script src="js/game.js" type="text/javascript" charset="utf-8"></script>
<script src="js/task.js" type="text/javascript" charset="utf-8"></script>
<script src="js/sounds.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="gamecontainer">
<div id="startscene">
<div id="singleplayer" class="gamebtn_"></div>
<div id="multiplayer" class="gamebtn_"></div>
<div id="config" class="gamebtn_"></div>
<div id="aboutme" class="gamebtn_"></div>
<div id="checkbullet"></div>
<div id="hero1" class="hero_"></div>
<div id="hero2" class="hero_"></div>
<div id="hero3" class="hero_"></div>
</div>
<div id="gamescene"></div>
<div id="loadingscene">
<div id="progressbar"></div>
<div id="progresstip"></div>
</div>
</div>
</body>
</html>我们将不同的功能，写在了不同js里，如main.js（前面章节中的common.js，叫做main更合适些），绑定了用户选择事件，并调用store.js存储选择信息（英雄信息）。
main.js
main.js做了如下事情：
1、绑定选择英雄的事件。
2、事件触发后，初始化游戏。目前只处理单人游戏事件。
3、初始化资源（后面会详细说）。
4、当音乐初始化资源完，播放背景音乐（后面会详细说）。
5、恢复用户的信息。
$(function(){
$(".hero_").click(function(){
var selectedHero = $(this).attr("id");
if(selectedHero){
var checkbulletY = selectedHero == "hero1"?"160px":selectedHero =="hero2"?"255px":"350px";
$("#checkbullet").css({"top":checkbulletY});
var data = store.get('data');
data.hero = selectedHero;
data.checkbullety = checkbulletY;
data.task = 0;//目前没有开发任务，都从头开始
store.set('data',data);
}
});
$(".gamebtn_").click(function(){
var item = $(this).attr("id");
switch(item){
case 'singleplayer':
singlegame.init();
break;
case 'multiplayer':
case 'config':
case 'aboutme':
}
});
});
$(window).load(function() {
resourceloader.init();
sounds.init();
if (resourceloader.loaded){
sounds.bgMusic();
} else {
resourceloader.onload = sounds.bgMusic;
}
if(store.get('data')){
$("#checkbullet").css({"top":store.get('data').checkbullety});
}else{
store.set('data',{hero:"hero1",checkbullety:"160px",task:0});
}
});singlegame.js
在main.js中，玩家单击单人游戏后，singlegame会初始化游戏，目前做了一下事情：
1、显示loading画面。
2、根据当前的任务（可以理解为第几关卡），在loading的同时，显示任务的描述。
3、初始化当前任务的资源（后面会详细说明）
4、3步完成后启动游戏，没完成交给资源加载器去启动游戏（加载完成时）。
5、启动游戏，隐藏loading场景，显示游戏主场景（待续）
var singlegame = {
init:function(){
$('#loadingscene').show();
var currentTask = task[store.get('data').task];
$('#progresstip').html('<strong>'+currentTask.name+'</strong><br/>'+currentTask.briefing);
game.currentTask = currentTask;
game.currentMapImage = resourceloader.loadImage(currentTask.mapImage);
if (resourceloader.loaded){
singlegame.start();
} else {
resourceloader.onload = singlegame.start;
}
},
start:function(){
//待续
//$('#loadingscene').hide();
//$('#gamescene').show();
},
exit:function(){
}
};task.js
所有任务的信息。如任务名称，简介、地图、音乐等。目前只有一个任务“起局”。
var task = [
{
"name":"起局",
"briefing": "兄弟滴血喝酒，插香敬十八罗汉，拜达摩老祖，聚义起誓，大当家报号，。。。",
"mapImage":"images/maps/1.jpg",
"music":["0_1","0_2"]
}
]
截图
看下今天我们成果截图和听了让人心情激荡的背景音乐，呵呵。
总结
将游戏中的场景（div）摆放到index.html，调整默认的显示形式、背景等。
同时初始化游戏资源或功能。如有本地存储信息则读取，并设置页面显示。
绑定用户的输入事件，并做处理函数。
存储用户的输入信息。
启动游戏。
加载当前任务资源。
开始游戏。
svn和git将在晚些更新（代码可能还需要调整，呵呵）
下午要陪孩子去画画，估计明天才能更新。
未完待续。。。
来源：oschina
链接：https://my.oschina.net/u/933274/blog/210599