O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required