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
Temp1537393812

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"
Temp1537394540
Step 4
In order to check if a place is free, we need to supply a column and row number to check
Temp1537394635
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"

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

Temp1537395510

These objects are instances of Walls or Tiles

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

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

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

Temp1537482920

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
Temp1537483046

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
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
Temp1537402351

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?

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

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
Temp1537483328
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
Temp1537483586
Check Your Work
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:

Temp1539206632

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

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
Temp1539207751
Planning
Step 23
Next we're going to turn "Cake Tiles" into "Crumb Tiles" when the player lands on them
Temp1539209223

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 Tile.eat

Temp1539208064

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

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
Temp1539208932
Challenge
Step 27
Lastly we must add a check in the placeFree method to prevent the player from walking on Crumbs
Temp1539209064

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
Temp1539209182
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

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