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

Building the battle animation

This is a major task that defines the entire battle animation. After both the player's card and opponent's card are on stage, the player's card emits a flame blaze towards the opponent and then the opponent emits another blaze towards the player. The following screenshot shows the blaze being emitted from the player's card on right-hand side towards the opponent's card:

Building the battle animation

Prepare for lift off

First, we need two more game objects—the blaze towards the left and the blaze towards the right. Add them to the HTML before the end of the game-scene element, as shown in the following code:

<div class="blaze toward-left"></div> <div ...

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