Code Warrior 6

Planning
Step 1
Clean Up Time

The code we have in index.js may be a bit messy and we will only be making it more messy if we don't start organizing now.

Broom

This lesson will use clean code techniques and add some more features.

Step 2
Start by creating a new "enemyUpdate" function inside index.js

The code inside the function is available to COPY and PASTE from the draw function

7
Step 3
Do the same for a "projectileUpdate" function

Again this code is available in the draw function to COPY and PASTE! Ask for help if you don't understand.

8
Step 4
Let's now use our new functions and clean up the draw function

Notice that I may have changed the order of objects updating so projectiles will always be behind and the player is always on top.

I also changed the if statement to check if the game is playing to do the game functions. This will come in handy soon.

9
Information
Step 5
We will have 3 "states" to our game

The states of our game is the Start Screen, Playing the Game, and Game Over screen.

11

The diagram above shows how we transition to each state, assuming we begin at the Start Screen state.

Information
Step 6
Notice that the draw function only really has one state at the moment

The draw function only has a playing state, although the code does technically have a Game Over state.

12

We will organize the states in the following steps.

Step 7
Add a new variable "start" and add an if statement to create a start state in the draw function

We use an else if statement so the game won't play if start is true.

13
Step 8
Now add a final else statement which will act as our GAME OVER state

Add this code to the draw function:

14
Information
Step 9
We now have the 3 states set up in the draw function
15
Step 10
Create a new function to draw the Game Over screen

Leave it blank for now

16
Step 11
Find the code that previously drew the Game Over screen and cut it

"CUT" means copy and delete.

The keyboard shortcut is: Ctrl + X

17
Step 12
Paste the code to the drawGameOver function and then call it from the draw function
20
Challenge
Step 13
Make a new function to draw a Start Screen and call it in the draw function
18
Check Your Work
Step 14
Save your code

We should see the Start screen.

Note we currently can't start the game which we will fix next.

21
Step 15
Add a function to make the start state end when the mouse is pressed on the screen
22
Check Your Work
Step 16
Save your code

The game should begin when the mouse is pressed during the start screen, and it should also display the Game Over screen.

Step 17
We will now begin adding the functionality to restart the game once the Game Over scene appears

To begin, change the level and playing variable to be assigned inside the setup function.

23

The reason we will not do the same for start variable is because we do not want that variable to reset when the game resets.

Step 18
We can now setup the game to restart using the setup function

Add this code inside the input.js file:

24
Check Your Work
Step 19
Save your code

We can restart the game when the Game Over screen shows up by clicking on the screen

Step 20
Let's now add a score and highscore to our game

First, add two variables to index.js

26

Note: the score will need to reset when the game does so that is why we assign it in the setup function, unlike our highscore

Step 21
Now we need to increase the score if the player's projectile hits an enemy or an enemy proejectile

Feel free to change the amount of points given

28
Step 22
Now make a function to draw the score and call it while the game is playing
30
Check Your Work
Step 23
We should now see the score in the top left and highscore in the top right

The score should be the only one changing

31
Challenge
Step 24
Add some code to "drawGameOver" function that will calculate if the highscore should be changed

It will also display a message to "Click to Restart" and "New Highscore" if true.

32

The code should look like this:

33
Check Your Work
Step 25
Save your code

The game should now have a working highscore!

This lesson is now over!

In the next lesson, we will add a Boss Enemy!

Code Warrior 6 Info

Account

MVCode Clubs

Created By

Missing tiny aaronjau101

Course:

Code Warrior

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