CakeEater 3: Collisions and Cake Eating

Step 1
In this lesson we are going to make the player unable to walk on walls nor off the screen
Step 2
We will create a function named "placeFree(col, row)" which tells us whether the player can move to a tile or not

Here there is a Wall at (2, 1) and so the place is not free

Step 3
Add a static method to the Tile class named "placeFree"
Step 4
In order to check if a place is free, we need to supply a column and row number to check
Step 5
If we get the index of the Tile in the tiles array that the player is trying to move to, we can check if it's a "Wall"

Column 3, Row 2 corresponds to index 13, which is a Wall


These objects are instances of Walls or Tiles

Step 6
Get the index of the given column and row
Step 7
So if the object in the tiles array at this index is of type Wall, the place is not free

We return false which ends the function and has it send back "false" to where it was called.

Step 8
If "return false" doesn't get called then return "true"
Step 9
Now we will use the placeFree function to prevent the player from moving to a location whose tile index is not free
Step 10
In the CakeEater's setVelocity method, find the player's column and row number

The position divided by the size of the Tiles will give the column and row numbers


Now we can use Tile.placeFree using these values

Step 11
If the player pressed the RIGHT_ARROW, we must also check if the tile 1 column to the right is free

myCol + 1 gives the column 1 space to the right.

Check Your Work
Step 12
Make sure you cannot move the CakeEater to the right if there is a Wall tile at that location
Step 13
Use placeFree to prevent the player from walking onto walls in every direction
Step 14
Next we'd like the placeFree function to also return false if the player is off the screen

Check if something is "off the screen" really is asking four different things:

- is the Tile above the top of the screen?

- is the Tile below the bottom of the screen?

- is the Tile beyond the right-side of the screen?

- is the Tile before the left-side of the screen?

Step 15
Below the screen, for example, would give us a row number that is greater than the number of rows

There is no row 4, so this tile must be below the screen

Step 16
First we can get the number of columns and rows by dividing the width and height by the size of the tiles
Step 17
If the row the player is trying to move to is greater than or equal to the number of rows, placeFree() returns false
Check Your Work
Step 18
Now we should not be able to go below the screen
Step 19
Prevent the player from exiting the other three sides of the screen

Use the or-operator || if you are familiar with it. Otherwise you'll have to use multiple if-statements.

HINT: if you leave out an equal's sign the player will be able to walk exactly 1 Tile off the side of the screen.

Step 20
We're going to make the Tiles now turn into "unwalkable tiles" after the player touches them

These will be place holders for "Crumbs" which appear when the player eats a cake Tile:


What is important is that the player cannot move back onto a tile which has already been eaten

Step 21
Make a new class named Crumb in a new file named "Crumb.js"

This class also extends from Tile, the only difference is that it's color is green and it's type is "Crumb"

Step 22
Include Crumb.js in your index.html page
Step 23
Next we're going to turn "Cake Tiles" into "Crumb Tiles" when the player lands on them

We're going to make an eat() method that replaces any Cake Tile the player lands on with a Crumb Tile.

Step 24
If the player has landed on a new Tile, they should attempt to eat that Tile

We're going to call a non-existent static function


We're going to supply this function with the player's column and row number

Step 25
Create a static method named "eat" inside of the Tile class

This method uses a column and a row number and should:

1. Use Tile.getIndex() to find the index number of the tile

2. Check the tiles array at index to make sure it is not an instanceof Crumb

3. If the Tile is not an instanceof Crumb, then set tiles[index] equal to a new Crumb

static eat(col, row) {
   var index = ???

   if ( //tiles[index] is not an instance of the Crumb class ) {

        //create a new Crumb and assign it to tiles[index]
Check Your Work
Step 26
You should now see a green trail behind the player as they "eat" the cake tiles
Step 27
Lastly we must add a check in the placeFree method to prevent the player from walking on Crumbs

Just like we did for the Walls, only with Crumbs

Check Your Work
Step 28
You should now be unable to move on top of green Crumb Tiles- just as if they were walls
Step 29
In the next lesson we will learn to add Sprite and Animations to our project to make it look like a cake
CakeEater 3: Collisions and Cake Eating 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