CakeEater Lesson 1

Step 1
In this course we will be building a puzzle game named "Cake Eater"

We will learn to use Classes and Spritesheets to make animated characters and a simple game

Step 2
The game takes place on a grid of cake tiles

The player moves one Tile at a time, but cannot move to tiles that have been Eaten


The goal is to eat all of the cake. (Not including candles)

Here the player has missed one:


It's all about finding the right path

Step 3
We're going to start with an outline of the game, using colored tiles. We will get to the images in lesson 4
Step 4
We'll be coding this with p5js so we'll need to include the library in our index.html page
Temp1536792701 Temp1537224687

Click the CDN > p5js button to copy the link, then paste it between the <head></head> tags

Step 5
Use another <script> tag to add "index.js" in the body of the html page
Step 6
Now we can switch to our index.js page
Step 7
Start by adding a setup() and draw() function
Step 8
use createCanvas and background to draw a canvas on the screen
function setup() {
    createCanvas(500, 500);

function draw() {
Step 9
This game will be made up of Tiles. It will be helpful to make a type of data the describes a Tile

Each Tile consists of:

- a Row

- a Column

- an Image

- and may or may not be traversible

Step 10
Create a new file which will describe a Tile for our project to use
Step 11
Create a Tile "class"

This class will be able to create Tile objects for us

Step 12
For now we'll say each Tile has just a column and a row

The constructor makes objects of type Tile

Step 13
Go to index.html and include Tile.js into the project. This let's us use the Tile class
Temp1536707761 Temp1536792583
Check Your Work
Step 14
Go back to index.js and let's test our Tile class
Temp1536707603 Temp1536707737
Check Your Work
Step 15
When you log the testTile to the console we can see that it created a Tile object

This object has a col and a row property

Step 16
We can also add a method to have each tile draw itself

Each tile is drawn by creating a rectangle.. but we need more information in order to use rect()

- width and height

- X-position

- Y-position

Step 17
First we'll define a variable named "tilesize"
var tilesize = 50;

Add this to the top of Tile.js

Step 18
To calculate the x-position we'll need to use the column number of the tile

If we multiply the column number by the tilesize we can get the x-position

Step 19
Add the calculation to the draw method

let is just like using var but it's more temporary

Step 20
How can you now calculate the y-coordinate of the Tile?

With x, y, and tilesize we can use the rect() function.

Step 21
Back in index.js use the main draw() loop to call the testTile's draw() method
Temp1536708491 Temp1536708454
Step 22
Our game will feature a grid of *many* Tile objects. In the next few steps we will make a grid of Tiles

A grid of this size would require 24 different Tile objects.

Step 23
...But this does NOT mean we are going to make 24 different variables!
Step 24
Remove testTile and add an empty array named tiles
Step 25
Instead of setting testTile to a new Tile, we will instead push a new Tile into the tiles array
Step 26
Instead of telling testTile to draw itself, we can tell every tile of the tiles array to draw themselves
Check Your Work
Step 27
You should see the Tile in the same position as before
Check Your Work
Step 28
With this array and for..of loop we can now draw every Tile we push into the tiles array

You don't need to add this, I'm just showing you how it works so far


If we push a bunch of Tiles into the tiles array, they will all be drawn by the for..of loop.

Step 29
Now instead of pushing a random tile in, we want to *create* a *grid* of tiles

We will start by creating a single row of tiles using a loop.

Then we can use another loop to create a bunch of rows to make the grid.

Step 30
Inside of the Tile class we're going to make a "static" method named createGrid()
Temp1536711629 Temp1536711723
Step 31
We'll start by creating a single ROW of TILES

What we DO NOT want to do, is make each tile one at a time like this...

Step 32
When making a loop, notice how each new Tile we create has a column number 1 greater than the last
Step 33
We'll use a for loop to count through each column

We'll start counting at c = 0 and then count by 1 until c is equal to the number of Columns

Step 34
We can use this to push a tile at position (0, 0) then (1, 0), (2, 0)... etc. Making a row (row number 0)
Step 35
Now back in index.js if you call Tile.createGrid() we can test this method

We can call Tile.createGrid() because the method is static.

Step 36
Add a second for loop to create several rows. Row 0, then row 1, then 2... until the grid is complete
Temp1536883168 Temp1536713763
Step 37
Next we're going to include level data and use it to create a grid with all the correct tiles in it
var level = {
  size: [5, 4],
  tiles: [
    0, 0, 0, 0, 0,
    0, 1, 0, 1, 0,
    0, 1, 0, 1, 0,
    0, 0, 0, 0, 0
Step 38
Copy and Paste the level data from above and put it at the top of index.js
Step 39
Pass the level data into the createGrid() function

Here we add a parameter, levelData to the createGrid() method.

Then we pass the level object when we call Tile.createGrid().

Step 40
The first thing we can do is use the *size* property to set the number of columns and rows to the proper amount


The first element of levelData.size holds the number of columns, and the second holds the number of rows.

Check Your Work
Step 41
The grid should now be 5 columns by 4 rows

Next we'll get rid of the extra space around the grid

Step 42
Use resizeCanvas so that the canvas fits the grid exactly
Temp1536715522 Temp1536715592
Step 43
When we tell the canvas to resize, the html on the page can lag behind our program a bit.

We'll need to have our program wait for the canvas to resize before we allow it to keep running

Step 44
Create a waitForResize variable and set it equal to false
I included this at the top of Tile.js because this variable is related to Tiles.
Step 45
Now, set waitForResize to true before the resizeCanvas() is called, then set it to false right afterwards
Step 46
In the main draw() loop in index.js, cancel the draw loop if waitForResize is true
Temp1536715819 Temp1536715807

This way draw() will wait until the canvas has finished resizing.

Check Your Work
Step 47
Make sure your program still works properly
Step 48
Next we want to use the "tiles" property to set the correct type of tile when creating the grid

Here, a 1 represents a Wall (candles), while a 0 represents a Tile (cake).

Step 49
First, we're going to need to refer to each tile by what we'll call it's "Index Number"
Step 50
We'll create a static method Tile.getIndex(), which takes a column and row number and returns the index number
Step 51
Notice that for all tiles, increasing the column number by 1, also increases the index number by 1
Step 52
Increasing the row number by 1, however, increases the index number by 5

Better is to say that it increases the index number by the Number of columns.

Step 53
Calculate the index to complete the getIndex function

The value of index will be:

The column number
The row number multiplied by the number of columns.

Check Your Work
Step 54
Check your solution using this test code. Add it to your setup() function in index.js
//Testing Tile.getIndex
    var i1 = Tile.getIndex(0, 0);
    var i2 = Tile.getIndex(0, 2);
    var i3 = Tile.getIndex(4, 0);
    var i4 = Tile.getIndex(2, 3);
    var i5 = Tile.getIndex(4, 1);
    console.log(i1, i2, i3, i4, i5);
Temp1536788792 Temp1536788389
Step 55
Next we're going to create a new type of Tile. A "Wall" tile.

Eventually these tiles will look like candles, but for now they will simply be a different, darker color.

Step 56
First let's make color a property of Tiles
Step 57
Create a new file named Wall.js
Step 58
In this file create a new class named Wall, which we will say "extends" the Tile class
Temp1536789033 Temp1536789050

This means that a Wall can do everything that a Tile can do.

But we can change a couple of things about Walls

Step 59
Create a constructor for the Wall tile
Step 60
We *must* call super() which calls the constructor for the parent class, Tile
Step 61
But now we can overwrite the color property here, to make the walls darker
Step 62
Be sure to include Wall.js in your index.html header
Step 63
Now we'll use the tiles property of the level data to tell the program which type of block to add to the grid

We'll need to use Tile.getIndex() so we can check if tiles[index] is equal to a 1 or a 0.

Step 64
Update the createGrid method so that it only places a new Tile if the level data at that index is equal to 0
Step 65
Add an else/if to say that if the level data value at the index is equal to a 1, add a new Wall
Check Your Work
Step 66
Your level grid should now display both walls and tiles
Step 67
Try changing the size and tiles array to make a new level
CakeEater Lesson 1 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