AliMD/jsbin.AceXIro.css

## jsbin.AceXIro.css
body {
  background-color: #333;
  overflow: hidden;
  color: #FFF;
  -webkit-user-select: none;
}

.parent {
  width: 100%;
  position: relative;
}

#score {
  color : #fff;
  font-size: 30px;
  text-align: left;
}

.boxs {
  width: 70px;
  height: 70px;
  border-radius:35px;
  background-color: hsl(180,50%,30%);
  margin: 1px;
  position: fixed;
  top: -60%;
  margin: 10px;
  cursor: pointer;
  opacity: 0.8;
  transition: top 7s ease-in, opacity 400ms;
}

## jsbin.AceXIro.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <b id="scores">Score : </b>
  <div class="parent"></div>
</body>
</html>

## jsbin.AceXIro.js
(function(){

  var
  boxs,
  score = 0,
  boxLen = 20,
  parent = document.querySelector('.parent'),
  j = 0,

  rand = function(a, b){
    return Math.floor(Math.random()*(b-a+1)+a);
  },

  generate = function(){

    parent.style.height = window.height ;
    var temp = "";

    for(var i=0;i<boxLen;i++){
      temp += '<div class="boxs"></div>';
    }

    parent.innerHTML = temp ;
  },

  decorate = function(){
    for(var i=0;i<boxLen;i++){
      boxs.item(i).style.backgroundColor = 'hsl(' + rand(0,360) + ',50%,50%)';
      boxs.item(i).style.left = rand(3,96) + '%';
    }
  },

  setEvents = function(){
    decorate();
    for(var i=0; i<boxLen; i++){
      boxs.item(i).onmousedown = clickToFade;
    }
  },

  fall = function(){
    boxs.item(j).style.top = '120%';
    j++;
    if(j<boxs.length) setTimeout(fall,1000);
  },

  clickToFade = function(){
    this.style.opacity = 0;
    this.style.pointerEvents = 'none';
    score++;
    updateScore();
  },

  updateScore = function(){
    scores.innerHTML = 'Score : ' + score + ' of ' + boxLen;
  },

  init = function(){
    generate();
    setTimeout(function(){
      boxs = document.querySelectorAll('.boxs');
      setEvents();
      //setInterval(fall , 1000);
      fall();
      updateScore();
    },1);

  };

  init();
})();
	body {
	background-color: #333;
	overflow: hidden;
	color: #FFF;
	-webkit-user-select: none;
	}

	.parent {
	width: 100%;
	position: relative;
	}

	#score {
	color : #fff;
	font-size: 30px;
	text-align: left;
	}

	.boxs {
	width: 70px;
	height: 70px;
	border-radius:35px;
	background-color: hsl(180,50%,30%);
	margin: 1px;
	position: fixed;
	top: -60%;
	margin: 10px;
	cursor: pointer;
	opacity: 0.8;
	transition: top 7s ease-in, opacity 400ms;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<b id="scores">Score : </b>
	<div class="parent"></div>
	</body>
	</html>
	(function(){

	var
	boxs,
	score = 0,
	boxLen = 20,
	parent = document.querySelector('.parent'),
	j = 0,

	rand = function(a, b){
	return Math.floor(Math.random()*(b-a+1)+a);
	},

	generate = function(){

	parent.style.height = window.height ;
	var temp = "";

	for(var i=0;i<boxLen;i++){
	temp += '<div class="boxs"></div>';
	}

	parent.innerHTML = temp ;
	},

	decorate = function(){
	for(var i=0;i<boxLen;i++){
	boxs.item(i).style.backgroundColor = 'hsl(' + rand(0,360) + ',50%,50%)';
	boxs.item(i).style.left = rand(3,96) + '%';
	}
	},

	setEvents = function(){
	decorate();
	for(var i=0; i<boxLen; i++){
	boxs.item(i).onmousedown = clickToFade;
	}
	},

	fall = function(){
	boxs.item(j).style.top = '120%';
	j++;
	if(j<boxs.length) setTimeout(fall,1000);
	},

	clickToFade = function(){
	this.style.opacity = 0;
	this.style.pointerEvents = 'none';
	score++;
	updateScore();
	},

	updateScore = function(){
	scores.innerHTML = 'Score : ' + score + ' of ' + boxLen;
	},

	init = function(){
	generate();
	setTimeout(function(){
	boxs = document.querySelectorAll('.boxs');
	setEvents();
	//setInterval(fall , 1000);
	fall();
	updateScore();
	},1);

	};

	init();
	})();