CakeEater 2: Player movement

Planning
Step 1
In this lesson we will be adding a new Class to represent our CakeEater

Eventually the CakeEater will be animated. For this lesson we will simply represent it as a blue tile.

Temp1537235100
Step 2
Create a new file "CakeEater.js"
Temp1537225017
Step 3
Create a class named CakeEater
class CakeEater {

}
Step 4
The first thing we do when we make a class is create a constructor
class CakeEater {
    constructor() {

    }
}
Step 5
The constructor needs a x and a y property to place the CakeEater

These are inputs to the constructor:

Temp1537225255

Now we assign those inputs to the CakeEater properties:

Temp1537225409

The CakeEater's x is equal to whatever the user supplied as the x-input

Step 6
We're also going to add an x-velocity and a y-velocity to record the speed of the eater
Temp1537225568

These values will always start at 0.

That's why we don't need an xvel and yvel input in the constructor.

Step 7
Now there are two "actions" the eater needs to be able to perform: draw and move

We create methods to describe these actions

Temp1537225690

We'll leave them blank for now

Step 8
Lastly, create an "update" method which will call the "draw" and "move" methods
Temp1537225978
Step 9
We can make the draw method do something now- draw a blue rectangle at the CakeEater's x and y position
Temp1537225796
Step 10
Return to index.js and create a new global variable named cakeEater
Temp1537226092

Note that we name classes with a capital letter (CakeEater) and this variable uses a lowercase name (cakeEater).

This helps us keep track of which is which

Step 11
Inside of setup() we'll create the CakeEater instance
Temp1537226136
Step 12
Now we can call the update() method on the cakeEater instance inside the draw loop
Temp1537226323
Check Your Work
Step 13
You should now see a blue rectangle representing the cakeEater
Temp1537226038
Planning
Step 14
Next we're going to work on making the player move. The idea is to make it slide one tile at a time
Planning
Step 15
Before this though, we need to create an Input system so we can check keyboard inputs
Step 16
Create a file named Input.js and in it create a global variable named register
Temp1537226397

Set register equal to an empty object:

Temp1537226414
Step 17
Include Input.js in your html header
Temp1537228249
Step 18
Next we're going to add the keyPressed function
Temp1537226502
Step 19
This function gives us a variable named keyCode which tells us the last key pressed
Temp1537226626

Try logging keyCode to the screen

Check Your Work
Step 20
Now if you press a key, you should see its keyCode appear in the console

Make sure you've clicked the canvas before you try typing.

Step 21
Remove the console.log command and replace it by setting a property in register corresponding to the keyCode to true
Temp1537227198
Step 22
Add a command to log the register every time a key is pressed
Temp1537227261
Check Your Work
Step 23
Now every time a new button is pressed, it's keyCode in the register is set to true

Here I press

  • the LEFT_ARROW (37),
  • then the DOWN_ARROW (40),
  • and then RIGHT_ARROW (39)
Challenge
Step 24
Add a keyReleased function that sets the register property "keyCode" back to false

This way when a key is pressed it's register value is set to true
Then when it is released it's register value is set to false

Temp1537227844

Above I pressed and released LEFT_ARROW (37) and then again with DOWN_ARROW (40).

Step 25
Remove the console.log commands
Temp1537228323
Step 26
Now that we can check for keyboard input, let's go back to the CakeEater move() method
Temp1537230958
Step 27
Here is where we want to add the x and y velocity to the eater's x and y position
Temp1537231037
Planning
Step 28
Now we need to make a function that sets the x and y velocities to values besides 0
Temp1537231254
Planning
Step 29
The movement of this game is a gliding motion from one Tile to the next

The player can't move diagonally, and can't move any distance other than exactly 1 Tile at a time

Step 30
Start by setting a speed variable equal to 2
Temp1537231595
Step 31
If the register's RIGHT_ARROW property is true, set the xvel to the speed variable, and the yvel to 0
Temp1537231796
Check Your Work
Step 32
Now if you tap the right arrow, the player moves to the right
Challenge
Step 33
Add to the setVelocity method the ability to move left, up, and down

It should not be able to move diagonally!

Planning
Step 34
We want the CakeEater to stop gliding once it lands perfectly on a grid tile

But how can we know that the CakeEater is exactly on a Tile?

Information
Step 35
If we log the x position modulo tilesize (which is 50) we can see this pattern

this.x % tilesize starts at 0, increases all the way up to 48, then resets to 0 once it hits 50

Temp1537233549

If this.x % tilesize == 0

then the CakeEater's x-position is a multiple of tilesize

and therefore

the CakeEater's x-position is perfectly on a grid tile.

Information
Step 36
The same logic applies to the y-position
Temp1537234679

If both x and y are exact multiples of tilesize, then the CakeEater is perfectly on a tile

Step 37
Modify the move method so that it only sets the velocity if the player is on a tile
Temp1537234124
Step 38
Also we stop the player right when they land on the tile
Temp1537234213

We need to stop the player before we call setVelocity!

Check Your Work
Step 39
You should now be able to move one tile at a time in any direction

Make sure you cannot move diagonally, and that you cannot move in-between tiles!

Step 40
Add this code to the end of Input.js to prevent the arrow keys from scrolling the page up and down while you play
//Prevent arrow keys scrolling the page
window.addEventListener("keydown", function(e) {
    if([37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

We're not going to talk about EventListeners in this course, so for now just copy and paste this code into Input.js

Temp1537399922
Planning
Step 41
In the next lesson we will add collision with walls and the boundary, and also let the CakeEater eat the cake!
CakeEater 2: Player movement Info

Account

MVCode Clubs

Created By

Newprofile jamie

Course:

CakeEater

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