Book Image

HTML5 Game Development by Example: Beginner's Guide

By : Seng Hin Mak
Book Image

HTML5 Game Development by Example: Beginner's Guide

By: Seng Hin Mak

Overview of this book

Table of Contents (18 chapters)
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
9
Building a Physics Car Game with Box2D and Canvas
Index

Time for action – adding graphics to the game


We are going to draw a blackboard background to the game:

  1. Download the graphics files from the code example bundle or the following URL: http://mak.la/book-assets. The graphics files include all the graphics that we need in this chapter.

  2. Put the newly downloaded graphics files into a folder named images.

  3. Now it is time to really load the image. There is a board.png file in the graphics file we just downloaded. It is a blackboard graphic that we will draw in the Canvas as a background. Add the following code after the code we just added in the previous step:

    untangleGame.loadImages = function() {
      // load the background image
      untangleGame.background = new Image();
    
      untangleGame.background.onerror = function() {
        console.log("Error loading the image.");
      }
      untangleGame.background.src = "images/board.png";
    };
  4. Since the image loading takes time, we also need to ensure it is loaded before drawing it:

    untangleGame.drawBackground = function() ...