Как сделать так, чтобы каждый появляющийся элемент «летал»?

Serge Serge · 30.07.2020

Добрый день! В моем коде каждые 2 секунды появляется новый элемент и начинает "летать". Первый появившийся элемент "летает" (как и задумано). Все последующие элементы просто появляются и не двигаются.

Необходимо сделать так, чтобы каждые последующие элементы тоже "летали". Заранее спасибо за помощь!

HTML:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="main.js" defer></script>
    <script src="main_2.js" defer></script>
    <style>
        html,body{
            height:100%;
            width:100%;
            margin:0;
            background-image: linear-gradient(#0a0644, #55234a);
            color: white;
            overflow: hidden;
        }

        #field{
            height : 100%;
            width : 100%;
            z-index: 999;
        }

        .fly{
            position:absolute;
            transition : .5s;
            z-index: 1;
            animation: 3s rot infinite alternate;
        }

        img {
            border: none;
        }

        @keyframes rot{
            0% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(-90deg);
            }

            50% {
                transform: rotate(40deg);
            }

            75% {
                transform: rotate(-30deg);
            }

            100% {
                transform: rotate(30deg);

            }


        }       
    </style>
</head>
<body>
    <div id="field"></div>


</body>
</html>


js

const fieldHeight = field.clientHeight;
const fieldWidth = field.clientWidth;
   
// fly
const flyObj = {
    className : "fly",
    imgUrl : "",
    size : 48,
    top : field.clientHeight / 2 ,
    left : field.clientWidth / 2 ,
}
   
const fly = createFlyElem( flyObj );
   
fly.style.top = flyObj.top + "px";
fly.style.left = flyObj.left + "px";
   
let intervalId = setInterval(flyFly , 50, fly);
let intervalId_2 = setInterval(createFlyElem_and_flyFly , 2000);

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

// fly fly

function createFlyElem( ){
   
    const rndImgType = getRandomInt(0,4);
    const elem = document.createElement("img");
   
    if (rndImgType === 0){
        elem.setAttribute("src","[URL]https://icons.iconarchive.com/icons/iconshock/tiny-bugs/48/dragon-fly-icon.png[/URL]");
    }
    else if (rndImgType === 1){
        elem.setAttribute("src","[URL]https://icons.iconarchive.com/icons/aha-soft/desktop-halloween/64/Ghost-icon.png[/URL]");
    }
    else if (rndImgType === 2){
        elem.setAttribute("src","[URL]https://icons.iconarchive.com/icons/gcds/halloween/64/bat-icon.png[/URL]");
    }
    else {
        elem.setAttribute("src","[URL]https://icons.iconarchive.com/icons/designbolts/despicable-me-2/64/Minion-Superman-icon.png[/URL]");
    }

    elem.classList.add( flyObj.className );
    elem.style.top = getRandomInt(0,fieldHeight - flyObj.size) + "px";
    elem.style.left = getRandomInt(0,fieldWidth - flyObj.size) + "px";
    field.append( elem );
   
    return elem;

}

function flyFly( fly ){
   
    const moveTop = getRandomInt(-40, 40); 
    const moveLeft = getRandomInt(-40, 40);
   
    flyObj.top += moveTop;
    flyObj.left += moveLeft;

   
    if( flyObj.top < 0 || flyObj.top > fieldHeight - flyObj.size ){
        flyObj.top += ( moveTop * -1 ) * 2;
    }
    else if( flyObj.left < 0 || flyObj.left > fieldWidth - flyObj.size ){
        flyObj.left += ( moveLeft * -1 ) * 2;
    }
   
    fly.style.top = flyObj.top + "px";
    fly.style.left = flyObj.left + "px";

}


function createFlyElem_and_flyFly (){
    createFlyElem( );
    flyFly( fly );
}

BearSec · 31.07.2020

У меня код не заработал, но посмотрев на код могу предположить, что для каждого нового элемеента нужно присвоить уникальный id, и уже по id двигать разные изображения по экрану

Все сервисы Codeby

Поиск

Поиск

Как сделать так, чтобы каждый появляющийся элемент «летал»?

Serge Serge

New member

BearSec