enchant.jsを勉強する2 敵の配置と衝突判定

Tweet

[`evernote` not found]

enchant.jsも慣れてきたのでゲームっぽいのを作ってみようかと思います。
使用する画像が増えたのでchara1.gifとchara3.gifとicon.gifをフォルダにコピーして使っています。

*上下に移動する敵を作る。

enchant();
window.onload = function() {
	var game = new Game(320, 320);
	game.preload('chara3.gif','chara1.gif');

		
	game.onload = function() {
		var player = new Sprite(32, 32);
		player.image = game.assets['chara3.gif'];
		player.frame = 12;
		player.x = 20;
		player.y = 80;

		var enemy = new Sprite(26, 24);		
		enemy.image = game.assets['chara1.gif'];
		enemy.x = 160;
		enemy.y = 50;
		spd=3;
		enemy.direction = 1*spd;		
		game.rootScene.addChild(player);
		game.rootScene.addChild(enemy);
		
		game.x =200;
		game.rootScene.addChild(enemy);
		var enemy2 = enemy;
		enemy2.x = 200;
		game.rootScene.addChild(enemy2);
		
		enemy.addEventListener('enterframe', function(e) {
				this.y += this.direction;
				if(this.y > 200){this.direction = -1*spd;}
				if(this.y < 30){this.direction = 1*spd;}
		});
	}
	game.start();
}

game.preload(‘chara3.gif’,’chara1.gif’);
今回は画像を２枚使うので、プレロードに２枚選択します。

enemy.addEventListener(‘enterframe’, function(e) {
this.y += this.direction;
if(this.y > 200){this.direction = -1*spd;}
if(this.y < 30){this.direction = 1*spd;} }); キャラクターが下にいったら方向を転換します。上に行ったときも転換します。 では上を参考に、敵部分の作成ルーチンを関数化して、複数の敵を出現させましょう。 *敵の作成を関数化して、複数の敵を制作する。 [php] enchant(); window.onload = function() { var game = new Game(320, 320); game.preload('chara3.gif','chara1.gif'); var enemys = []; //エネミーの初期設定 game.onload = function() { //プレイヤーキャラクターの設定 var player = new Sprite(32, 32); player.image = game.assets['chara3.gif']; player.frame = 12; player.x = 20; player.y = 80; game.rootScene.addChild(player); //エネミー作成関数 var create_enemy = function(e){ var enemy = new Sprite(26, 24); enemy.image = game.assets['chara1.gif']; var enemy_index = enemys.length - 1; //エネミーのインデックスを作成0～ enemy.x = 160 + enemy_index * 30; //エネミーのインデックスを基準に配置箇所を設定(X座標) enemy.y = 50 + enemy_index * 30; //エネミーのインデックスを基準に配置箇所を設定(Y座標) spd=enemy_index+1; //エネミーのスピードを場所に依って変動 enemy.direction = 1*spd; enemy.addEventListener('enterframe', function(e) { this.y += this.direction; if(this.y > 200){this.direction = -1*spd;} if(this.y < 30){this.direction = 1*spd;} }); return enemy; } for (var i = 0; i < 3; i++) { //エネミー表示準備。３匹作成する。 var enemy = create_enemy(); enemys.push(enemy); game.rootScene.addChild(enemy); } } game.start(); } [/php] 同じタイプのオブジェクトを複数配置する方法は 落ちてくるクマさんをぶっ飛ばすゲーム – enchant.jsの練習 @fkoji
このサイトのソースが参考になりました。

では次に弾を作成しましょう。弾はスペースキーで発射できて、右方向に画面端まで移動して、画面端に到達したら消滅します。
弾は最大３発まで表示するようにして、敵にあたった場合敵が消滅します。
また、弾は一度撃つと一定時間発射できないようにします。

*弾を作る。弾と敵が当たった場合は敵が消滅する。

enchant();
window.onload = function() {
	var game = new Game(320, 320);
	game.preload('chara3.gif','chara1.gif','icon.gif');
	var enemys = [];		//エネミーの初期設定
	var shots = [];			//弾の初期設定；
	var max_shot = 3; //弾の最大発射数
	var now_shot = 0;
	var shot_lag = 10; //一度打った後次の弾が撃てるようになるまでのフレーム数。
	var shot_frame = 0;
	game.keybind(32, 'space');		//キーバインドの設定
	game.onload = function() {
		//プレイヤーキャラクターの設定
		var player = new Sprite(32, 32);
		player.image = game.assets['chara3.gif'];
		player.frame = 12;
		player.x = 20;
		player.y = 80;
		game.rootScene.addChild(player);

		//エネミー作成関数
		var create_enemy = function(e){
			var enemy = new Sprite(26, 24);
			enemy.image = game.assets['chara1.gif'];
			var enemy_index = enemys.length - 1;	//エネミーのインデックスを作成0～
			enemy.x = 160 + enemy_index * 30;		//エネミーのインデックスを基準に配置箇所を設定(X座標)
			enemy.y = 50  + enemy_index * 30;		//エネミーのインデックスを基準に配置箇所を設定(Y座標)
			spd=enemy_index+1;						//エネミーのスピードを場所に依って変動
			enemy.direction = 1*spd;
			enemy.addEventListener('enterframe', function(e) {
				this.y += this.direction;
				if(this.y > 200){this.direction = -1*spd;}
				if(this.y < 30){this.direction = 1*spd;}
			});
			return enemy;
		}
		
		//自分の弾を作成
		var craete_shot = function(e){
			var shot = new Sprite(16, 16);
			shot_frame = game.frame;
			now_shot++;
			shot.speed = 3;
			shot.x = player.x + 26;
			shot.y = player.y + 8;
			shot.image = game.assets['icon.gif'];
			shot.frame = 30;
			shot.addEventListener('enterframe', function(e) {
				this.x += shot.speed;
				if(this.x > 320){game.rootScene.removeChild(this);now_shot--;}
				
				for (var i = 0; i < 3; i++) {
					if(this.intersect(enemys[i])){
						game.rootScene.removeChild(enemys[i]);
					}
				}
			});
			return shot;
		}
		
		 for (var i = 0; i < 3; i++) {
		 //エネミー表示準備。３匹作成する。
			var enemy = create_enemy();
			enemys.push(enemy);
			game.rootScene.addChild(enemy);
		}
		
		game.addEventListener('spacebuttondown', function() {
			if(shot_frame + shot_lag < game.frame){
				if(max_shot > now_shot){
					var shot = craete_shot();
					game.rootScene.addChild(shot);
				}
			}
		});

	}
	game.start();
}

これにスコアと、敵を自動で増やすとゲームっぽくなりそうですね。