前回の「初めてのenchant.js 006音を鳴らす[JavaScript]」では、
音を鳴らしてみました。
ソースコードがちょっとごちゃってしまって、ですので。
今回は、リファクタリングしたいとおもいます。

完成サンプル

HTMLの方は特に変更なしです。
[index.html]

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>enchant.js example 007</title>
	<script type="text/javascript" src="js/enchant.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
	<div id="enchant-stage"></div>
	<h1>enchant.js example 007</h1>
</body>
</html>

次にmain.jsに手をつけます。
基本的には以下に準拠出来るように進めていきたいと考えています。

・１ファイル内は100行くらい
・１つの関数は１画面以内＆ひとつのことしかしない。
・必ず！！！！関数変数名は何をしているかがわかる名前にすること。

まずリファクタリング前コード

enchant();
window.onload = initGame;
var game;
var scene;
var bear;
var score;
function initGame(){
	game = new Game(320,320);
	game.preload(
		'images/chara0.gif',
		'images/chara1.gif',
		'sounds/jump.wav',
		'sounds/gameover.wav'
	);
	game.onload = main;
	game.start();
}
function main(){
	game.scale = 1;
	scene = new Scene();
	scene.backgroundColor = "#000";
	game.pushScene(scene);
	bear = new Sprite(32,32);
	bear.image = game.assets['images/chara1.gif'];
	bear.x = 100;
	bear.y = 100;
	scene.addChild(bear);
	score = new Label("0123456");
	score.color = "#FC9";
	score.font = "normal normal 15px/1.0 monospace";
	score.text = "00990";
	scene.addChild(score);
	game.assets['sounds/gameover.wav'].play();
	game.assets['sounds/jump.wav'].play();
}

→「行がくっつきすぎだなー」と思って関数と変数の間を2行開けました。(２行は多いと言われそうだがまぁ好みかも)
→「関数main()がいっぱいいっぱいだ。」と思い以下のとおり関数を分けていきました。
　→init系の関数をつくろう、、、あっ既にinitGmaeと付けている改名しよう。
　　→initGame()を改名　命名「preloadAssets()」
　　→main()を改名　命名「init()」
　　→initはセットアップだけを詰め込もう。
　　→main()を追加(復活)この部分にメインのゲームをプログラムしよう。※１
　　
※１：のちのちは簡単なミニゲームを完成させる予定です。

以下はリファクタリング後のコード、
ちょっとだけ見やすくなった気もする。
今後もまめに続ければこれくらいライトなリファクタリングを豆に繰り返す事がゴールへの近道。と思っています。

次回は「初めてのenchant.js 008イベント(基本編)[JavaScript]」です。

[main.js]

enchant();
window.onload = preloadAssets;

var game;
var scene;
var bear;
var score;


function preloadAssets(){
	game = new Game(320,320);
	game.preload(
		'images/chara0.gif',
		'images/chara1.gif',
		'sounds/jump.wav',
		'sounds/gameover.wav'
	);
	game.onload = init;
	game.start();
}


function init(){
	game.scale = 1;
	scene = new Scene();
	scene.backgroundColor = "#000";
	game.pushScene(scene);
	
	bear = new Sprite(32,32);
	bear.image = game.assets['images/chara1.gif'];
	bear.x = 100;
	bear.y = 100;
	scene.addChild(bear);
	
	score = new Label("0123456");
	score.color = "#FC9";
	score.font = "normal normal 15px/1.0 monospace";
	score.text = "00990";
	scene.addChild(score);	
	
	main();
}


function main(){
	game.assets['sounds/gameover.wav'].play();
	game.assets['sounds/jump.wav'].play();	
}

次回は「初めてのenchant.js 008イベント(基本編)[JavaScript]」です。

初めてのenchant.js 一覧

こちらもオススメ(別サイト)

enchant.js 怒涛の 100 tips
phiさんの怒涛のTips集：なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。

ドットインストール：enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい＆enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。