HTML and CSS Reference
In-Depth Information
Application users don't want to spend their first 10 minutes randomly smashing keys and
clicking everywhere. Put your game's controls in an easy-to-find location and use concise
wording. For instance, placing the controls directly under a game is a great way to help
users.
Step 4: Add control info via HTML
To add a control description to Canvas Ricochet, add a simple
<p>
tag directly below
<canvas>
. It should say, “LEFT and RIGHT arrow keys or MOUSE to move.” If you
really want, you could create a graphical illustration that's easier to see, but for now you'll
just use text for simplicity.
<canvas id
=
"canvas"
width
=
"408"
height
=
"250"
>
Your browser shall not pass! Download Google Chrome to view this.
</canvas>
<p>
LEFT and RIGHT arrow keys or MOUSE to move
</p>
<script type
=
"text/javascript"
src
=
"game.js"
></script>
Congratulations! You've just completed an HTML5 game from beginning to end. You can
now play a complete level of Canvas Ricochet without interruption. We know it's been a
difficult journey to get this far, but why not take your game farther? With just a little more
work, you can add progressive level enhancement and screens to make your game shine.
6.4. Polishing Canvas games
Your game is technically complete, but it lacks the polish necessary to attract players. Ad-
dictive elements such as scoreboards, increased difficulty levels, and an enjoyable user ex-
perience are essential. They help to increase game revenue, maximize the number of users,
and, most important, keep people playing.
In this section you'll learn
• How to implement and maintain a player's score
• How to integrate social score-sharing
• How to avoid security issues in your apps
• How to integrate a leveling system
