<div id="wrapper">
<div id="timer">30</div>
<div id="score">0</div>
<div class="mole"></div>
</div>
<div id="sound"></div>
<button>Restart</button>
.mole {
background-image: url(http://365psd.com/images/thumbs/7d7/cartoon-mole-52006.png);
width: 250px;
height: 188px;
cursor: pointer;
opacity: 0;
transition: opacity 50ms;
position: absolute;
overflow: hidden;
}
#score, #timer{
float: right;
width: 50px;
height: 25px;
font-size: 25px;
font-family: "Comic Sans MS", sans-serif;
}
#timer{ float: left; }
#score:before{ content:"Score:";}
#wrapper {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
button{
position:absolute;
left:0px;
top:0px;
}
body,
html {
color:orange;
text-shadow: 1px 1px 6px #000;
height: 100%;
background: linear-gradient(to bottom, #627d4d 0%, #1f3b08 100%);
}
var hits = 0;
var gameOver = false;
var count = 30;
var counter = setInterval(timer, 1000);
setTimeout("pop()", 3000);
function pop() {
var x = Math.random() * 500;
var y = Math.random() * 150;
$(".mole").css("opacity", 1);
$(".mole").css({
top: y,
left: x
});
setTimeout("pop()", Math.random() * 3000);
}
$('.mole').click(function() {
if (gameOver) return;
$('#sound').html("<audio autoplay><source src='http://soundjay.com/button/button-6.mp3' type='audio/mpeg'>");
$(".mole").css("opacity", 0);
$("#score").html(++hits);
});
$('button').click(function() {
count = 30;
hits = 0;
$("#score").html(hits);
gameOver = false;
});
function timer() {
if (count <= 0) {
gameOver = true;
$("#timer").html("Game Over");
return;
}
$("#timer").html((count<10?"0:0":"0:")+count--);
}
This Pen doesn't use any external CSS resources.