HTML and CSS Reference
In-Depth Information
• How to create an introduction and Game Over screen
• How to choose a Canvas game engine
We're going to skyrocket the usefulness of your Canvas Ricochet game by showing you
how to polish it to perfection in only four steps.
• Step 1: Create a score and level counter.
• Step 2: Store high scores online (optional).
• Step 3: Create a Welcome screen.
• Step 4: Create a Game Over screen.
After you add a point system and optional Facebook scoreboard for users, you'll create a
dynamic leveling system with a few code modifications, so users play harder and faster as
their skills improve. Then, you'll place the cherry on top of Canvas Ricochet with opening
and closing screens. Lastly, we'll cover the current Canvas gaming engines to help with
writing your next game.
First up is tracking score and levels.
6.4.1. Tracking score and levels
When we were about 10 years old (okay, maybe some of us were older!), we played Break-
out all the time. One of us played on the now-ancient Atari gaming system; another played
at Pizza Hut every Friday. We'd play over and over to keep raising our scores. Back then,
you could only compete with a local community; now, with social media, it's quite easy
to put your game's scoreboard online so people can compete on a global scale. But before
your users can post their high scores online, you'll need to tweak your game to record brick
breaks.
Step 1: Create a score and level counter
Your heads-up display (HUD) requires that you create text with the Canvas API. Just like
CSS you have access to text align, vertical align (called text baseline), and @font-face
fonts. Be warned: You don't have access to any letter-spacing properties, so your text might
end up looking a bit cramped.
