Vue.js explained through pokemon #4 Damage calculations
This is the fourth article in my tutorial series that tries to explain Vue.js concepts by recreating the battle scene from Pokemon.
Original tutorial
#1 Single file components
#2 Attacks: $refs, Promises & event bus
#3 Vuex: state management
#4 Damage calculations
#5 Transitions & animation
Welcome to the fourth installment, this time around we won’t be learning about specific Vue concepts, rather about specific pokemon attack damage calculations.
I’m sure you’ve noticed from the previous article that there’s pokemon that have attacks that do more damage than some pokemon do. You might also be missing the fact that the original game didn’t always hand out the same damage.
At first the damage formulas might seem daunting, but let’s break the down piece by pieces
The damage formula
In order to calculate an attack’s damage we’ll have to take quite a few things into consideration:
- Level: attacking pokemon’s level
- Power: the attack’s power
- A: the attacking pokemon’s attack stat (if it’s a physical type) or special stat (if it’s a special attack, one that adds a status effect).
- D: the defending pokemon’s defense stat.
We’ll discuss the modifier in the next step.
Modifier formula
- STAB: short for same-type-attack-bonus, meaning that if the attack type is one of the pokemon’s, a bonus is added.
- Type: Will compare the attack type to the defending pokemon’s type through a chart. This chart maps out how effective the attack between types will be. (0 for no effect, 0.5 for weak, 2 for super effective).
- Critical: Will add double damage, the probability of it happening is based on the pokemon’s level & speed.
- other: this is a modifier that comes from items or that can occur in specific attack situation. Most of the time this is just 1.
- Lastly a random percentage is applied between 85% & 100%
Implementation
Let’s translate the battle formulas into a Damage class we can use in our components.
Type chart
We’ll also need a list of each type’s weaknesses and strength to calculate type effectiveness.
Let’s create a data folder, we’ll create a file there called typeChart.js and place the following in there:
Each type consist of an object with 3 properties:
- immunes: attacks against these types will do zero damage.
- weaknesses: attacks against these types will do half the damage.
- strengths: attacks against these types will do double damage.
Damage class
Let’s go back to our src folder and create a file called Damage.js.
We’ll be creating our class here.
The reason why we’re defining the damage calculations in a class is just because we can split our code into multiple functions, each having their own responsibility. This makes it easier to read and maintain the code.
Let’s dive in, through a constructor we’ll need to assign the class some basic properties like the attacking pokemon, the defending pokemon and the attack definition that’s being used. We’ll also import the type char for easy reference.
Next let’s create a new method in the class called calculateStatsPower, here we’ll translate the damage formula, without the modifier included:
Next we’ll start defining our modifiers, each will get its own method.
Let’s start with calculating STAB:
Remember the pokedex.json file? Each pokemon has a type property that’s an array. Here we’re just checking if the attack type if present.
Next let’s calculate the type effect. We’ll have to check attack’s type for strengths and weaknesses. We’ll do this for every type the opponent’s pokemon has:
Let’s get on to calculating the critical hit, this one’s a doosie.
Calculating the actual modifier isn’t that hard. If it happens the modifier’s strength is based on the attacking pokemon’s level (higher leveled pokemon should get a bigger bonus).
We’ll also have to create a random number (0–255), in order for the critical hit to land that random number should be lower than a threshold.
This threshold will be based on the attacking pokemon’s speed. If the attack type is normal we’ll divide the speed by 512, if it’s any other attack type we’ll divide the attacking pokemon’s speed by 256.
This way normal attacks have half the chance to deliver critical hits.
The other modifier we can’t really implement yet since we don’t have items or attacks that give boosts. We’ll define the method anyway and just return 1.
Let’s call all those calculation methods in a method called ‘power’, this is the only method we’ll be calling from the outside.
Finalising
Last, but not least, we’ll import our damage class in Pokemon.vue and replace the contents of our old calculateDamage method.
Right after the import statement we already have for our Vuex helper we’ll put this:
and we’ll replace the calculateDamage method with this:
That’s it, we’re done implementing pokemon’s attacks for now.
You could still implement ‘categorised attacks’, the original game offers: normal, special and status as attack categories. Implement the battle logic for them in the calculateOther and calculateStatsPower method of the Damage class. Item effects could be taken into account, program in multi-stage attacks, you’re free to do whatever you’d like.
In the next article we’ll be looking at animation and transitions, we’ll also start displaying attack effects like ‘critical hit’, ‘very effective’, ‘not very effective’ and ‘had no effect’. We’ll also display the damage done.
You can find the code on github, code specific to this article has been posted under the chapter-4 branch.
If you have any questions or suggestions, just open up a ticket on the repo and I’ll be sure to get to it.
