Bug Invaders (Phaser) step 25 adding downwards movement

Here’s the link to my complete code: Bug Invaders

I’ve added the code (about line 117) like this:

} else {
      gameState.enemies.getChildren().forEach((bug) => {
        bug.x += gameState.enemyVelocity;        
        gameState.leftMostBug = sortedEnemies()[0];
        gameState.rightMostBug = sortedEnemies()[sortedEnemies().length-1];
        if (gameState.leftMostBug.x < 10 || gameState.rightMostBug.x > 440) {
          gameState.enemyVelocity *= -1;          
          gameState.enemies.getChildren().forEach(enemy => {enemy.y += 10;});}
      })
    }

That didn’t work, as the bugs all dropped off-screen as soon as they collided with the right wall. So I added an update to the bug.x to reverse the direction. Like this:

} else {
      gameState.enemies.getChildren().forEach((bug) => {
        bug.x += gameState.enemyVelocity;        
        gameState.leftMostBug = sortedEnemies()[0];
        gameState.rightMostBug = sortedEnemies()[sortedEnemies().length-1];
        if (gameState.leftMostBug.x < 10 || gameState.rightMostBug.x > 440) {
          gameState.enemyVelocity *= -1;
          bug.x += gameState.enemyVelocity; 
          gameState.enemies.getChildren().forEach(enemy => {enemy.y += 10;});                                    
        }

      })
    }

They turn around, and happily saunter downwards. BUT. There’s one bug, the first on the left of the middle row, that walks out of sync. It keeps moving to the left more and more, as the bugs progress.

And if I win the game, my click doesn’t restart.

I’d be very happy if someone would take a look at this, because I’m at a loss.

1 Like

Hello, I don’t think I quite follow what you mean by walking out of sync. The Github Gist code you posted seemed to move correctly for me, unless I don’t understand the issue.

As for not being able to restart if you win the game, this also happened in mine when I followed the instructions. That’s because your pelletsLoop continues to call genPellet after all the enemies are gone. genPellet itself looks for a random enemy’s coordinates to be the starting point of the pellet, but there are no enemies. If you look at the console after you win, you’ll see an error about reading the property ‘x’ of null.

The easiest fix for that is to destroy the pelletsLoop like you do in the code where the player gets hit. Check line 80 of your gist for that and add that to the code where you tell the player that they won.

Maybe it’s browser-related then? Here you can see the jump to the left:

As for the restart, it works now. Thanks for the help :slight_smile:

Ahhh, yes, I see what you’re talking about now. That one is tricky.

What’s happening is that there is too much code being run for each bug in your forEach on line 116. Instead of ending the the arrow function after updating the x position of each bug, you continue on and also include the logic to detect when the bugs reach the left or right side of the screen, so it runs on every bug. When the leftMostBug or rightMostBug condition is met, it even updates the bug’s x position again.

Your arrow function for the forEach on line 116 should only include the bug.x += gameState.enemyVelocity; line. Then the rest of your code to check if the leftMostBug or rightMostBug has reached the side of the screen. Additionally, the extra code you had to add to stop them from dropping off on line 122 (bug.x += gameState.enemyVelocity;) can now be removed.

1 Like