質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.10%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,286

hakase

score 84

こんにちは。
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にイベントを割付て
クリックした座標がどこにあるかで判定することもできますが、
スクラッチを勉強している子どもの次のステップとして提示したいので
一時的なインスタンスにイベントを割付たいです。

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

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

+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);
            }
        }
    });


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/13 14:58

    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;
    }
    }
    });

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる