Stealth Game 1

Step 1
We will be making a Stealth Game where the player must sneak past security to win the game
Step 2
The first lesson will be introducing the concept of a Finite State Machine

It will make a patrol guard enemy move and stop at certain locations.

Check Your Work
Step 3
The given code has created an enemy class object that is drawn to the screen

We will be only changing the enemy.js file in this lesson but feel free to explore the other files to understand how we made the enemy appear on the screen.

Step 4
Finite State Machine

FSM is a graph that will let us know a certain action (or state) that an object should be doing and how it can transition to another state.

Here's a comical FSM for a dog:

Step 5
The FSM for our enemy will look like this:
Step 6
Create a two functions inside the enemy class and call them inside the update function

Add this code to enemy.js:

Step 7
Let's also create a variable that will track how much time the enemy has been idle

Add this code to the enemy's constructor function:

Step 8
Now add the state and transition logic for the "idle" state

When the timer reaches 60 (in units of frames which equals one second), then the state will switch to the "patrol" state.

Check Your Work
Step 9
Save and run your code

The state should switch to "patrol" after one second in the "idle" state.

Step 10
The "patrol" state will have the enemy move to five different nodes in order

Once the enemy reaches the next node it will switch to the "idle" state.

Step 11
Let's create some variables in the enemy

We will be creating fives nodes as described above, a speed, and a current index of the target node.

Step 12
Let's now create a function named "moveTo" and use it for the "patrol" state
Step 13
The player will need to move diagonally and sideways at the same speed

To make the movement seem smooth going diagonal we will be using a triangle to find the xspeed and yspeed.

Step 14
To find the length of a side to a right triangle, we can use trigonometric formulas with the hypotenuse and angle

The angle will be referred to as theta (Θ).

Step 15
Use the trigonometric formulas to calculate the xspeed and yspeed of the enemy

The angle (theta) is calculated using a more advance formula that will not be explained in this lesson.

Hint: Look at the step before if you need help assigning xspeed and yspeed.

Check Your Work
Step 16
Run and save your code

The enemy should now be moving very fast back and forth to make it look like its vibrating in "patrol" mode.

Step 17
To fix this we will increase the index variable once the "idle" state is over

Add this code inside the transition function:

Step 18
We also need to add the "patrol" to "idle" transition logic

The code will check if the enemy has reached the target node and then switch to the "idle" state.

Check Your Work
Step 19
The code should now transition the idle and patrol state correctly

... Until it reaches the final node and throws this error:

Step 20
This error is caused by index reaching the number 5 and being confused because there is no sixth node

We will want index to reset to 0 once it reaches 4

Step 21
Fix this challenge to make the enemy loop forever

Hint: The index variable needs to reset to 0 once it's greater than 4.

Check Your Work
Step 22
Save and run your code

The enemy should now restart at the beginning of his patrol!

This lesson is now complete once you have two working states that transition correctly.

Stealth Game 1 Info


MVCode Clubs

Created By



Artificial Intelligence (A.I.)

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach