JavaScriptでaddEventListenerをグローバルでないインスタンスに割り当てたい

Question

こんにちは。
enchant.jsを使ってWebゲームを作っています。
添付の画像にあるように、次々にバルーンが現れ、上昇していきます。
あるバルーンをクリックするとそのバルーンは消えます。
いずれかのバルーンが上端まで行ってしまうとゲームオーバーです。

ここで「あるバルーンをクリックするとそのバルーンは消えます。」が
うまく実装できていません。

コードは以下の通りです。

var game = null;
var bgi = null;
var ballons = [];
var sprite_size_x = 60;
var sprite_size_y = 112;
var ballon_color=0;

enchant();

function startNow(){
	var div = document.getElementById('msg');
	document.body.removeChild(div);
	
	game = new Game(1200, 800);
	game.preload('desert.png');
	game.preload('ballon.png');
	game.fps = 10;
	
	game.onload = function(){
		bgi = new Sprite(1200,800);
		bgi.image = game.assets['desert.png'];
		bgi.moveTo(0,0);
		game.rootScene.addChild(bgi);		
		game.addEventListener(enchant.Event.ENTER_FRAME, function(event){
			gameMain();
		});	
	};

	game.start();
	setTimeout(makeBallon, 1000);
};

function gameMain(){
	for(var i=0;i<ballons.length;i++){
		ballons[i].moveBy(0,-10);
	}
}

function makeBallon(){
	var ballon = new Sprite(sprite_size_x,sprite_size_y);
	ballons.push(ballon);
	ballon.image = game.assets['ballon.png'];
	ballon.frame=[ballon_color];
	var x=Math.floor(Math.random() * (game.width - sprite_size_x));
	var y=Math.floor(Math.random() * (game.height - sprite_size_y*2))+sprite_size_y;
	ballon.moveTo(x,y);
	game.rootScene.addChild(ballon);
	ballon.addEventListener(enchant.Event.TOUCH_START, function(event){
		var pos=-1;
		for(var i=0;i<ballons.length;i++){
			if(ballons[i]==this){
				pos=i;
				break;
			}
		}
		if(pos!=-1){
			ballons[pos].removeFromScene();
			ballons.splice(pos,1);
		}
	});

	ballon_color++;
	if(ballon_color>2){
		ballon_color=0;
	}
	setTimeout(makeBallon, 1000);
}

ballon変数はローカルですが、配列ballonsに入るので、インスタンスは
残っていると思うのですが、クリックしても反応がありません。
何か、良い方法はないものでしょうか？game.rootSceneにイベントを割付て
クリックした座標がどこにあるかで判定することもできますが、
スクラッチを勉強している子どもの次のステップとして提示したいので
一時的なインスタンスにイベントを割付たいです。

困っています。アドバイスお願いします。

Answer 1

ballons[pos].removeFromScene();が間違っていました。
ballon.tl.removeFromScene();にすれば良かったです。
後、thisを使うのも良くなかったです。
きちんと動作するのは、

	ballon.addEventListener(enchant.Event.TOUCH_START, function(event){
		ballon.tl.removeFromScene();
		for(var i=0;i<ballons.lenght;i++){
			if(ballons[i]==ballon){
				ballons.splice(i,1);
			}
		}
	});

です。お騒がせしました。

Comments

[hakase]

breakが抜けていました。正しくは以下です。

ballon.addEventListener(enchant.Event.TOUCH_START, function(event){
ballon.tl.removeFromScene();
for(var i=0;i<ballons.length;i++){
if(ballons[i]==ballon){
ballons.splice(i,1);
break;
}
}
});