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