html, body{
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

/* Game */
.game{
  display: block;
  height: 100%;
  width: 100%;
  background: #111;
  
  .numbers{
    width: 100%;
    position: absolute;
    color: #fff;
    font: 10vw arial;
    text-align: center;
    pointer-events: none;
    
    &.score{ top: 10px; }
    &.timer{ bottom: 10px; }
  }
  
  .ball{
    display: block;
    width: 10vw;
    height: 10vw;
    border-radius: 100%;
    background: #fff;
    position: absolute;
    left: 46.5%;
    top: 35%;
    box-sizing: border-box;
    border: 5px solid #000;
    transition: .2s ease;
    
    &.end{
      pointer-events: none;
    }
  }
}

var currentScore = $(".score").text(),
    currentTimer = $(".timer").text(),
    started = false,
    timer = null;

// Random number
function randomIntFromInterval(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
}

// Increment current score
function incrementScore(){
  currentScore++;
  $(".score").html(currentScore);
}

// Move ball
function moveBall(selection){
  var left = randomIntFromInterval(2,75),
      top = randomIntFromInterval(2,75),
      size = randomIntFromInterval(10,30);
  $(selection).css("left", left + "%").css("top", top + "%").css("height", size + "vw").css("width", size + "vw");
}

// Game ends
function endGame(){
  $(".ball").addClass("end");
  $(".score").html("Game Over!<br/>Your final score is: " + currentScore);
}

// Timer start
function timerStart(){
  timer = setInterval(function(){
    currentTimer--;
    $(".timer").html(currentTimer);
    if(currentTimer < 1){
      clearInterval(timer);
      endGame();
    }
  },1000);
}

// Ball clicked
$(".ball").click(function(){
  incrementScore();  
  moveBall($(this));
});

// Ball clicked first time
$(".start").click(function(){
  if(!started){
    started = true;
    timerStart();
  }
});