HTML and CSS Reference
In-Depth Information
Objective complete - mini debriefing
We created a CSS transiion to lip and move the selected card from the deck to the center of
the game screen.
Resetting the card's initial position
In the
restartGame
method, we rest the cards in their iniial posiion. The posiion and
states have been designed in the CSS rule. The logic of reseing the cards is just about
removing any added classes and seing the class list to the iniialized one.
Selecting the card with a click event
During the setup stage of the game scene, we listen to the click event of all the card
elements for the players. Once a card is selected, we remove the
flipped
class and
add the
selected
class.
Note that we put the click event registraion in
setup
instead of
onShow
because
setup
is called only once and
onShow
is called every ime the
scene shows. We just need to register the event listeners once.
Removing the non-selected cards
After any card is selected, we hide the other non-selected cards to let the player focus on the
batle animaion. This is done by toggling the in/out state on all the lipped cards. Note that
we do not cache this querying on the
flipped
class because the result is different in every
round after a player selects any card.
Short delay before the card goes into transition
We used
setTimeout
to create a short delay before the player's cards go into transiion.
This delay provides the illusion of refreshing the cards between two rounds of batle.
Besides the
setTimeout
JavaScript, there is a delay feature available in the CSS property.
Normally, we prefer using the CSS delay property to make all the styles and animaions deined
in CSS consistent. However, we chose to use the JavaScript
timeout
element in this task
because this is a new animaion that appears in the irst round of the game. This means that
the previously used batle ending styles may just be added to the element, and having the
same element seing for the
out
and
in
class will immediately cause unusual troubles, for
example, the out styles are ignored. Having a delay before adding the
in
class makes both the
out and in styles and the animaion being executed.
