Modernizr
...
、 に が まっているため、ロードスクリプトがますます しています.
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);
game.jsスクリプトは、アプリケーションの を します.
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
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
};
})();
domモジュールは、cssクラスを するために に のコードを む.ここに$() が されますが、sizzle() を けるために されます.
hasClass() は、エレメント を えるクラス を します.
addClass()とremoveClass()の は、 に のCSSクラスを および することです.
ローダスクリプトで インタフェースをトリガーする
Modernizr.load([
{
...
complete : function() {
jewel.game.showScreen("splash-screen");
}
}
]);
スタートアップ の
インタフェースを
Jewel
Warrior
Click to continue
ネットワークフォントの
きなフォントでゲームをもっと きにすることができます. したいフォントは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");
}
インタフェースはここまで くないので、メインメニューを します.メインメニューはいくつかのボタンで、クリックして なる に ります.
メニューには さなバージョンのゲームロゴもあります.
モジュールを し、クリックして からメインメニューに ることを する
スクリーンモジュールの
ほとんどのゲーム は、ユーザーの にいくつかの を しています. をカプセル するには、 モジュールを します. 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
};
})();
イベントの に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() が に けられ、クリックするとユーザーがメインメニューに されます.
メインメニューモジュールの な は,ユーザがメニュー のエントリをクリックして するイベントを することである.
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を っています. な です.