Question

I am creating a whack-a-mole style game where a sum is given and numbers animate from the bottom of the container to the top. The aim of the game is to click the correct answer to the sum and collect as many correct answers as possible.

My problem is that the user can click the numbers and other icons multiple times, causing it to crash. Is there a way to overcome this?

I have tried this jQuery one function

$(".character").one("click", function() {
});

But the icons re-appear so I need them to be clickable again.

I have also tried to set a time out but cannot seem to get it working. Can someone point e in the right direction.

    setTimeout(function() {
    $(".character").one("click", function() {
    });
}, 3000);

Fiddle: http://jsfiddle.net/GvNB8/

Answer 1

Your main problem is that you are not interacting with the characters when re-showing them. In that case the only way to prevent the user from clicking is building in a method to prevent clicking twice in quick succession with a timeout.

That method would look something like this:

function clickThrottled(fn) {
  var click = true;
  return function () {
    if(click) {
      click = false;
      fn.apply(this, arguments);
      setTimeout(function () { click = true; }, 1000);
    }
  };
}

You then use the function like this:

$('.character').click(clickThrottled(function () {
   // do your one time magic.
}));

What I am using here is JavaScript closures. The function you pass to the click event handler will only call the underlying function once, then ignore all calls for 1 second and then re-enable itself.

I’d still suggest you go with a normal method of just re-enabling the elements when they are redrawn onto the screen – but the above also works..