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:

  1. 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:
    Time for action – decorating the game and adding a fuel limitation
  2. Open the index.html file and replace the canvas element with the following markup. This creates two more game components named current level and fuel remaining, and it groups the game components into a game-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.