# CakeEater 3: Collisions and Cake Eating

Planning
Step 1
In this lesson we are going to make the player unable to walk on walls nor off the screen
Planning
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
Planning
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"

#### 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"
Planning
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

#### 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.

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

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

Planning
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
Step 18
Now we should not be able to go below the screen
Challenge
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.

Planning
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"

Challenge
Step 22
Include Crumb.js in your index.html page
Planning
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 supply this function with the player's column and row number

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

#### 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]
}
}```
Step 26
You should now see a green trail behind the player as they "eat" the cake tiles
Challenge
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

Step 28
You should now be unable to move on top of green Crumb Tiles- just as if they were walls
Planning
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

Account

MVCode Clubs

Created By

Course:

CakeEater

Access Level