Card Battle! - HTML5 Game Development - page 58

Classified intel
There are several ways to place the game elements inside a parent HTML element. In this
example, we used the absolute posiion. It works because our game dimension is ixed by
the #game element.
The other approach is to use the translate funcion instead of the transform funcion.
By using translate3d to deine posiion and posiional changes, we get a performance
boost from the GPU-accelerated rendering.
In this example, we actually mixed both the approaches.
The third approach is to add the CSS flexbox module. The flexbox module allows us to
describe how the elements flow within the container. Take the three cards as an example.
We can deine the three cards to be distributed evenly in the botom area, according to the
width of the container. This approach works beter than hardcoding the absolute posiion
when our game requires flexible dimensions, for example, to be installed into different
mobile devices with a full-screen playing experience.
The Learn CSS Layout website provides an introducion on how we can use diferent methods
to layout DOM elements with CSS at http://learnlayout.com/ .
Adding a power value to the cards
In this task, we will add a power value to the cards. We will also create a Card object to get
the original value back.
Prepare for lift off
Before going into the core part, we will get the interface prepared.
There is not much to add in HTML. Add the power element inside the front face element,
as shown in the following code:
<div class="front face">
<div class="power">100</div>
</div>
Also, add some very basic CSS styling to define the power text, which is large and aligned in
the center, as shown in the following code:
.card .power{
position: absolute;
width: 100%;