enchant.js：クラスの勉強用シューティングゲーム

enchant.jsを使って、クラスの勉強をしようと思い『pocketshooting』というスマートフォン向けシューティングゲームを作った。

クリックで別ウインドウで起動

ソースコード他一括ダウンロードは、こちら

プレイヤーは、タッチで移動できる。ショットはオートショット。
プレイヤーの操作はタッチした位置から相対的に移動させたいため、最初にタッチした位置（touchstartイベント）とプレイヤー位置との差分を求め、指を動かしたとき（touchmoveイベント）に差分を加算している。

GameMain.js 55行目以降

		// 最初のタッチ時にタッチした初期位置と主人公位置の差分を取得
		scGame.addEventListener("touchstart", function(e){
			player.sx = player.x - e.x;
			player.sy = player.y - e.y;
		});
		// 指を動かしたときに主人公が相対的に移動する
		scGame.addEventListener("touchmove", function(e){
			player.x = player.sx + e.x;
			player.y = player.sy + e.y;
		});

ゲームの設定部分は、User.jsにまとめた。適当に変えて下さい。

/*
 * ユーザ定義定数
 */

var GAME_TITLE = "PocketShooting!";	// ゲームタイトル（アルファベットのみ）
var CLEAR_TITLE = "Life is a Game!!";	// クリア時タイトル（アルファベットのみ）
var TEKI1 = 60;						// 敵1の発生確率
var TEKI2 = 100;						// 敵2の発生確率
var TEKI_SECONDS = 5;				// n秒後に敵の出現率がアップ
var BOSS_HP = 30;					// ボスの体力
var BOSS_SCORE = 1500;				// ボスが出現する点数
var SHOT_INTERVAL = 15;				// プレイヤー弾のショット間隔
var BG_TITLE_COLOR = "#ddd";		// タイトル画面の背景色
var BG_GAME_COLOR = "skyblue";		// ゲーム画面の背景色

enchant.jsのremoveChildメソッドは、画面からキャラクタなどが消えるだけで、オブジェクト変数はメモリに残っている。クラス変数で、オブジェクトの状態を生成時は、ACTIVEにしておき、画面から消去（removeChild）したときモードをDIEにするようにした。

ClassKya.js

/*
 * 「きゃっ」という字を表示するクラス
 */

var Kya = Class.create(Sprite, {
	initialize: function(x, y){
		Sprite.call(this, 64, 64);
		this.image = game.assets[IMG_KYA];
		this.mode = ACTIVE;
		this.power = -5;
		this.vy = this.power;
		this.vx = 1;
		this.moveTo(x, y);
		this.timer = game.frame;
	},
	onenterframe: function(){
		if(game.frame > this.timer + game.fps*3){
			scGame.removeChild(this);
			this.mode = DIE;
		}
		// ちょっとはねる動き
		this.x = this.x + this.vx;
		this.vy += 0.5;
		this.y += this.vy;
	},
});

画面書き換え時に、オブジェクトの状態がDIEのものを一括してメモリから消去してオブジェクトが増えることを防いでいる。

ObjectManager.js

/*
 * オブジェクトをメモリから消去（mode: ACTIVE/DIE）
 */

var clearObjects = function(mode){
	// 敵オブジェクト消去
	for(i in enemys){
		if(enemys[i].mode == mode)	enemys.splice(i, 1);	// spliceは配列を完全に削除
	}
	// プレイヤー弾オブジェクト消去
	for(i in beams){
		if(beams[i].mode == mode)	beams.splice(i, 1);
	}
	// その他オブジェクトの消去
	for(i in objects){
		if(objects[i].mode == mode)	objects.splice(i, 1);
	}
};

動作速度は、FireFoxでは初回起動時に固まるがなんとかプレイできる程度。IE10は、スムーズに動いた。（でもちょっと動作が速過ぎる気が）Chromeでの動作が一番なめらかに感じました。iPhone3GSでも動作はなんとか大丈夫です。わたしのiPhone4だとなめらかな動きでした。
それにしても、数年前ならJavaScriptでこんなゲームが動作するなんて思いもしなかったです。
ブラウザチェックに使われていたJavaScriptが、また返り咲いた感じがして個人的には嬉しいですね。

このゲームは、授業「ゲーム制作」用に作ったもので、これを元に改良していけば良いかと思う。
まずは、わたしならキャラクタを変更して雰囲気の違うゲームにしてみることから始める。だって、見た目って大事ですよね。

ゲーム用の画像を作るときは、別サイトで書いた記事
ゲーム用のキャラクタ画像をPNG形式で作る方法

を良かったら参考にして下さい。