Zigzag moving enemies

For this tutorial I’m using version 0.1 and adding zigzag moving enemies. Instead of just having the enemies spawn and move straight down (making them very easy to shoot) we want them to move from side to side. We will not make them move in an actual wave this time, since I don’t want to make this overly complicated math-wise. We will look at that later.

The first thing we will do is add these two variables among our other variables:

private var enemyWaveWidth:int = 30;
private var enemySideSpeed:int = 2;

These two variables tells the engine first how far to the side from the enemies spawn point the enemy will move and then how fast the enemy will move sideways. Experiment with other values.

Next up we need to change the newEnemy function. When we spawn an enemy we need to add a few things. We want a direction on each enemy, either right or left. This should be random so not all enemies move the same. After the lines of code when we create the e and change its x and y we add these lines:

if (Math.random() >= 0.5)
e.sideSpeed = enemySideSpeed;
else
e.sideSpeed = enemySideSpeed * -1;

Now that we have added a direction and speed to the enemy we want to add the boundaries to the left and right so the enemy knows how far to zig and zag. This is why we added the enemyWaveWidth variable. I want the boundaries to vary from enemy to enemy so I’ve added randomness to my code. First the basic version:

e.maxRight = e.x + enemyWaveWidth;
e.maxLeft = e.x – enemyWaveWidth;

This only tells the enemy how far to the left and right to move the enemy. Notice that we use the x- and y-value of the enemy.

If we want some randomness we could instead of writing the two lines of code above use the following:

var randomWaveWidth = (enemyWaveWidth/2) * Math.random() + (enemyWaveWidth/2);
e.maxRight = e.x + randomWaveWidth;
e.maxLeft = e.x – randomWaveWidth;

This will give each enemy a unique wave width. In my code above I use the enemyWaveWidth and my enemies will have a wave width somewhere between half enemyWaveWidth and a full enemyWaveWidth.

Now we are almost done. We only need to fix the moveEnemies function. After we have updated the enemy y-value we need to add a line of code to also change the x-value moving the enemy sideways:

enemies[i].x += enemies[i].sideSpeed;

But this will move the enemy in one direction only. In order to change that we add these lines right after:

if ( enemies[i].x >= enemies[i].maxRight || enemies[i].x <= enemies[i].maxLeft )
enemies[i].sideSpeed *= -1;

If the x-value of the enemy is equal or greater than the enemy max value on either the right or left side we switch the direction of the sideSpeed variable by simply switching sign (negative to positive or the other way around).

And thats it! Now you have zigzag moving enemies. Maybe you didn’t want your enemies to move like this, but instead your pickups. You should be able to fix that using this tutorial.

If you have any suggestions or questions just post a comment!