Card Battle! - HTML5 Game Development - page 72

At last, we get two methods to reduce health points from both the sides. After doing the
deducion of the health points, it updates the interface.
The health points are on the scale of 0 to 100. When displaying it in HTML, we control the
width of the element in the same proporion. The formula of the width is hp_width = hp /
100 * full_width .
The health points reduction formula
During the batle, the irst blaze goes from the player's card towards the opponent and then the
opponent's card performs the shake animaion. At this ime, we tell the health point module to
calculate the point reducion from the given atacker's power and defender's power.
The same applies to the player when the player's card is being atacked by the blaze.
Ending the game
There are two opions ater one batle round. If anyone is dead, the game is over; otherwise,
the cards should be reset for the next round of batle. We haven't coded the reseing logic
yet; that's why the gameScene.restartGame() funcion is commented out.
Classified intel
The point calculaion is very simple in this game. It just checks which side has the higher
power and reduces the diference to the weaker side. A more complicated calculaion can
be introduced to create more fun. For example, there can be some point reducion on both
sides when both sides have the same or similar power.
Restarting the game for the next
round of battle
We now come to the last task—reseing the cards for the next round of batle. At this stage,
the batle animaion 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 batle
unil either side is dead.