카테고리 없음

HTML5 게임 만들기, Load Scripts

Soul-Learner 2012. 6. 7. 16:00

HTML5 게임을 작성할 때 프레임워크에 해당하는 파일을 작성하고 설정하는 부분

Before | Next : 게임 초기화면(Splash Screen) 출력

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5, 카드 맞추기 게임</title>
<link rel="stylesheet"  href="../styles/main.css" />
<script src="../scripts/modernizr.js"></script>
<script src="../scripts/loader.js"></script>
</head>
<body>
<div id="game">
	<div class="screen"  id="splash-screen"></div>
	<div class="screen"  id="main-menu"></div>
	<div class="screen"  id="game-screen"></div>
	<div class="screen"  id="high-scores"></div>
</div>
</body>
</html>


loader.js

var jewel = {};
// wait until main document is loaded
window.addEventListener("load", function() {
	// start dynamic loading
	Modernizr.load(
		[
		 {
			// these files are always loaded
			load : [
				"../scripts/sizzle.js", 
				"../scripts/dom.js",
				"../scripts/game.js"
			],
			// called when all files have finished loading
			// and executing
			complete : function() {
				alert("라이브러리 로드 완료");
				console.log("All files loaded!");
			}
		 }
		]
	);
}, false);


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
	};
})();


game.js

jewel.game = (function() {
	var dom = jewel.dom,
	$ = dom.$;
	// hide the active screen (if any) and show the screen
	// with the specified id
	function showScreen(screenId) {
		var activeScreen = $("#game .screen.active")[0],
		screen = $("#" + screenId)[0];
		if (activeScreen) {
			dom.removeClass(screen, "active");
		}
		dom.addClass(screen, "active");
	}
	// expose public methods
	return {
		showScreen : showScreen
	};
})();


modernizr.js , sizzle.js

modernizr.js
sizzle.js