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 similar approach to create most of the animation sequences for game objects.

Your Hotshot objectives

We are going to divide our mission into eight objectives, shown as follows:

• Creating the game scenes
• Creating a 3D card-flipping effect
• Selecting a card
• Adding a power value to the cards
• Creating the opponent's card
• Building the battle animation
• Adding health points to the game
• Restarting the game for the next round of the battle

Mission checklist

We have a very similar project in Project 1, Building a CSS Quest Game, with similar HTML layout and scenes management logic.