Question

我正在做的项目有问题; https://codepen.io/argestis/pen/gLraBq?editors=0001

我有一个功能，就是西蒙说游戏。到目前为止，我想将颜色的值推送到数组中，然后将该数组与该函数进行比较。一切正常，直到我清空数组的值，我用来推送用户应该从GIU输入的值，当我回到函数GameOn()并尝试开始推动点击触发的值时多次。

这是参考函数，但在我上面分享的codepen的控制台上，你们可以看到我得到的错误。

function gameOn() {
    game.blue.on("click", function() {

        game.guessWhat.push(1);
        console.log("I were at blue")
        if (game.guessWhat.length !== game.count.length) {

        } else {
            verifySequence();
        }

    });

    game.red.on("click", function() {
        console.log("I were at red")
        game.guessWhat.push(2);
        if (game.guessWhat.length !== game.count.length) {

        } else {
            verifySequence();
        }
    });

    game.green.on("click", function() {
        console.log("I were at green")
        game.guessWhat.push(3);
        if (game.guessWhat.length !== game.count.length) {

        } else {
            verifySequence();
        }
    });

    game.yellow.on("click", function() {
        console.log("I were at yellow")
        game.guessWhat.push(4);
        if (game.guessWhat.length !== game.count.length) {

        } else {
            verifySequence();
        }


    });
}

谢谢你的时间，伙计们！

Answer 1

塞尔吉奥。每次我清空数组上的值时，我都会调用函数gameOn（）我正在推动新一轮的序列。但是当我点击任何一个按钮时，按钮会触发，直到与我用来比较simon序列的另一个数组相同的长度。

function nextRound(){

 game.guessWhat = [];
 game.count.push(Math.floor((Math.random() * 4) + 1))
 console.log("this is game.count: " + game.count)
 console.log("this is game.guessWhat inside nextRound function: " + game.guessWhat)
 gameOn();

}


function verifySequence(){

verify = true;

console.log("this is game.guessWhat entering verifySequence function: " + game.guessWhat)
  for(var i = 0; i < game.count.length; i++){
     if(game.count[i] !== game.guessWhat[i]){
        verify = false;
  }

   }

if(verify == true){console.log("this is game.guessWhat: " + game.guessWhat); nextRound(); }
else{clearUser();}
 }

这是游戏对象;

var game = {
count : [],
guessWhat : [],
red : $("#red"),
blue : $("#blue"),
green : $("#green"),
yellow : $("#yellow")
};

Answer 2

始终在任何函数调用之外单击一次，并且优先在ready（）上。在当前的gameOn（）方法中，您可以多次绑定点击，您可能会看到它被触发。从gameOn（）中删除它。

将点击次数绑定如下，

 $(document).ready(function(){
game.blue.on("click", function() {

    game.guessWhat.push(1);
    console.log("I were at blue")
    if (game.guessWhat.length !== game.count.length) {

    } else {
        verifySequence();
    }

});

game.red.on("click", function() {
    console.log("I were at red")
    game.guessWhat.push(2);
    if (game.guessWhat.length !== game.count.length) {

    } else {
        verifySequence();
    }


});

game.green.on("click", function() {
    console.log("I were at green")
    game.guessWhat.push(3);
    if (game.guessWhat.length !== game.count.length) {

    } else {
        verifySequence();
    }


});

game.yellow.on("click", function() {
    console.log("I were at yellow")
    game.guessWhat.push(4);
    if (game.guessWhat.length !== game.count.length) {

    } else {
        verifySequence();
    }
  });
});

Answer 3

在调用verifySequence（）时，您在同一项上注册了多个“click”事件。您可以在注册之前取消注册click事件以解决该问题

//problem in verifySequence()
function verifySequence() {
...
  if (verify) {
    console.log("this is game.guessWhat: " + game.guessWhat);
    //when you call nextRound() you register click event on the same item (multiple times)
    nextRound();
  } else {
    clearUser();
  }
}
}


//making sure to unregister 'click' event before add one
game.blue.off("click").on("click", function() {
  ...
});

game.red.off("click").on("click", function() {
  ...
});

game.green.off("click").on("click", function() {
  ...
});

game.yellow.off("click").on("click", function() {
  ...
});

功能问题，多次触发click（）

3 个答案: