Ух ты! Игрушка! )
В общем, с анимацией все действительно не так просто: нужно сделать отдельный таймер и очередь, в которую будем добавлять «прибитые» test'ы. Но мы пойдем другим путем и используем CSS и CSS3,
как завещает нам тов. subzey:
Я немного переписал код и выложил его на codepen:
http://codepen.io/ixth/pen/IAlve
var background = document.createElement('div');
background.className = 'background';
document.body.appendChild(background);
var blackHole = document.createElement('div');
blackHole.className = 'blackHole';
document.body.appendChild(blackHole);
function makeEnemy(x, y) {
var enemy = document.createElement('div');
enemy.className = 'enemy';
enemy.style.top = y + '%';
enemy.style.left = x + '%';
enemy.onclick = function (event) {
enemy.style.left = '50%';
enemy.style.top = '50%';
enemy.style.opacity = '0';
};
return enemy;
}
setInterval(function () {
var y = Math.random() * 100;
var x = Math.random() * 100;
var enemy = makeEnemy(x, y);
document.body.appendChild(enemy);
}, 2000);
.background {
width: 100%; height: 100%;
position: absolute;
background:#222;
}
.enemy {
position: absolute;
width: 30px; height: 30px;
margin:-15px;
background:#b00;
z-index: 10;
border-radius:50%;
-webkit-transition: left 1s ease, top 1s ease, opacity 1s ease;
-opera-transition: left 1s ease, top 1s ease, opacity 1s ease;
-moz-transition: left 1s ease, top 1s ease, opacity 1s ease;
transition: left 1s ease, top 1s ease, opacity 1s ease;
}
.blackHole {
position: absolute;
left: 50%; top: 50%;
width: 100px; height: 100px;
margin:-50px;
background:#000;
border-radius:50%;
}