Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment