enchant.jsで、ontouchend内の命令が反応しない

Question

モグラたたきを作っているのですが、
Botan[counter].ontouchend = function(){}内の命令が作用しません。
僕の予想では、出てきたモグラ（BotanImg）をクリックすれば、得点（point）が1増えて、モグラは消える（BlackBotanImgに戻る）はずなのですが、そうなりません。

enchant();

window.onload = function(){
    var game = new Game(400,500);

    var AtariSound = "atari.mp3";
    game.preload([AtariSound]);

    var BotanImg = "botan.png";
    game.preload([BotanImg]);
    var BlackBotanImg = "blackbotan.png";
    game.preload([BlackBotanImg]);

    game.onload = function(){

        var Point = 0;
        var LIMIT_TIME = 15;
        var Mogu = [];//0=受付状態,1=点灯状態,2=休止状態
        for (var i=0;i<16;i++){
            Mogu[i] = 0;
        }    
        var RndForMogu = [];
        var ReviveTime = [];
        for (var i=0;i<16;i++){
            ReviveTime[i] = 0;
        }

        var S_MAIN = new Scene();

        game.pushScene(S_MAIN);

        S_MAIN.backgroundColor = "black";

        
        var S_Text = new Label();
        S_Text.font = "20px Meiryo";
        S_Text.color = 'rgba(255,255,255,1)';
        S_Text.width = 400;
        S_Text.moveTo(0,20);
        S_MAIN.addChild(S_Text);

        var Time_Lavel = new Label();
        Time_Lavel.font = "20px Meiryo";
        Time_Lavel.color = 'rgba(255,255,255,1)';
        Time_Lavel.width = 400;
        Time_Lavel.moveTo(0,0);
        S_MAIN.addChild(Time_Lavel);

        var Botan = new Array();


        game.onenterframe = function(){

            for (var i=0;i<16;i++){
                RndForMogu[i] = Math.floor(Math.random()*100);
                if(RndForMogu[i] == 1 && Mogu[i] == 0){
                    Mogu[i] = 1;
                }
            }

            var counter = 0;
            for (var y=0;y<4;y++){
                for (var x=0;x<4;x++){
                    Botan[counter] = new Sprite(100,100);
                    Botan[counter].x = x * 100;
                    Botan[counter].y = y * 100 + 100;
                    S_MAIN.addChild(Botan[counter]);
    
                    //////////////////////////////////////
                    //            問題の箇所　　         //
                    //////////////////////////////////////
                    Botan[counter].ontouchend = function(){//クリックされたときの対応
                        if(Mogu[counter] == 1){
                            game.assets[AtariSound].clone().play();
                            Mogu[counter] = 2; 
                            Point++;
                            ReviveTime[counter] = parseInt(game.frame/game.fps);
                        }
                    }

                    if(Mogu[counter] == 1){//画像の決定（非出現時は真っ黒な画像にする）
                        Botan[counter].image = game.assets[BotanImg];
                    }else{
                        Botan[counter].image = game.assets[BlackBotanImg];
                    }

                    if(Mogu[counter] == 2 && (ReviveTime[counter] - parseInt(game.frame/game.fps) >= 1)){//叩いた後一定時間が経てば、再び出てくる
                        Mogu[counter] = 0;
                    }
                    counter ++;
                }
            }

            S_Text.text = "スコア：" + Point;

            time = LIMIT_TIME - parseInt(game.frame/game.fps) +"";
            Time_Lavel.text = "残り時間：" + time;     

        }
    }

    game.start();
}

javascriptを用いるのは、これが初めてなので、基礎中の基礎で間違いがあるかもしれません。
ご指導宜しくお願いします。

Comments

[Lhankor_Mhy]

「Botan[counter].ontouchend = function(){}内の命令が作用しません。」とのことですが、どのような出来事を見て、そのようにお感じになったのでしょうか？

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2

[jyarin]

ご指導ありがとうございます。
「画面内に表示されたモグラ（botan.png）をクリックしたところ、音（atari.mp3）が鳴らず、Pointも増えず（「スコア：」の後の数字が0のままで）、モグラも消えなかった（blackbotan.pngが表示されなかった）」
です。

Answer 1

                    Botan[counter].ontouchend = function(){//クリックされたときの対応
                        if(Mogu[counter] == 1){

こちらのコードですが、Botan[counter]のcounterと、Mogu[counter]のcounterとは、違う値であると思うのですが、それは想定されているとおりですか？

Comments

[jyarin]

同じ値であるつもりでプログラミングを書いてきました。
しかし、2つのcounterが違う値を指すのであれば、僕はプログラムの流れ方すら理解していないでしょう。（僕の思い描いている流れでは、確実に同じ値になるため）

そして、プログラムの流れ方までここで教えて貰うのは、流石に時間をお掛けしすぎだと思いますし、本などで学べば済むと思いますので、一旦ベストアンサーといたします。

ご協力頂きありがとうございました。

[Lhankor_Mhy]

ご自分でお調べになるのは素晴らしいと思うのですが、私が言ったことが正しいのかどうかは検証されましたか？

[jyarin]

一度、2つのcounterのがどのような値をとるのかを確かめるために、47行目付近の S_MAIN.addChild(Time_Lavel);　の下に
、、、、、
var Check1 = new Label();
Check1.font = "20px Meiryo";
Check1.color = 'rgba(255,255,255,1)';
Check1.width = 400;
Check1.moveTo(0,60);
S_MAIN.addChild(Check1);

var Check2 = new Label();
Check2.font = "20px Meiryo";
Check2.color = 'rgba(255,255,255,1)';
Check2.width = 400;
Check2.moveTo(0,80);
S_MAIN.addChild(Check2);
、、、、、
と書き、また//　　問題の箇所　　　//の下を、
、、、、、
Check1.text = ""+counter;
Botan[counter].ontouchend = function(){//クリックされたときの対応
Check2.text = ""+counter;
if(Mogu[counter] == 1){
、、、、、
に書き換えたところ、座標（0，60）には何も表示されず、（0，80）にはずっと「15」と表示されていました。

このように、検証の仕方すらよく分からないのです。

こんな状況では、なにかを教えて頂いても、それに納得や検証が出来ないと思います。
なのでまずは、javascriptがどのように動くのかを学ぶ事にしますね。
ありがとうございました。
（ちなみに今までは、既存のプログラムを見て、どのように動くのかを勘で理解する、ロゼッタストーンの解読ばりに面倒で不確かな手段を使ってきました。）

[Lhankor_Mhy]

なるほど、わかりました。

それでは、この辺りを読んで、デバッグができるようになると習熟が進むかもしれません。

https://developers.google.com/web/tools/chrome-devtools?hl=ja
https://developer.mozilla.org/ja/docs/Web/API/console#Outputting_text_to_the_console