<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&nbsp;Over");
    return;
  }
  $("#timer").html((count<10?"0:0":"0:")+count--);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js