HTML and CSS Reference
In-Depth Information
The first dimension is the
z
index of the paterns, which is the sequence that players
must match.
In order to represent the same level of relaionship between the two trapezoids, we put
them into one slot inside our array; thus, the array inside the code becomes the following:
[ [Left Trapezoid, Right Trapezoid], [Triangle] ]
To make the array item type consistent, we can force a single item to be wrapped inside the
group too. Let's call each group of non-overlapped patern
layer
.
Now, the final data array will be as follows:
[ [Left Trapezoid, Right Trapezoid], [Triangle] ]
Here, each array inside the quest level represents one layer with paterns that are
interchangeable. Any overlapping patern will be another new layer. Moreover, we put
all the levels into an array to represent all the levels.
Composition and quest modules
The composiion module contains only a data instance variable in the current task. The data
has the same format as the mulilayered paterns. Quest modules inherit the composiion
with logic that is related to the quest levels.
In future tasks, we are going to add more logic to the composiion and quest modules to help
in manipulaing the format of a mulilayer patern.
Placing the patterns on the deck
In this task, we are going to list the patern in the deck. Later, we will let the player select
paterns from this deck.
Prepare for lift off
We are going to need a new module to handle the display of the composiion. Let's create
a new empty JavaScript file named
composition-view.js
.
We need to import the file into the
index.html
file, as follows:
<script src='js/composition-view.js'></script>
