HTML and CSS Reference
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.
Normally, we prefer using the CSS delay property to make all the styles and animaions deined
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.