Stealth Game 3

Planning
Step 1
We will be adding a player object and a new state for the enemy to chase the player
Step 2
Create two new files named "player.js" and "input.js"
Step 3
Add these two files as scripts into the "index.html" head tag
Step 4
Add this code inside the "input.js" file
var register = {};

function keyPressed() {
    register[keyCode] = true;
}

function keyReleased() {
    register[keyCode] = false;
}

window.addEventListener("keydown", function(e) {
    if([37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

This will create a dictionary named register that will track if any keyboard buttons are being pressed.

Step 5
Add this code inside the "player.js" file
class Player {
    constructor(x, y, s) {
        this.x = x;
        this.y = y;
        this.size = s;
        this.speed = 5;
    }

    draw() {
        fill(0, 0, 255);
        ellipse(this.x, this.y, this.size, this.size);
    }

    move() {
        if(register[UP_ARROW]) {
            this.y -= this.speed;
        }
        if(register[DOWN_ARROW]) {
            this.y += this.speed;
        }
        if(register[LEFT_ARROW]) {
            this.x -= this.speed;
        }
        if(register[RIGHT_ARROW]) {
            this.x += this.speed;
        }
    }

    update() {
        this.draw();
        this.move();
    }
}

This creates a simple class for drawing the player and moving it with the arrow keys.

Step 6
Add a new variable for a player object and update it inside the "index.js" file
Check Your Work
Step 7
Save and run your code

The player should be visible and able to move using the arrow keys.

Planning
Step 8
Let's now create a "chase" state for the enemy

It will change the color of the field color and make the enemy move/look towards the player.

Step 9
Start by changing the default state of the enemy to "chase"
Step 10
Change the color of the vision arc to red if the state is equal to "chase"

Change this code inside the enemy's draw funciton:

Step 11
Make the enemy look at the player during the "chase" state

Add this code inside the enemy's states() function:

Check Your Work
Step 12
The enemy should now be constantly looking at the player like so:
Challenge
Step 13
Make the enemy move towards the player during the chase state

Hint: Look at the patrol state, if you forgot how to move the enemy towards something.

Check Your Work
Step 14
Save and run your code

The enemy should now chase the player!

Planning
Step 15
We will now work on transitioning to the "chase" state

Here's an updated finite state machine diagram that shows how the enemy will start to chase the player once it can see it, and will stop chasing once it can't see it.

Step 16
Change the enemy's initial state back to "idle"
Information
Step 17
We will detect if the player is in the enemy's vision distance by comparing some properties

If the distance between the player and enemy is less than the length of the enemy's Depth of Field and the player's radius, then the player is close enough for the enemy to see.

Step 18
Create a new class function named "canSeePlayer" that will detect if the enemy can see the player
Step 19
Now use the function to transition from any other state into the "chase" state
Challenge
Step 20
Make the state transition from "chase" to "idle" once the enemy cannot see the player anymore

Hint: It is almost the exact opposite code in Step 19

Check Your Work
Step 21
The enemy should now chase the player once it gets close enough, and stop chasing once its far away
Planning
Step 22
The next step is to make the "canSeePlayer" function use angles to detect if the player is in the visibility arc
Step 23
To test the angle of visibility, it will help if the enemy stopped moving

Comment out the moving code inside the patrol and chase state:

Check Your Work
Step 24
Save and run your code

The enemy should only rotate now.

Information
Step 25
The angle of the enemy to the player needs to be within the enemy's peripheral vision
Challenge
Step 26
Add some code to detect if the player is within the peripherals of the enemy

Hint:

theta is found by using the atan2 function with the delta x and y values. (lookAt function uses it)

The left and right values are found by using the enemy's focus and fov values. (draw function uses it)

Check Your Work
Step 27
Save and run your code

The enemy should now only chase when the player if it is in the visibility arc, except for certain situations.

Planning
Step 28
There is one spot where the enemy "vision" does not work.

Why is that?

Information
Step 29
This error is caused when the angles are simplified and the left angle becomes greater than the right angle

This would cause the code if(left < theta && theta < right) to always be false.

Step 30
To fix it we need to check for this specific scenario when left is greater than right

Add this code inside the canSeePlayer function:

Check Your Work
Step 31
Save and run your code

The enemy should now be able to see the player from all angles!

Planning
Step 32
The last step of this lesson is to make a Game Over screen

This will fade in when the enemy touches the player:

Step 33
Uncomment the code in the enemy's "state" function so it is able to move
Step 34
Create a boolean variable named "playing" to control when the game runs

Add this code to the index.js file:

Step 35
Now create two functions to check when the player and enemy touch and display the game over screen

Add this code to the index.js file:

Check Your Work
Step 36
Save and run your code

The game should now end when the enemy touches the player.

The lesson is now over!

Stealth Game 3 Info

Account

MVCode Clubs

Created By

aaronjau101

Course:

Artificial Intelligence (A.I.)

Access Level

premium

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