Progressively add image (arrays)

Question

So I am creating a game where a spaceship moves and it must avoid a fireball image in order to win. My issue is that I have only one fireball looping over and over. Instead, I w

Answer 1

You need to have an array of fireballs

var fireballs = [];

Make a constructor for fireballs instead of putting them directly in the html

function fireball(x, y) {
    movementX = x;
    movementY = y;
}

Then push new ones into the array with dynamic position values. To add them to the document, you need to append them to a parent element. If the is that parent, you'd do this:

let f = new fireball(10, 20)
fireballs.push(f)
document.body.appendChild(f)

In your update, iterate through the fireballs and update their movement.

fireballs.forEach((fireball) => {
    // update position for each fireball
});