前回「初めてのenchant.js 013当たり判定[JavaScript]」は、当たり判定をしました。
今回は便利なオブジェクトの拡張をしてみます。

完成サンプル

まずjsフォルダの中に「Player.js」という名前で新規ファイルを追加します。

js/Player.js

次にindex.htmlにscriptタグを追加して読込を設定します。
※enchant.jsの後に読み込まないとエラーになります。

[index.html]

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

Player.jsの内容は以下のとおりです。

[Player.js]

var Player = enchant.Class.create(enchant.Sprite, {
    initialize: function(w,h){
        enchant.Sprite.call(this, w, h);
		this.addEventListener(Event.TOUCH_MOVE,this.touchMove);
    },
    touchMove:function(e){
		this.x = e.x - ( this.width / 2 );
		this.y = e.y - ( this.height / 2 );
	}
});

main.jsも少しだけ手を加えます。

[main.js]

enchant();
window.onload = preloadAssets;

var game;
var scene;
var bear;
var enemy;
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;
	game.fps = 30;
	scene = new Scene();
	scene.backgroundColor = "#000";
	game.pushScene(scene);
	
	bear = new Player(32,32);
	bear.image = game.assets['images/chara1.gif'];
	bear.x = 100;
	bear.y = 100;
	scene.addChild(bear);
	
	enemy = new Sprite(32,32);
	enemy.image = game.assets['images/chara1.gif'];
	enemy.frame = 5;
	enemy.scaleX = -1;
	enemy.x = 200;
	enemy.y = 200;
	scene.addChild(enemy);
	
	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.addEventListener(Event.UP_BUTTON_DOWN,move);
	game.addEventListener(Event.DOWN_BUTTON_DOWN,move);
	game.addEventListener(Event.RIGHT_BUTTON_DOWN,move);
	game.addEventListener(Event.LEFT_BUTTON_DOWN,move);
	game.addEventListener(Event.ENTER_FRAME,entreFrame);
}


function move(e){
	switch(e.type){
		case Event.UP_BUTTON_DOWN:
			bear.y--;
			break;		
		case Event.DOWN_BUTTON_DOWN:
			bear.y++;
			break;		
		case Event.RIGHT_BUTTON_DOWN:
			bear.x++;
			break;		
		case Event.LEFT_BUTTON_DOWN:
			bear.x--;
			break;	
		default:
			error("move()に不明なイベント" + e.type + "が渡されました。");
			break;		
	}
}


function entreFrame(e){
	if(bear.intersect(enemy)){
		score.text = "Hit";
	}else{
		score.text = "No Hits";
	}
}


function error(mes){
	alert("Error：エラーが発生しました。\nメッセージ：\n" + mes);
}

bear = new Sprite(32,32);
を
bear = new Player(32,32);
に変更。

コード解説

var Player = enchant.Class.create(enchant.Sprite, {
	・
	・
});

この部分はオブジェクトを拡張する際の基本文法です。覚えてしまいましょう。
「enchant.Class.create()」はenchant.jsで提供されるクラス作成用のメソッドです。
第1引数「enchant.Sprite」は継承するオブジェクト(Class)を指定します。
省略すると何も継承しないオブジェクトを生成します。
第2引数は、リテラル{}で追加するメソッドや、変数を記述します。

    initialize: function(w,h){
        enchant.Sprite.call(this, w, h);
		this.addEventListener(Event.TOUCH_MOVE,this.touchMove);
    },

initializeメソッドはコンストラクタとなります。
enchant.Sprite.call(this, w, h);の部分で親クラスのコンストラクタを呼び出しています。
上はオブジェクトを継承する場合は必須となります。
this.addEventListener(Event.TOUCH_MOVE,this.touchMove);は、自身に対してイベントを設定しています。

    touchMove:function(e){
		this.x = e.x - ( this.width / 2 );
		this.y = e.y - ( this.height / 2 );
	}

ここはドラッグ＆ドロップ出来るように自身の位置をマウスの位置に設定し移動させました。

まとめ

このようにオブジェクトを拡張していくことで、プログラムの拡張性や、メンテナンス性を高めることができます。

次回は「初めてのenchant.js 015簡単なミニゲーム作成[JavaScript]」です。

初めてのenchant.js 一覧

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

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

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

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

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

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