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

Question

parovoziknamars @parovoziknamars

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

Добрый день! В моем коде каждые 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","https://icons.iconarchive.com/icons/iconshock/tiny-bugs/48/dragon-fly-icon.png");
    }
    else if (rndImgType === 1){
        elem.setAttribute("src","https://icons.iconarchive.com/icons/aha-soft/desktop-halloween/64/Ghost-icon.png");
    }
    else if (rndImgType === 2){
        elem.setAttribute("src","https://icons.iconarchive.com/icons/gcds/halloween/64/bat-icon.png");
    }
    else {
        elem.setAttribute("src","https://icons.iconarchive.com/icons/designbolts/despicable-me-2/64/Minion-Superman-icon.png");
    }

	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 );
}