enchant.jsを勉強する１

Tweet

[`evernote` not found]

前回に引き続き、enchant.jsを色々勉強してみました。
基本的な動作がわかってきたので次からは実際ゲームを作ってみたいと思います。

＊ボタンの追加と速度の変更

enchant();
window.onload = function() {
	var game = new Game(320, 320);
	game.keybind(17, 'ctrl');
	
	game.preload('chara0.gif');
	game.onload = function() {
		var player = new Sprite(16, 24);
		player.image = game.assets['chara0.gif'];
		game.rootScene.addChild(player);
		player.direction = 0;
		player.walk=0;
		var spd = 5;
		var m_spd = 1.0;
	    player.addEventListener('enterframe', function(e) {
	        if (game.input.left){this.x -= m_spd;this.direction = 1;}
	        if (game.input.right){this.x += m_spd;this.direction = 2;}
	        if (game.input.up) {this.y -= m_spd;this.direction = 3;}
	        if (game.input.down){ this.y += m_spd;this.direction = 0;}
	        
	        game.addEventListener('ctrlbuttondown', function() {
	        	spd = 1;
	        	m_spd = 3;
	        });
	        game.addEventListener('ctrlbuttonup', function() {
	        	spd = 5;
	        	m_spd = 1;
	        });
	        
	        if (!(game.frame % spd)){this.walk++;}
	        if(this.walk == 3){this.walk = 0;}
			this.frame = this.direction*6 + this.walk;
	    });
	}
	game.start();
}

game.keybind(17, ‘ctrl’);
キーバインドを設定。ctrlキーをctrlで登録

var spd = 5;
var m_spd = 1.0;
初期移動速度と、アニメーション速度を設定

game.addEventListener(‘ctrlbuttondown’, function() {
spd = 1;
m_spd = 3;
});
game.addEventListener(‘ctrlbuttonup’, function() {
spd = 5;
m_spd = 1;
});

ctrlが押されたときと話されたときに移動速度とアニメーション速度を変更

if (game.input.left){this.x -= m_spd;this.direction = 1;}
if (game.input.right){this.x += m_spd;this.direction = 2;}
if (game.input.up) {this.y -= m_spd;this.direction = 3;}
if (game.input.down){ this.y += m_spd;this.direction = 0;}

if (!(game.frame % spd)){this.walk++;}
移動速度とアニメーション速度を変数に変更

初期状態ではボタンが上下左右とABボタンとなっています。更にここにボタンを追加することで様々なアクションを追加することができました。
ボタンはキーコードが取得できればなんでもいいようですが、今回はCTRLキーにしました。なんとなく。

＊テキストの表示

enchant();
window.onload = function() {
	var game = new Game(320, 320);
	game.keybind(17, 'ctrl');
	var state = new Label();
	state.text = "初期化中";
	state.color = "#000000";
	state.x = 20;
	state.y = 270;
	game.preload('chara0.gif');
	game.onload = function() {
		var player = new Sprite(16, 24);
		player.image = game.assets['chara0.gif'];
		game.rootScene.addChild(player);
		game.rootScene.addChild(state);
		game.rootScene.backgroundColor = "#cccccc";
		player.direction = 0;
		player.walk=0;
		var d_text = ["下","左","右","上"];
		var s_text = "遅い";
		var spd = 5;
		var m_spd = 1.0;
	    player.addEventListener('enterframe', function(e) {
	        if (game.input.left){this.x -= m_spd;this.direction = 1;}
	        if (game.input.right){this.x += m_spd;this.direction = 2;}
	        if (game.input.up) {this.y -= m_spd;this.direction = 3;}
	        if (game.input.down){ this.y += m_spd;this.direction = 0;}
	        
	        game.addEventListener('ctrlbuttondown', function() {
	        	spd = 1;
	        	m_spd = 3;
	        });
	        game.addEventListener('ctrlbuttonup', function() {
	        	spd = 5;
	        	m_spd = 1;
	        });
	        
	        if (!(game.frame % spd)){this.walk++;}
	        if(this.walk == 3){this.walk = 0;}
			this.frame = this.direction*6 + this.walk;
			
			if(spd == 1){s_text = "早い";}else{s_text = "遅い";}
			state.text = "あなたはX:" + this.x + " Y:" + this.y + "の位置に<br>" + d_text[this.direction] + "を向いています。\n　速度:" + s_text;
	    });
	}
	game.start();
}

var state = new Label();
state.text = “初期化中”;
state.color = “#000000”;
state.x = 20;
state.y = 270;

新しいラベルオブジェクト satateを作成。テキストとテキストの色、XY座標を指定。

game.rootScene.addChild(state);
作成したsatateオブジェクトをrootSceneに配置

game.rootScene.backgroundColor = “#cccccc”;
rootSceneの背景を変更する。

var d_text = [“下”,”左”,”右”,”上”];
var s_text = “遅い”;
表示するテキストの初期化

if(spd == 1){s_text = “早い”;}else{s_text = “遅い”;}
state.text = “あなたはX:” + this.x + ” Y:” + this.y + “の位置に
” + d_text[this.direction] + “を向いています。\n　速度:” + s_text;
テキストの内容を更新

新しくテキストを追加します。現在のXY座標と、移動速度と方向が表示されます。

＊領域からでようとした場合の処理

enchant();
window.onload = function() {
	var game = new Game(320, 320);
	game.keybind(17, 'ctrl');
	var state = new Label();
	state.text = "初期化中";
	state.color = "#000000";
	state.x = 20;
	state.y = 270;
	game.preload('chara0.gif');
	game.onload = function() {
		var player = new Sprite(16, 24);
		player.image = game.assets['chara0.gif'];
		game.rootScene.addChild(player);
		game.rootScene.addChild(state);
		game.rootScene.backgroundColor = "#cccccc";
		player.direction = 0;
		player.walk=0;
		var d_text = ["下","左","右","上"];
		var s_text = "遅い";
		var spd = 5;
		var m_spd = 1.0;
	    player.addEventListener('enterframe', function(e) {
	        if (game.input.left){this.x -= m_spd;this.direction = 1;}
	        if (game.input.right){this.x += m_spd;this.direction = 2;}
	        if (game.input.up) {this.y -= m_spd;this.direction = 3;}
	        if (game.input.down){ this.y += m_spd;this.direction = 0;}
	        
	        game.addEventListener('ctrlbuttondown', function() {
	        	spd = 1;
	        	m_spd = 3;
	        });
	        game.addEventListener('ctrlbuttonup', function() {
	        	spd = 5;
	        	m_spd = 1;
	        });
	        
	        if (!(game.frame % spd)){this.walk++;}
	        if(this.walk == 3){this.walk = 0;}
			this.frame = this.direction*6 + this.walk;
			
			if(this.x > 304){this.x = 304;}
			if(this.x < 0){this.x = 0;}
			if(this.y > 296){this.y = 0;}
			if(this.y < 0){this.y = 296;}
			
			if(spd == 1){s_text = "早い";}else{s_text = "遅い";}
			state.text = "あなたはX:" + this.x + " Y:" + this.y + "の位置に<br>" + d_text[this.direction] + "を向いています。\n　速度:" + s_text;
	    });
	}
	game.start();
}

if(this.x > 304){this.x = 304;}
if(this.x < 0){this.x = 0;} if(this.y > 296){this.y = 0;}
if(this.y < 0){this.y = 296;} プレイヤーがX座標の領域から出ようとした場合は座標を出られない位置まで戻す。 プレイヤーがY座標の領域を出ようとした場合、上下でループさせる。 座標値は左上を基準にするので注意。 現在の仕様だと領域外にも移動できてしまいます。 そのため領域を出ようとしたときの処理を追加しています。