John Sims John Sims - 5 months ago 25
jQuery Question

Jquery disable click if hover too long

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

What about the possibility of marking a square as 'inactive' once a player has clicked on it and then only re-activating it after either mouseout or mouseover on another one of the squares?

Something like this:

$('.gamesquare').click(function() {
    if(!$(this).hasClass('disabledSquare')) {

        // Do your game logic for clicks here

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

$('.gamesquare').mouseout(function() {
    $(this).removeClass('disabledSquare');
}
Comments