CakeEater Lesson 1

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

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

Planning
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

Temp1536874335

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

Here the player has missed one:

Temp1536791748

It's all about finding the right path

Temp1536791696
Planning
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
Temp1536792011
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
Temp1537224165
Step 6
Now we can switch to our index.js page
Temp1536703588
Step 7
Start by adding a setup() and draw() function
Temp1536703658
Step 8
use createCanvas and background to draw a canvas on the screen
function setup() {
    createCanvas(500, 500);
}

function draw() {
    background(200);
}
Temp1536704152
Planning
Step 9
This game will be made up of Tiles. It will be helpful to make a type of data the describes a Tile
Temp1536876925

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
Temp1536704301
Step 11
Create a Tile "class"
Temp1536705763

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
Temp1536705917

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
Temp1536708334

This object has a col and a row property

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

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"
Temp1536706480
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
Temp1536706868

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

Step 19
Add the calculation to the draw method
Temp1537231652

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

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

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
Planning
Step 22
Our game will feature a grid of *many* Tile objects. In the next few steps we will make a grid of Tiles
Temp1536709225

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

Planning
Step 23
...But this does NOT mean we are going to make 24 different variables!
Temp1536709019
Step 24
Remove testTile and add an empty array named tiles
Temp1536709498
Step 25
Instead of setting testTile to a new Tile, we will instead push a new Tile into the tiles array
Temp1536709589
Step 26
Instead of telling testTile to draw itself, we can tell every tile of the tiles array to draw themselves
Temp1536709691
Check Your Work
Step 27
You should see the Tile in the same position as before
Temp1536879492
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

Temp1536880203

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

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

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

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

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)
Temp1536713368
Step 35
Now back in index.js if you call Tile.createGrid() we can test this method
Temp1536713537

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

Temp1536713557
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
Planning
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
  ]
}
Temp1536714236
Step 38
Copy and Paste the level data from above and put it at the top of index.js
Temp1536714277
Step 39
Pass the level data into the createGrid() function
Temp1537221417

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
Temp1536715240 Temp1536715420

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
Temp1536715453

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
Planning
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
Temp1536715718
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
Temp1536715758
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
Temp1536885445
Planning
Step 48
Next we want to use the "tiles" property to set the correct type of tile when creating the grid
Temp1536716163

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

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

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

Challenge
Step 53
Calculate the index to complete the getIndex function
Temp1536788008

The value of index will be:

The column number
plus
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
Planning
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.

Temp1537221919
Step 56
First let's make color a property of Tiles
Temp1536790007
Step 57
Create a new file named Wall.js
Temp1536788982
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
Temp1536789528
Step 60
We *must* call super() which calls the constructor for the parent class, Tile
Temp1536889790
Step 61
But now we can overwrite the color property here, to make the walls darker
Temp1536790136
Step 62
Be sure to include Wall.js in your index.html header
Temp1536790430
Planning
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
Temp1536790267

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
Temp1537219922
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
Temp1536790597
Check Your Work
Step 66
Your level grid should now display both walls and tiles
Temp1536790866
Challenge
Step 67
Try changing the size and tiles array to make a new level
Temp1536791436
CakeEater Lesson 1 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