Stealth Game 2

Step 1
In this lesson, we will add a vision field to the patrol guard
Step 2
We will be using radians and PI (π) to be describing certain angles for the enemy's vision

This image shows Processing's radian angles which is upside down from normal ones since the Y axis is flipped upside down.

Step 3
To draw the partial circle we will be using these three angles

The angle straight ahead of where the enemy is looking will be called the focus angle while the side peripherals are named left and right angle accordingly.

Step 4
Create a new enemy class variable named "focus"

Add this code to the constructor function inside the enemy.js file:

Step 5
We should also describe some key terms for controlling the vision

Imagine this is the patrol guard's vision looking to the right:

The distance the patrol guard can see is referred to as Depth of Field:

The range of vision from left to right peripheral is referred as Field of View:

Step 6
Create two more class variables for the field of vision and depth of field
Step 7
To draw the partial circle we will need to use the "arc" function

The arc is like an ellipse function but it also needs to know the starting and finishing angle for the partial circle. We will use the left and right angle for that.

Step 8
Draw the enemy's area of vision inside the class "draw" function

HINT: The arc is a partial circle that is centered at the player's position and is twice as large as the depth of field. It will then begin the partial slice of circle at the left angle and end at the right angle.

Check Your Work
Step 9
Save and run your code

The vision arc should now be visible and facing to the right!

Step 10
Next we will make the enemy face the node it is moving towards
Step 11
In the previous lesson, we use trigonometry to find the xspeed and yspeed to move the enemy towards a node
Step 12
We skipped over a formula to find the angle between the enemy and node

We can use the tangent formula to find the "look at" angle between two objects. All we need is the delta (Δ) or differences of the x and y positions.

Step 13
Create a new class function named "lookAt" that will be called in the patrol state

The hidden code is to create a variable named dy that represents the delta y and will be used to find the angle between the enemy and node.

Check Your Work
Step 14
Save and run your code

The vision arc should now snap to wherever the player is moving towards.

Step 15
We will now want the enemy's focus to turn at a certain speed towards the target theta
Step 16
Create a new class variable inside the enemy constructor named "turnSpeed"

Note: PI / 30 is the equivalent to one full circle turn per second

Step 17
Now add some code to make the enemy turn until it reaches the target angle (theta)
Check Your Work
Step 18
Save and run your code

The enemy now turns, but it doesn't stop at the angle... Why is that?

Step 19
The problem is that our angles are not confined to 0 and 2*PI

If we were to debug the angles, then we see that theta is sometimes negative and the focus constantly increases.

Step 20
To keep an angle between 0 and 2*PI, we will use the remainder tool (%)

Here's an example of how the remainder operator % can reduce an angle:

Note: This will reduce a negative angle to an angle between -(2*PI) and 0.

Step 21
To convert a negative angle into a positive angle, you simply need to find the difference
Step 22
Let's create a utility function that will turn any angle into a simplified angle

A simplified angle is an angle between 0 and 2*PI.

Add this code at the very top:


The first blank is trying to reduce the angle to smaller value (Step 20).

The second blank is converting a negative angle to a positive angle (Step 21).

Step 23
Use the function to simplify the current focus angle and target theta angle

Change this code inside the lookAt function:

Check Your Work
Step 24
Save and run your code

The enemy should now turn and stop once the angle has been reached!

Step 25
The last step will be to choose turning left or right to face the target the quickest

This may seem easy for human to choose by looking, but it is a bit more complex for a computer to choose with just angle values.

Step 26
The logical answer is add if the angle is smaller and subtract if the angle is bigger

Add this code to the lookAt function:

Check Your Work
Step 27
Save and run your code

The enemy should start turning the correct direction except for the start and the bottom right corner.

Why is that?

Step 28
The bottom right corner has these values:

Since theta is greater than focus, the code tells it to increase focus and turn right.

This explains why the turning logic messed up.

Step 29
To check for these cases, we need to check if the delta theta is greater than half a circle
Check Your Work
Step 30
Save and run your code

The enemy should now correctly turn at all locations!

The lesson is now over!

Stealth Game 2 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