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;
});
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');
}