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

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
      var game = || ({});
      game.RectShape = (function(){
        function RectShape(width, height, style){
; // super init
          // set default shape style for missing ones.
          style = style || {};