How would I go about creating a temporary element without using up a variable for every time I need a new one?

Question

Basically I am creating a space invader style game, and I don't know how to go about creating multiple projectiles/invaders. I could create one fairly easily but I don't know how to clone it with a new starting pos each time.

P.s here's the code:
https://code.sololearn.com/WAvbo28ic7Tg/?ref=app
P.p.s: just thought of this, could I use class/cloneNode()? (The functionoperatormethodthingy that I probably misspelled)

Answer 1

Make a class element like you did for spaceship element with different color and location, position it with absolute position.
.invader {
background-color: tomato;
padding-left: 16px;
padding-right: 16px;
width: 40px;
height: 25px;
position: absolute;
top: 10px;
left: 10px;
}

Add following js function
function createInvader(left, top) {
let invader = document.querySelector(".invader")
let ivClone = invader.cloneNode(true);
ivClone.style.left = left + "px";
ivClone.style.top = top + "px";

document.body.appendChild(ivClone);
}

Then for adding extra invaders, call the function
createInvader(x, y); where x, y are the absolute position.
https://code.sololearn.com/Wu7e3onGbVZb/?ref=app

Answer 2

Answer is much appreciated, thanks!