首先建立一个html文档，在body里面添加一个游戏容器，再将主菜单界面元素添加到添加到游戏容器里面。
<div id="game">
<div class="screen" id="splash-screen">
<div class="screen" id="main-menu"></div>
<div class="screen" id="game-screen"></div>
<div class="screen" id="high-scores"></div>
</div>
添加Modernizr和加载脚本
<head>
...
<script src="scripts/modernizr.js"></script>
<script src="scripts/loader.js"></script>
</head>
在近几年，大家越来越关注效率，所以加载脚本越来越流行。
yepnope是一个非常流行的高速按条件异步的加载器，允许你只加载使用到的资源。我们利用基于yepnope开发的Modernizr就足够了。
如果你想使用Modernizr最新的版本，在www.modernizr.com下载即可。
对于此例子只需要选择Modernizr.load（）和 Modernizr.addTest( )特征就足够了。
建立一个加载脚本loader.js
此例子还用了sizzle一个高效的样式选择引擎，使用sizzle可以让Dom变得简单。
同样的，sizzle最新版本可以在sizzlejs.com下载。
加载器的脚本会通过调用Modernizr.load( )来加载其他需要的内容。开始他需要加载sizzle加载器和game.js和dom.js脚本。
同时加载器脚本会在游戏全局创建一个jewel命名空间类。
/**
* Created by Huangpingyi on 2016/8/10.
*/
var jewel = {};
//在加载主文件前等待
window.addEventListener("load",function(){
//开始动态加载
Modernizr.load([
{
//这些文件一直被加载
load : [
"scripts/sizzle.js","scripts/dom.js","scripts/game.js"
],//所有文件已完成加载并执行后调用
complete : function() {
//
}
}
]);
},false);
jewel.game = (function() {
var dom = jewel.dom,$ = dom.$;
/*隐藏屏幕活动，并在屏幕显示指定ID*/
function showScreen(screenId) {
var activeScreen = $("#game .screen.active")[0],screen = $("#" + screenId)[0];
if (activeScreen) {
dom.removeClass(activeScreen,"active");
}
dom.addClass(screen,"active");
}
// 公开公共方法
return {
showScreen : showScreen
};
})();
设置样式表main.css
body{
margin: 0;
}
#game{
background-image: url("../images/wood.jpg");
position: absolute;
left:0;
top:0;
background-color: rgb(30,30,30);
font-family: Rustswordsblack;
color: rgb(200,200,100);
font-size: 40px;
width: 100%;
height: 100%;
}
#game .screen{
background-image: inherit;
position: absolute;
width: inherit;
height: inherit;
display: none;
z-index: 10;
}
#game .screen.active{
display: block;
}
添加了背景图和设置了一些基本的样式
建立一个DOM帮助模块dom.js
<span style="font-size:12px;">jewel.dom = (function() {
var $ = Sizzle;
function hasClass(el,clsName) {
var regex = new RegExp("(^|\\s)" + clsName + "(\\s|$)");
return regex.test(el.className);
}
function addClass(el,clsName) {
if (!hasClass(el,clsName)) {
el.className += " " + clsName;
}
}
function removeClass(el,clsName) {
var regex = new RegExp("(^|\\s)" + clsName + "(\\s|$)");
el.className = el.className.replace(regex," ");
}
return {
$ : $,hasClass : hasClass,addClass : addClass,removeClass : removeClass
};
})();</span>dom模块最开始包含少量代码来控制css类。这里显示$()功能，只是用来关联sizzle（）功能部分。
addClass（）和removeClass（）的功能是在元素里面添加和移除一些特定的CSS类。
在加载器脚本里触发启动界面
Modernizr.load([
{
...
complete : function() {
jewel.game.showScreen("splash-screen");
}
}
]);
创建启动画面
<div id="game">
<div class="screen" id="splash-screen">
<h1 class="logo">Jewel <br/>Warrior</h1>
<span >Click to continue</span>
</div>
</div>
你可用你喜欢的字体来使你更加喜欢你的游戏。你想要使用得字体可以在www.dafont.com下载
下载好你喜欢的字体后，创建一个fonts的新文件夹，把下载的字体放入进去。
@font-face {
font-family: "Rustswordsblack";
font-weight: normal;
font-style: normal;
src: url("../fonts/rustswordsblack-webfont.woff") format("woff"),url("../fonts/rustswordsblack%20.ttf") format("truetype");
}
@font-face {
font-family: "Pypats";
font-weight: normal;
font-style: normal;
src: url("../fonts2/pypats-webfont.woff") format("woff"),url("../fonts2/Pypats.ttf") format("truetype");
}
启动界面差不多就到这里，下面创建主菜单。主菜单就是一些按钮，点击进入不同的功能。
<div id="game">
...
<div class="screen" id="main-menu">
<h2 class="logo">Jewel <br/>Warrior</h2>
<ul class="menu">
<li><button name="game-screen">Play</button>
<li><button name="hiscore">Highscore</button>
<li><button name="about">About</button>
<li><button name="exit-screen">Exit</button>
</ul>
</div>
</div>
添加屏幕模块，实现点击从启动界面进入主菜单
添加屏幕模块
大部分游戏屏幕对用户的操作都有一些反应。使用离散模块来封装该功能。直接在jewel命名空间里面添加闪屏幕模块。
ver jewel = {
screens:{ }
};
闪屏模块通过监听chick时间，当用户点击屏幕任何位置时，切换到主屏幕菜单。
新建screen.splash.js
/**
* Created by Huangpinyi on 2016/8/11.
*/
jewel.screens["splash-screen"] = (function () {
var game = jewel.game,dom = jewel.dom,firstRun = true;
function setup(){
dom.bind("#splash-screen","click",function(){
game.showScreen("main-menu");
});
}
function run() {
if(firstRun) {
setup();
firstRun = false;
}
}
return {
run : run
};
})();
首次调用时，全局的run（）函数会调用setup（）函数。在这个函数设置了一个时间处理程序，当用户点击屏幕时，切换屏幕。
dom.bind( )函数使用一个选择器字符串作为参数，找到时间后，把事件处理函数关联到事件上。
jewel.dom = (function() {
...
function bind(element,event,handler) {
if (typeof element == "string") {
element = $(element)[0];
}
element.addEventListener(event,handler,false)
}
return {
...
bind : bind
};
})();
在关联事件检测之前，dom.bind（）函数会测试element参数的类型。如果传递的是字符，它就使用Sizzle选择器字符串；否则就假定element是一个DOM元素。
你需要确定在每次屏幕显示时，run（）函数均被调用了。需要修改一下game.js里面的showScreen（）
jewel.game = (function(){
...
function showScreen(screenId) {
...
//运行屏幕模块
jewel.screens[screenId].run();
//展示屏幕html
dom.addClass(screen,"active");
}
...
})();
当闪屏第一次显示时，click（）函数会关联到屏幕，这样一次单击会使用户进入主菜单。
主菜单模块的主要功能在于管理用户点击菜单上的条目对应发生的事件。
/**
* Created by Huangpingyi on 2016/8/11.
*/
jewel.screens["main-menu"] = (function() {
var dom = jewel.dom,game = jewel.game,firstRun = true;
function setup(){
dom.bind("#main-menu ul.menu",function(e){
if (e.target.nodeName.toLowerCase() === "button") {
var action = e.target.getAttribute("name");
game.showScreen(action);
}
});
}
function run() {
if (firstRun) {
setup();
firstRun = false;
}
}
return {
run : run
};
})();
对菜单条目的单击，用户进入对应的屏幕。
Modernizr.load([
{
load : [
...
"scripts/screen.splash.js","scripts/screen.main-menu.js"
],//所有文件已完成加载并执行后调用
complete :...
}
]);
现在便可以单击屏幕进入主菜单了。
