Question

I have a jquery game that you can view here link text

The game starts by you entering a number in a text field.
then you click the play button.

After clicking the play button a set of square appear each rotating random numbers, click on the square that has your number to build up your score, miss 3 times and you are done.

I added the game to my site, you can view it here link text

the problem I’m having is that my site members will just keep the cursor on one box and wait for their number to appear in that one box. Which ruins the game.
Is there a way to make it so they can’t click on the same box more than once in a row. They’ll have to go click another box before they can come back to this one.

here’s my complete script

    var hitCount = 0,
missCount = 0;

function IsNumeric(n) {
return !isNaN(n);
}

$("#getit").click(function() {
var hitCount = 0,
missCount = 0;
$('#hitcount').text(0);
$('#misscount').text(0);

$('#message').hide(100);  
var li = [],
    intervals = 0,
    n = parseInt($('#MyNumber').val());

var intervalId = -1;
if (IsNumeric(n)) {
    intervalId = setInterval(function() {
        li[intervals++ % li.length].text(Math.random() > .1 ? Math.floor(Math.random() * (10 + n) + (n / 2)) : n).attr('class', '')    ;
    }, <?php echo $time ?>);
}

$('#randomnumber').empty();

for (var i = 0; i < 7; i++) {
    li.push($('<li />').appendTo('#randomnumber'));
}

$('#randomnumber').delegate("li", "click", function() {
        var $this = $(this);

        if (!$this.hasClass('clicked')) {
            if (parseInt($this.text(), 10) === n) {
                $this.addClass('correct');
                $('#hitcount').text(++hitCount);
            } else {
                $this.addClass('wrong');
                $('#misscount').text(++missCount);
            }

            //New code If the missCount > 3 stop the game and save the value
            if(missCount>=<?php echo $limit ?>){
               clearInterval(intervalId);
               $('#randomnumber').undelegate("li", "click");
                // Use a ajax request to save the values

$.ajax({
type : 'POST',
url : 'FBhighscore_hwnd.php',
dataType : 'json',
data: {
tgameid: $('#tgameid').val(),MyNumber: $('#MyNumber').val(),totalHits: hitCount
},
success : function(data){
$('#waiting').hide(500);
$('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
.text(data.msg).show(500);
if (data.error === true)
$('#loginForm').show(500);
else
$('#send').hide(500);  
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
$('#waiting').hide(500);
$('#message').removeClass().addClass('error')
.text('There was an error.').show(500);
$('#loginForm').show(500);
}
});

            }
        }

        $this.addClass('clicked');
    });

return false;
});

Answer 1

Have you tried using .one() to bind your click events, instead of .click()? Here’s the documentation for it: http://api.jquery.com/one/

If you bind the click event with .one() then you could ensure that the function will only be triggered once. Then, inside that function, rebind the events for all other boxes, thus ensuring that they have to click another box before click the same one again.

Alternately:

Use a combination of .hover() and setTimeout() (and possibly hoverIntent) to disable a box when the user hovers their mouse over it for too long.

EDIT

Have a look at this modified version of your jsFiddle: http://jsfiddle.net/Ender/9ffTA/

Clicking on the same box twice in a row is disallowed. Hopefully you can use that as a guide.