HTML and CSS Reference
In-Depth Information
Using the data-* atribute
It is often useful to use the
data-*
atribute to embed extra informaion
when we use DOM elements to represent game objects. Take the card as
an instance. We can define
data-pattern='3'
to indicate that element
is a visual of patern number 3. We can deine whatever we like as long as
it begins with
data-
. Then, we can use the
getAttribute
method to
access it and use the
setAttribute
method to update it. Alternaively,
we can use the
dataset
method to access the
data-*
atribute.
Visualizing the quest patterns
A patern is a stack of background-transparent cards. We can represent each card as a DIV
and overlay them together in one container. In the composiion node, we overlap the patern
by seing the posiion to absolute, top-let posiion to 0.
Whenever we use absolute elements, we want to make sure that we have control of the
reference point of the top and let properies; this means controlling where the top 0 and
let 0 posiions are.
Elements that are posiioned at the absolute point reference the top-let point in the
following way:
F
They ind the irst parent with a posiion and set it as absolute or relaive
F
They use the body's top-let point if no parents are found with the posiion's seing
Therefore, what we need to do is set a posiion that is relaive to the container, namely,
.composition
.
The posiion styling for the quest and patern has been deined in the CSS. What we need
to do is append the newly created HTML node to the quest node from the
gameScene.
visualize
method. The patern HTML nodes are created from the template and with the
class defined that match the CSS rules.
Quest level
In this game, we require the player to select the patern in the correct sequence to match
the quest. However, some paterns are not overlapped with other paterns. In this case, we
will put the two non-overlapped pairs together so that the order of choosing among these
paterns will not be treated in the wrong order.
We would like to come up with an approach to compare the player's composiion with the
quest's composiion.
