set timeout/set interval in cells
I was wondering if anyone could guide me on how to have the picture in each cell change after 2 seconds IF the user does not click it in time but if the user does click on the image, it goes to another cell (as it currently does)
Thank you
I think i would use the timeout and interval functions, but i am not sure.
PHP Code:
<html>
<head>
<STYLE type="text/css">
TD
{
FONT-WEIGHT: bold;
FONT-SIZE: 75pt;
WIDTH: 75pt;
COLOR: black;
FONT-FAMILY: Wingdings;
HEIGHT: 20pt;
TEXT-ALIGN: center
}
H5
{
MARGIN-TOP: 0px;
MARGIN-BOTTOM: 0px
}
</STYLE>
<script style="text/javascript">
var score=0;
var start;
function putscore()
{
scoreDate=new Date()
var now=scoreDate.valueOf();
if (document.getElementById)
document.getElementById("score").innerHTML=score ;
}
function reset()
{
score=0;
putscore();
}
function highlight(cell)
{
var oncell = false;
var r=Math.round(9*Math.random()) +10;
var imgSrc = "mole.jpg";
var imgCell;
if (document.getElementById) {
cell = document.getElementById(cell);
if (cell && cell.innerHTML != " ") {
cell.innerHTML = " ";
oncell = true;
}
if (oncell) {
imgCell = document.getElementById("cell_"+r);
if (imgCell)
{
imgCell.innerHTML = '<img src="mole.jpg" border="0" alt="Picture Unavailable">';
}
else
{
document.getElementById("cell_10").innerHTML = '<img src="mole.jpg" border="0" alt="">';
}
score++;
putscore();
}
}
}
</script>
</head>
<body>
<h2 align="center">Whack the Mole</h2>
<h4 align="center">Hits=<span id="score">0</span></h4>
<table border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<td id="cell_10" onclick="highlight('cell_10');return true;"><img src="mole.jpg"></td>
<td id="cell_11" onclick="highlight('cell_11');return true;"> </td>
<td id="cell_12" onclick="highlight('cell_12');return true;"> </td>
</tr>
<tr>
<td id="cell_13" onclick="highlight('cell_13');return true;"> </td>
<td id="cell_14" onclick="highlight('cell_14');return true;"> </td>
<td id="cell_15" onclick="highlight('cell_15');return true;"> </td>
</tr>
<tr>
<td id="cell_16" onclick="highlight('cell_16');return true;"> </td>
<td id="cell_17" onclick="highlight('cell_17');return true;"> </td>
<td id="cell_18" onclick="highlight('cell_18');return true;"> </td>
</tr>
</table>
<p align=center><input type="reset" onclick="javascript:reset(); return true;"></p>
</body>
</html>
