O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 2. Card Battle!

In this project, we are going to create a playing card game with the heavy use of CSS transition and animation. The player selects a card out of the three choices given to him/her and tries to beat the opponent's card until either side runs out of health points.

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required