Multiply Defense - HTML5 Game Development - page 133

Objective complete - mini debriefing
The following screenshot displays what we have done in this task. We have added inputs and
the muliplicaion equaion to the game.
We use HTML for mouse input because this is independent of the game elements. It is easier
to handle the hover and acive state with CSS. In Project 5 , Building an Isometric City Game ,
we will explore a canvas-based mouse input on the in-game objects.
We need to come up with a way to represent two numbers in the format, A x B = Result .
Here, A and B are elements in the array. Result is calculated every ime a new input is entered.
The muliplicaion format can be set by using the join method in the build-in array object.
For example, consider an array: [1, 2, 3, 4] . Joining this array with character x will result
in the following format:
1x2x3x4
Then, we just add the equal to sign and the result to form the equaion.
Actually, in this game, we just accept a maximum of two inputs for each muliplicaion
because all the generated numbers are composited by two of the input integers.
Classified intel
We put the equaion inside the canvas by using the CreateJS text object. Since this equaion
text is independent of any other game elements, it is our choice to put the text as a DOM
element or inside the canvas. In Project 5 , Building an Isometric City Game , we will discuss
more on grouping user interface elements inside the EaselJS object's structure.
In the EaselJS text object, textAlign is for horizontal
alignment and textBaseline is for verical, which can be
found at http://createjs.com/Docs/EaselJS/
classes/Text.html#property_textAlign .