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

Defining the numbered box

In this step, we will define the core game object of the game. We draw a square shape and add a number value to the box. We will learn how to create a prototype inheritance, which is one of the most important concepts when creating a JavaScript game.

Engage thrusters

Let's use the following steps to create a square-shaped numbered box.

  1. First, we put the width and height of the box in game.setting so that we can easily adjust the box's size in future:
    game.setting = {
        boxWidth: 50,
        boxHeight: 50,
        // existing settings here
    }
  2. Next, we define the rectangle shape as illustrated in the following code snippet. We are going to use it quite often before we apply graphics:
    // RectShape ;(function(){ var game = this.game || (this.game={}); ...

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