Untitled

data:text/html,
<body onresize="changeMax();" style="width:100%;height:100%;margin:0;padding:0;"></body>

<script>

var maxTop = window.innerHeight - 40;
var maxLeft = window.innerWidth - 40;
function changeMax(){
maxTop = window.innerHeight - 40;
maxLeft = window.innerWidth - 40;
}

var nBox = Math.floor(Math.random() * (40 - 15 + 1)) + 15;
for (var i = 1;i<=nBox;i++){
var cBox = document.createElement('img');
var top = Math.floor(Math.random() * (maxTop - 0 + 1)) + 0;
var left = Math.floor(Math.random() * (maxLeft - 0 + 1)) + 0;
cBox.style = "width:40px;height:40px;position:absolute;top:"+top+"px;left:"+left+"px;background:black;";
cBox.id = "box" + i;
document.body.appendChild(cBox);
}

for (var e = 1;e<=nBox;e++){
var boxId = "box" + e;
var xSpeed = (Math.floor(Math.random() * (4 - 1 + 1)) + 1);
var ySpeed = (Math.floor(Math.random() * (4 - 1 + 1)) + 1);
var xRate = ((Math.floor(Math.random() * (100 - 20 + 1)) + 20)/20)*xSpeed;
var yRate = ((Math.floor(Math.random() * (100 - 20 + 1)) + 20)/20)*ySpeed;
var xDir = Math.floor(Math.random() * (2 - 1 + 1)) + 1;
var yDir = Math.floor(Math.random() * (2 - 1 + 1)) + 1;
document.getElementById(boxId).addEventListener('click', function(){
document.body.removeChild(document.getElementById(boxId));
});
doBox(boxId, xRate, yRate, xDir, yDir, xSpeed, ySpeed);
}

function doBox(id, xRate, yRate, xd, yd, xS, yS){
var xDir = xd;
var ydir = yd;
var box = document.getElementById(id);
box.addEventListener('click', function(e){
document.body.removeChild(box);
});
doInt(id, xRate, yRate, xDir, yDir, box, xS, yS);
}

function doInt(id, xRate, yRate, xDir, yDir, box, xSpeed, ySpeed){
setInterval(function(){
var currentTop = box.style.top.split('px')[0];
currentTop = +currentTop;
var currentLeft = box.style.left.split('px')[0];
currentLeft = +currentLeft;

for (var x = 1;x<=xRate;x++){
if (xDir == 1){
currentLeft--;
} else if (xDir == 2){
currentLeft++;
}
if (currentLeft >= maxLeft && xDir == 2){
currentLeft = maxLeft;
xDir = 1;
xRate = ((Math.floor(Math.random() * (100 - 20 + 1)) + 20)/20)*xSpeed;
} else if (currentLeft <= 0 && xDir == 1){
currentLeft = 0;
xDir = 2;
xRate = ((Math.floor(Math.random() * (100 - 20 + 1)) + 20)/20)*xSpeed;
}

}

for (var y = 1;y<=yRate;y++){
if (yDir == 1){
currentTop--;
} else if (yDir == 2){
currentTop++;
}
if (currentTop >= maxTop && yDir == 2){
currentTop = maxTop;
yDir = 1;
yRate = ((Math.floor(Math.random() * (100 - 20 + 1)) + 20)/20)*ySpeed;
} else if (currentTop <= 0 && yDir == 1){
currentTop = 0;
yDir = 2;
yRate = ((Math.floor(Math.random() * (100 - 20 + 1)) + 20)/20)*ySpeed;
}

}
box.style.left = currentLeft + "px";
box.style.top = currentTop + "px";
}, 20);
}

/*document.addEventListener('click', function(e){
var x = e.clientX;
var y = e.clientY;
var endLoop = false;
for (var q = 1;q<=nBox;q++){
var box = document.getElementById('box' + q);
if (box){
var bX = box.style.left.split('px')[0];
bX = +bX;
var bY = box.style.top.split('px')[0];
bY = +bY;
if (((bX - 20) <= x && (bX + 20) >= x) && ((bY - 20) <= y && (bY + 20) >= y)){
document.body.removeChild(box);
}
}

}

});*/


</script>
</body>