CakeEater 5: Adding Stylesheets and Prettifying with Sprites

Planning
Step 1
We are going to add a CSS file to make the game look like a cake pan

I've designed the CSS code for you already but you are free to change it however you'd like

Temp1539299343

The purpose of this is to learn how to add CSS files to your game!

Step 2
Head to your index.css file
Temp1539215205

Paste in this CSS code:

body {
  background-color:  rgb(50, 50, 50);
}

#centered {
  text-align:center;
}

#mycanvas {
  border: 6px solid darkgrey;
  border-radius: 4px;
}

#pan {
  display:inline-block;
}

#pan-bottom {
  border-top: 40px solid grey;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
Step 3
We can include this stylesheet in the index header using a <link> tag
Temp1539215339

Add a <link> tag with the following properties:

Temp1539215572
Check Your Work
Step 4
You should see that the body styling has turned the <body>'s background dark grey
Temp1539215656 Temp1539215704
Step 5
Add a <div> whose id is "myCanvas"
Temp1539215915
Planning
Step 6
Now we have a div named "myCanvas" and a canvas made by our p5js script's "createCanvas"
Temp1539216159

We want the p5js canvas to exist inside of the "myCanvas" <div>

Step 7
In index.js create a variable named "canvas" and set it equal to the createCanvas() function.
Temp1539216359

Once the p5js canvas has been created we can set canvas's parent to the "myCanvas" <div>.

Check Your Work
Step 8
Now we can see the p5 canvas is inside of "myCanvas" div
Temp1539216451
Step 9
If we wrap "myCanvas" in a "pan" div, we see that the border now fits the canvas
Temp1539216609
Step 10
If the then wrap the "pan" div in a "centered" div we can get the pan in the center of the screen
Temp1539216743
Step 11
Lastly we can add a "pan-bottom" div under the canvas to add this 3D effect
Temp1539216891
Planning
Step 12
The last bit of CSS we're going to do here is make our title fancy
Temp1539293445

You'll notice in index.html we've already assigned the title to a <div> ID'd "title"

Temp1539293510
Step 13
In your CSS file make a selector for the "title" element
#title {

}
Step 14
Center the title and change the font color to yellow
#title {
  text-align: center;
  color: yellow;
}
Temp1539293659
Step 15
Increase the font-size to something like 48px
#title {
    color:yellow;
    text-align:center;
    font-size: 48px;
}
Temp1539293814
Step 16
Add a margin around it to give it some space
#title {
    color:yellow;
    text-align:center;
    font-size: 48px;
    margin: 10px;
}
Temp1539293778
Planning
Step 17
Next, we'll change the font to something more interesting
Temp1539294592

We can use fonts.google.com to find fonts we like.

It also gives us the CSS and HTML we need to include the fonts in our webpage.

Step 18
I found this font I liked on Google Fonts

On this site it has you select the fonts you like:

Temp1539294054

Then in the bottom right it will give you the link you need to add to your html page in order to use the fonts you chose:

Temp1539294125
Step 19
Here is the link to the font I used

Copy this link into your project or find a font that you like from fonts.google.com

<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
Temp1539294276
Step 20
Finally, google fonts will give you the CSS code you need for the font you chose
Temp1539294437

Copy and paste this font family into your title's CSS selector:

font-family: 'Permanent Marker', cursive;
Temp1539294484
Check Your Work
Step 21
Just look at how fancy we are now
Temp1539294729

You can always add more stylization to personalize it in a way you like:

Temp1539295249
Planning
Step 22
The last bit of prettifying we'll do in this lesson is to make cake slices appear 3D when their bottom side is exposed
Temp1539295538

We can use Tile.getIndex() to check if the space below a tile has been eaten (if it is Crumbs)

Step 23
Add a new property to the Tile class named sideSprite
Temp1539295746

This sprite should be set to use the "eatenCakeTileImg".

Planning
Step 24
We need have each Tile look at the tile beneath it (if any)
Temp1539296535

If the Tile below is a Crumb, then the Tile should draw its sideSprite

Step 25
In the Tile's draw method let's get the index of the "below tile"
Temp1539296624
Step 26
The "below Tile" is the Tile located at this index of the tiles array
Temp1539296725
Step 27
Now we construct an if statement to check
Temp1539297092

We are checking THREE things here

1. if there IS a sideSprite

2. if there is a belowTile

and only then do we check

3. if the belowTile is a Crumb

Step 28
If those three conditions are true, we draw the sideSprite
Temp1539297260
Step 29
ELSE have the Tile draw it's normal sprite
Temp1539297360
Check Your Work
Step 30
If we try this we get a bit of a silly glitch
Temp1539297416

The Crumbs are turning into Cake sideSprites!

Information
Step 31
This has to do with our Class hierarchy

The Wall and Crumb class extend from the Tile class

Temp1539298028

Thus because we gave the Tile a sideSprite of eatenCakeTileImg, so too do the Wall and Crumb classes

Information
Step 32
We could have designed our Classes like this which might have been a better idea
Temp1539298702

Where Cake is its own class that extends from Tile just like Wall and Crumb

Step 33
We'll fix this issue by adding the correct sideSprite to the Wall class...
Temp1539298505

Remember this tile has 2 animation frames as well

Step 34
...and by setting the sideSprite of the Crumbs to null
Temp1539298582
Check Your Work
Step 35
Now we should see the correct sideSprites for each Tile
Temp1539298633
Planning
Step 36
One last touch is that our crumbs sprite actually has three different "animations"
Temp1539298916

Let's have our crumbs sprite display one of these randomly

Step 37
Set the animation number of the Crumb's sprite to a random number 0, 1, or 2
Temp1539299117

random(3) picks anything from 0 to 2.999999....
floor() removes all decimals from a number so:

  • floor(1.25) -> 1
  • floor(1) -> 1
  • floor(2.99999) -> 2
Check Your Work
Step 38
Now we've got random crumb patterns for the Crumb tiles
Temp1539299231
Planning
Step 39
In the next lesson we will be finishing up the game play of our game

We'll be adding:

  • the ability to pick your starting tile
  • the ability to win the game
  • the ability to reset
CakeEater 5: Adding Stylesheets and Prettifying with Sprites 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