Card Battle! - HTML5 Game Development - page 49

Scenes' methods
Some of the commonly defined methods are the setup and onShow methods. The setup
method is used for a speciic scene to iniialize and the onShow method is called every ime
the scene is shown by its show method. It is provided as a hook for each scene to have logic
every ime the scene is displayed. For example, in the later stage, our game-over scene will
change between the win and loss screen during the onShow method.
Creating a 3D card-flipping effect
In this task, we will take a look at how to create a 3D card-flipping effect. This effect will be
used in our playing card element.
Prepare for lift off
We will need to prepare card graphics for this task. They are front-face.png and back-
face-pattern.png .
Engage thrusters
We will start by deining the game elements in HTML, as we have done in the previous secion:
1. Inside #game-scene , we create two card elements with front and back faces:
<div id="game-scene" class="scene out">
<div class="card a">
<div class="front face"></div>
<div class="back face"></div>
</div>
<div class="card b flipped">
<div class="front face"></div>
<div class="back face"></div>
</div>
</div>
2. The core part in this secion is the CSS styling. In the game.css file, we append the
following styling to the card container for its front and back faces, flipped state, and
the in-between transiion:
/* Card */
.card {
width: 140px;
height: 180px;
perspective: 700;
transition: all .3s ease-out;