Watch this code. i think you want to do something like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.score
{
background-color: #3399ff;
color:White;
width:800px;
height:200px;
font-family: 'Comic Sans MS';
font-size: xx-large;
font-weight: bold;
text-align: center;
margin:0 auto;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 3px solid;
}
body
{
background-color: #000000;
}
.reset
{
background-color: #000000;
color:White;
font-family: 'Comic Sans MS';
font-size: xx-large;
font-weight: bold;
width:300px;
height:100px;
margin:0 auto;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 3px solid;
text-align:center;
}
div img
{
width:100px;
height:100px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function start() {
var random = -1;
playclip();
$("body").click(function (e) {
if (e.target.nodeName.toLowerCase() == "img") {
var scoreCounter = $("b[id='click-score']").html();
var updateScore = eval(scoreCounter) + eval(1);
$("b[id='click-score']").html(updateScore);
}
if ($(e.target).hasClass("sq-color")) {
if ($(e.target).hasClass("mole")) {
// hit.playclip(); i dont knw wat method do here.
$('.c' + random).removeClass('mole');
var scoreCounter = $("b[id='show-score']").html();
var updateScore = eval(scoreCounter) + eval(1);
$("b[id='show-score']").html(updateScore);
$(e.target).animate({ height: 300 }, "slow");
$(e.target).animate({ height: 100 }, "slow");
$(e.target).animate({ width: 300 }, "slow");
$(e.target).animate({ width: 100 }, "slow");
playclip();
}
else {
var scoreCounter = $("b[id='miss-score']").html();
var updateScore = eval(scoreCounter) + eval(1);
$("b[id='miss-score']").html(updateScore);
alert("MISS");
}
}
if ($(e.target).closest("div").hasClass("reset")) {
$("b[id='show-score']").html(0);
$("b[id='miss-score']").html(0);
$("b[id='click-score']").html(0);
}
});
function playclip() {
var items = Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
var items2 = items.slice();
var count = 0;
$(".container").html("");
for (count = 0; count < items.length; count++) {
var myImag = $("<img></img>");
var myRandom = Math.floor(Math.random() * items2.length);
var slicedItem = items2.splice(myRandom, 1);
myImag.attr("src", "http://flickholdr.com/200/200/" + slicedItem);
myImag.attr("class", "c" + slicedItem + " sq-color");
$(".container").append(myImag);
}
random = items[Math.floor(Math.random() * items.length)];
$('.c' + random).addClass('mole');
}
});
</script>
</head>
<body>
<div class="container">
</div>
<div class="score">
Score is here:<br />
Click: <b id="click-score" >0</b><br />
Hit: <b id="show-score" >0</b><br />
Miss: <b id="miss-score">0</b><br />
</div>
<div class="reset">
<h2 >Reset</h2>
</div>
</body>
</html>