how do i make an objects continuously spawn on kaboom.js - game-development

Question

When I shoot the asteriod they disapear which is what i want however I want more asteriods to spawn instead of them just disapearing forever.Im not sure what to add in this code to make more spawn into the game.
any help is appreciated
i thought making the number of asteriods a constant would make sure that 5 asteriods are on screen at all times however that didnt seem to work
// the asteroids
const NUM_ASTERIODS = 3;
for (let i = 0; i < NUM_ASTERIODS; i++) {
var spawnPoint = asteroidSpawnPoint();
var a = add([
sprite("asteroid"),
pos(spawnPoint),
rotate(rand(1,90)),
origin("center"),
area(),
scale(0.2),
solid(),
"asteroid",
"mobile",
"wraps",
{
speed: rand(5, 10),
initializing: true
}
]);
while (a.isColliding("mobile")) {
spawnPoint = asteroidSpawnPoint();
a.pos = spawnPoint;
a.pushOutAll();
}
a.initializing = false;
a.pushOutAll();
}
function asteroidSpawnPoint() {
// spawn randomly at the edge of the scene
return choose([rand(vec2(0), vec2(width(), 0)),
rand(vec2(0), vec2(0, height())),
rand(vec2(0, height()), vec2(width(), height())),
rand(vec2(width(), 0), vec2(width(), height()))]);
}

Answer 1

I had a similar problem when trying to spawn continuous sprites from the top of the screen. I found the following code worked to spawn my sprites at random positions (x-axis) across the top of the screen (y-axis).
Kaboom suggests using the wait() method within a recursive function in their tutorial, which avoids using a loop and allows you to control the frequency of spawning.
function spawnAsteroid() {
add([sprite('asteroid'),
pos(rand(width()), 0),
origin(),
body(),
'dangerous'
])
wait(rand(0.5, 1), spawnAsteroid);
}
spawnAsteroid();