Time for action – decorating the game and adding a fuel limitation
Carry out the following steps to turn our debug draw into a rich graphical game:
- First, we need some background images for the starting screen, game winning screen, and environment backgrounds for each level. These graphics can be found from the code bundle named
box2d_final_game
. The following screenshot shows the graphics that we need in this section: - Open the
index.html
file and replace the canvas element with the following markup. This creates two more game components namedcurrent level
andfuel
remaining
, and it groups the game components into agame-container
DIV:<section id="game-container"> ...
Get HTML5 Game Development by Example : Beginner's Guide - Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.