<div class="game">
  <div class="counter" id= "counter">00s</div>
  <div class="score">
    00
  </div>
</div>

.game{
  background: #efefef;
  width:100%;
  height:750px;
  position: relative;
  overflow: hidden;
}

.score{
  font-size: 500px;
  z-index: 20;
  font-family: arial;
  color: #d7e4d9;
  user-select:none;
  width:100%;
  text-align:center;
}

.box{
  
  width: 100px;
  height:100px;
  position:absolute;
  top: -150px;
  transition: transform 1.5s linear;
  cursor: pointer;
  z-index:100;
}

.move{
   transform:translateY(120vh);
}

.counter{
  width:100%;
  margin: 0 auto;
  text-align:center;
  font-family:arial;
  color:red;
  font-weight:bold;
  padding-top:10px;
  font-size:20px;
  position:relative;
  z-index:9999;
}

var score = 0;
var color = "blue";

function random(min,max){
 	return Math.round(Math.random() * (max-min) + min);
}

function setBG(){
  if (Math.round(Math.random())){
    return "http://icons.iconarchive.com/icons/hopstarter/halloween-avatars/128/Frankenstein-icon.png";
  } else {
    return "http://icons.iconarchive.com/icons/hopstarter/halloween-avatars/128/Scream-icon.png";
  }
}



function dropBox(){
  var length = random(100, ($(".game").width() - 100));
  var velocity = random(850, 10000);
  var size = random(50, 150);
  var thisBox = $("<div/>", {
    class: "box",
    style:  "width:" +size+ "px; height:"+size+"px; left:" + length+  "px; transition: transform " +velocity+ "ms linear;"
  });
  
  //set data and bg based on data
  thisBox.data("test", Math.round(Math.random()));
  if(thisBox.data("test")){
    thisBox.css({"background": "url('http://icons.iconarchive.com/icons/hopstarter/halloween-avatars/128/Frankenstein-icon.png')", "background-size":"contain"});
  } else {
    thisBox.css({"background": "url('http://icons.iconarchive.com/icons/hopstarter/halloween-avatars/128/Scream-icon.png')", "background-size":"contain"});
  }
  
  
  //insert gift element
  $(".game").append(thisBox);
  
  //random start for animation
  setTimeout(function(){
    thisBox.addClass("move");
  }, random(0, 5000) );
  
  //remove this object when animation is over
  thisBox.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
    $(this).remove();
  });
}

for (i = 0; i < 10; i++) { 
  dropBox();
}

$(document).on('click', '.box', function(){

  
  if($(this).data("test")){
    score += 1;
  } else {
    score -= 1;
  }
  
  $(".score").html(score);
  $(this).remove();
});

var runGame = setInterval(function(){
                for (i = 0; i < 10; i++) { 
                  dropBox();
                }  
              }, 5000);

function countdown() {
    	var seconds = 60;
	    function tick() {
	        var counter = document.getElementById("counter");
	        seconds--;
	        counter.innerHTML = (seconds < 10 ? "0" : "")  + String(seconds) + "S";
	        if( seconds > 0 ) {
	            setTimeout(tick, 1000);
	            draw();
	   			update();
	        } else {
	            alert("Game over");
	            clearInterval(runGame);
	        }
	    }
    	tick();
	}

countdown();