Mission briefing

This is a fighting game between a player and the computer, using battle cards.

Technically, the game contains four cards; three for the player to choose and one for the opponent. On each card, there is a random number representing the power. The battle begins by comparing the cards of both the player and the opponent. The difference between the power values acts as damage to the weaker side. The game is over when either side dies with no more health points left. You may visit http://makzan.net/html5-games/card-battle/ to play the example game in order to have better understanding on what we will build throughout this project.

The following is a screenshot showing the battle in the middle of the fight:

Why is it awesome?

This game showcases how we can put CSS3 transition and animation together to create different effects, including sliding and 3D flipping. The animation-sequence script shows us how we can stack the animation one-by-one. After creating this game, we can use a...