 # CakeEater Lesson 1

Planning
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

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 #### Here the player has missed one: #### It's all about finding the right path 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
Step 4
We'll be coding this with p5js so we'll need to include the library in our index.html page
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() {
background(200);
}``` 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 #### - 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"
Step 12
For now we'll say each Tile has just a column and a row
Step 13
Go to index.html and include Tile.js into the project. This let's us use the Tile class
Step 14
Go back to index.js and let's test our Tile class
Step 15
When you log the testTile to the console we can see that it created a Tile object
Step 16
We can also add a method to have each tile draw itself #### - Y-position

Step 17
First we'll define a variable named "tilesize"
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
Challenge
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
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
Planning
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
Step 27
You should see the Tile in the same position as before
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.

Planning
Step 29
Now instead of pushing a random tile in, we want to *create* a *grid* of tiles #### 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()
Planning
Step 31
We'll start by creating a single ROW of TILES
Planning
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 36
Add a second for loop to create several rows. Row 0, then row 1, then 2... until the grid is complete
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
]
}``` 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 #### 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
Step 41
The grid should now be 5 columns by 4 rows
Step 42
Use resizeCanvas so that the canvas fits the grid exactly
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 ##### 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
Step 47
Make sure your program still works properly
Planning
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).

Planning
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
Information
Step 51
Notice that for all tiles, increasing the column number by 1, also increases the index number by 1
Information
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.

Challenge
Step 53
Calculate the index to complete the getIndex function The value of index will be:

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

Step 54
```//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);```  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. 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
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
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 #### 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
Step 66
Your level grid should now display both walls and tiles
Challenge
Step 67
Try changing the size and tiles array to make a new level
CakeEater Lesson 1 Info

Account

MVCode Clubs

Created By jamie

Course:

CakeEater

Access Level