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:
   
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">
       <canvas id="game" width='1300' height='600' class="startscreen"></canvas>
      
      <div id="fuel" class="progressbar">
         <div class="fuel-value" style="width: 100%;"></div>
      </div>
   ...