O'Reilly logo

HTML5 Game Development HOTSHOT 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

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.

Prepare for lift off

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); ...

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