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

Restarting the game for the next round of battle

We now come to the last task—resetting the cards for the next round of battle. At this stage, the battle animation runs once and then the game stalls there. In this task, we reset all the card states so that the player can select another card and trigger another round of battle until either side is dead.

Engage thrusters

Let's continue the battle with the following steps:

  1. Inside the gameScene.restartGame method, we add the following code to toggle the out and flipped state for all the cards:
    /* reset the transition state */ allCardElms.forEach(function(elm){ elm.classList.remove('in'); elm.classList.add('out'); }); allPlayerCardElms.forEach(function(elm){ elm.classList.remove('selected'); elm.classList.add('flipped'); ...

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