Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

Replacing the rectangle shape with bitmap graphics

In this task, we will decorate the game with bitmap graphics. We replace the current code-drawing shape with bitmap graphics drawn in the painting software.

Prepare for lift off

We will need several bitmap images in this task. They will be used as images for the background, box, heart, and the deadline. Please find them attached in the code bundle.

Engage thrusters

Let's start by replacing the canvas's background and input.

  1. The following code elements are the HTML elements and we can set the graphics in CSS:

    canvas {
      background: #333 url(../images/bg.png);
    .control {
      background: gray url(../images/input_button.png);
    .control:active {
      background: white url(../images/input_button_hover.png);
  2. Then, we use bitmap to replace the canvas's RectShape function. We start with the box:

    function Box(){;
      var bitmap = new createjs.Bitmap('images/box.png');
  3. Then, we replace the deadline shape...