title: javascript P5 function creates endless loop
body: <p>I can't for the life of me work out how to reset the function createAliens below so I can begin a new game - I'm basically looking for a way to clear the sprites off the canvas so I can reset the game.</p>
  <p>Any help would be seriously appreciated :)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const BORDER = 60;
  const SPEED = 3;
  
  let score = 0;
  
  let numAliens = 3;
  let alienSpeed = 5;
  let aliensArray = [];
  
  let ship; 
  let laser;
  let lasers = [];
  
  function preload() {
      
  }
  
  function setup() {
      createCanvas(1000, 700);
  
      aliens = new Group();
      ships = new Group();
      lasers = new Group();
  
      createAliens(numAliens);
  
      ship = createSprite(width/2, height/1.15, 40, 60); 
      ship.setCollider('rectangle', 0, 0, 40, 60); 
      ships.add(ship); 
  }
  
  function draw() {
      background(0);
      
      if(aliens == 0) {
          createAliens(numAliens + 2);
      }
  
      aliens.bounce(aliens); // p5 game methods - collision etc using callbacks
      aliens.overlap(lasers, scoreTotal);
      aliens.collide(lasers, die);
      ship.bounce(aliens, reset);
  
      keyPressed();
      drawSprites();    
  
      for (let i = 0; i &lt; allSprites.length; i++) { // game borderless
          let all = allSprites[i];
              if (all.position.x &lt; - BORDER) {
                  all.position.x = width + BORDER;
              }
              if (all.position.x &gt; width + BORDER) {
                  all.position.x = - BORDER;
              }            
              if (all.position.y &lt; - BORDER) {
                  all.position.y = height + BORDER;
              }            
              if (all.position.y &gt; height + BORDER) {
                  all.position.y = - BORDER;
              }            
      }    
  }
  
  function createAliens(numAliens) { // spawn some aliens
      for (let j = 0; j &lt; numAliens; j++) {
          alien = createSprite(random(width), 0, 50, 60);
          alien.shapeColor = color('red');
          alien.setSpeed(random(0.3, alienSpeed), random(45, 150));        
          
          aliensArray.push(alien); 
          aliens.add(alien); 
      }    
  }
  
  function die(alien) { // kill the alien
      alien.remove(); 
  }
  
  function scoreTotal() { 
      score += 10;    
  }
   
  function reset() {
      console.log('RESET FIRING');    
  }
  
  function keyPressed() {
      if (keyDown(LEFT_ARROW)) {
          ship.setSpeed(SPEED, 180);        
          ship.friction = 0.01;
      }
      else if (keyDown(RIGHT_ARROW)) {
          ship.setSpeed(SPEED, 0);        
          ship.friction = 0.01;
      }
      else if (keyDown(UP_ARROW)) {
          ship.setSpeed(SPEED, 270);
          ship.friction = 0.01;
      }
      else if (keyDown(DOWN_ARROW)) {        
          ship.setSpeed(SPEED, 90);
          ship.friction = 0.01;
      }
      if(keyWentDown(' '))  {
          let laser = createSprite(ship.position.x, ship.position.y, 5, 5);
          laser.setSpeed(10, 270);
          laser.shapeColor = color('red');        
          laser.life = 30; 
          lasers.add(laser);        
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I have got the aliens spawning with the simple conditional logic:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if(aliens == 0) {
          createAliens(numAliens + 2);
      }</code></pre>
  </div>
  </div>
  </p>