製作一個遊戲啓動界面，用戶點擊屏幕進入遊戲主界面
首先建立一個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>hasClass（）功能檢測了給予元素屬性的類名。
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的新文件夾，把下載的字體放入進去。
添加一個css文件聲明字體
@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");
}
菜單上還有一個小版本的遊戲logo。
<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( )函數使用一個選擇器字符串作爲參數，找到時間後，把事件處理函數關聯到事件上。
在dom.js中添加bind（）函數
jewel.dom = (function() {
...
function bind(element, event, handler) {
if (typeof element == "string") {
element = $(element)[0];
}
element.addEventListener(event, handler, false)
}
return {
...
bind : bind
};
})();
你需要確定在每次屏幕顯示時，run（）函數均被調用了。需要修改一下game.js裏面的showScreen（）
jewel.game = (function(){
...
function showScreen(screenId) {
...
//運行屏幕模塊
jewel.screens[screenId].run();
//展示屏幕html
dom.addClass(screen, "active");
}
...
})();當閃屏第一次顯示時，click（）函數會關聯到屏幕，這樣一次單擊會使用戶進入主菜單。
主菜單模塊的主要功能在於管理用戶點擊菜單上的條目對應發生的事件。
用screen.main-menu.js添加這些功能。
/**
* 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","click",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
};
})();對菜單條目的單擊，用戶進入對應的屏幕。
最終，在裝載器loader.js中添加新的文件
Modernizr.load([
{
load : [
...
"scripts/screen.splash.js",
"scripts/screen.main-menu.js"
],
//所有文件已完成加載並執行後調用
complete :...
}
]);現在便可以單擊屏幕進入主菜單了。
由於會加載圖片和資源，所以不能直接打開html文檔，我用的是 webstrom。一個很方便的工具。
