HTML5游戏开发（三）启动画面、菜单以及关卡
一个基本的游戏对象game（js/game.js）
var game = { // 初始化对象，预加载资源，并显示开始画面
init:function(){ // 隐藏所有的游戏图层，显示开始画面
$('.gamelayer').hide();
$('#gamestartscreen').show(); // 获取游戏画布及其绘画环境的引用
game.canvas = $('#gamecanvas')[0];
game.context = game.canvas.getContext('2d');
},
}
在页面加载完成之前，就试图操作image和div元素会导致不确定行为（包括JavaScript错误）。因此需要在game.js文件顶部加一小段代码，可以确保在页面加载完成后安全地调用game.init()方法，如下所示。
$(window).load(function(){
game.init();
});
打开HTML页面，效果如下：
游戏开始画面与菜单选项
关卡选择
现在游戏HTML文件加载完成后，显示了有两个选项的主菜单。正常情况下，当玩家点击PLAY按钮后，游戏应当显示一个关卡选择画面和一系列可玩的关卡。
在此之前，需要创建一个对象来处理关卡。这个对象既包含了关卡中的数据，又要提供一些简单的函数来对关卡进行初始化，在game.js中添加这部分代码。
// 简单的关卡对象，包含关卡数据和函数var levels = { // 关卡数据
data:[
{ // 第一关
foreground:'desert-foreground', background:'cloud-background', entities:[]
},
{ // 第二关
foreground: 'desert-foreground', background: 'cloud-background', entities: []
}
],
// 初始化关卡选择画面
init:function(){ var html = ""; for (var i = 0; i < levels.data.length; i++){ var level = levels.data[i];
html += '';
}
$('#levelselectscreen').html(html); // 单击按钮时加载关卡
$('#levelselectscreen input').click(function(){
levels.load(this.value-1);
$('#levelselectscreen').hide();
});
}, // 为某一关卡加载所有的数据和图像
load:function(number){
}
}
levels对象有一个data数组，数组的每一个元素表示一个关卡。目前数组中元素只存储前景图和背景图。之后我们可以在其中加入英雄、敌人和可摧毁障碍物的信息，这样就可以通过数组中加入新元素来快速构建新关卡了。
levels对象也具有一个init()方法，该方法遍历所有的关卡数据，然后动态生成每一关的开始按钮。关卡按钮的click事件会调用相应关卡的load()方法，并隐藏关卡的选择界面。
从game.init()方法中调用levels.init()来生成关卡选择按钮，如下所示：
init:function(){ // 初始化对象
levels.init(); // 隐藏所有的游戏图层，显示开始画面
$('.gamelayer').hide();
$('#gamestartscreen').show(); // 获取游戏画布及其绘画环境的引用
game.canvas = $('#gamecanvas')[0];
game.context = game.canvas.getContext('2d');
},
同时，我们也需要在styles.css中为这些按钮添加样式。
关卡选择画面的CSS样式
/* 关卡选择画面 */#levelselectscreen { padding-top: 150px; padding-left: 50px;
}#levelselectscreen input { margin: 20px; cursor: pointer; background: url(images/icons/level.png) no-repeat; color: yellow; width: 64px; height: 64px; border: 0; font-size: 20px;
}
接下来，在game对象中创建简单的game.showLevelScreen()方法，用来隐藏主菜单，显示关卡选择界面。
game对象中的showLevelScreen()方法
// 隐藏主菜单，显示关卡选择界面
showLevelScreen:function(){
$('.gamelayer').hide();
$('#levelselectscreen').show('slow');
}
该方法首先隐藏了所有的游戏图层，然后用慢速动画显示levelselectscreen层。
最后，PLAY按钮被单击时让其调用game.showLevelScreen()方法。该方法使PLAY按钮image元素的事件响应方法：
开始游戏并单击PLAY按钮，效果如下：
关卡选择画面
如图所示，目前的游戏只有两关，但是，随着我们添加更多的关卡，代码也会自动侦测到并显示正确数目的按钮。当用户单击这些按钮时，浏览器就会调用levels.load()方法加载按钮对应的关卡，不过我们还没实现这个方法。
以上。
作者：Viljw
链接：https://www.jianshu.com/p/900c1704e631
作者：FFIVE
链接：https://www.imooc.com/article/33215
来源：慕课网