Показать сообщение отдельно
  #2 (permalink)  
Старый 07.11.2013, 23:00
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

Ух ты! Игрушка! )

В общем, с анимацией все действительно не так просто: нужно сделать отдельный таймер и очередь, в которую будем добавлять «прибитые» 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%;
}
Ответить с цитированием