CakeEater 2: Player movement

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.

Step 2
Create a new file "CakeEater.js"
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:


Now we assign those inputs to the CakeEater properties:


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

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


We'll leave them blank for now

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

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
Step 12
Now we can call the update() method on the cakeEater instance inside the draw loop
Check Your Work
Step 13
You should now see a blue rectangle representing the cakeEater
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
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

Set register equal to an empty object:

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

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
Step 22
Add a command to log the register every time a key is pressed
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)
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


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

Step 25
Remove the console.log commands
Step 26
Now that we can check for keyboard input, let's go back to the CakeEater move() method
Step 27
Here is where we want to add the x and y velocity to the eater's x and y position
Step 28
Now we need to make a function that sets the x and y velocities to values besides 0
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
Step 31
If the register's RIGHT_ARROW property is true, set the xvel to the speed variable, and the yvel to 0
Check Your Work
Step 32
Now if you tap the right arrow, the player moves to the right
Step 33
Add to the setVelocity method the ability to move left, up, and down

It should not be able to move diagonally!

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?

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


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.

Step 36
The same logic applies to the y-position

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
Step 38
Also we stop the player right when they land on the tile

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) {
}, false);

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

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


MVCode Clubs

Created By

Newprofile jamie



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