An RPG in Vue.js (Vol. 2 —Character Select)
Ok, so in my last blog about this game, we talked about building the character objects for the playable characters and enemies. This time though, let’s start digging into how you actually choose these characters to battle.
Now, down the road, when this is all set up properly, we’ll ideally have a playable character walking around that actually encounters enemies on some sort of grid. But for the sake of going through how this battle page works, let’s just set things up so that the user will choose a playable character, and randomly select an enemy to battle against.
This is far from the most fun part of making this game, but it’s necessary to have in place so that we can start working on more interesting parts of this game. So let’s get to it!
In the picture above, you can see we put in a couple of buttons to to scroll through our list of characters one at a time. We then disable the forward button when it gets to the end of the list of characters, and we disable the the back button when we are at the first character in the list.
You can also see that when you click these up and down buttons it triggers a couple functions of indexUp and indexDown.
In the first image you can see that each of these functions just updates a data element called ‘index’. In the second image above we see that ‘index’ is initially set to 0. But what is our end game with this index business?
In the image above, you can see that we implement a watch on our data item ‘index’. Here we say that whenever the value of index changes, the value of our data item ‘char’ (which you can see a couple images above) will change to be the character in our chars array (that we created in the previous blog) at the index of ‘index’. Now that’s a pretty big mouthful, but essentially when you click the up or down button it’s moves through our list of characters one at a time.
After this ‘char’ data object is set, we can then use it to set the image/name/class etc. of our selected character.
Now that our character select is done, let’s move on to choosing the enemy. Unlike with the playable character, we want this to be randomly generated so that the user can’t just keep choosing an easy enemy, or an enemy that they have a class advantage over. Afterall, Pokemon wouldn’t be very fun if you only fought Pidgeys.
To set this up we’ll follow a very similar format to how we chose the playable character, in that we’ll use a data item for an index — this time ‘enemyIndex’. And we’ll once again have a watch method that watches this enemy index and sets the enemy data object based on this value. But what should we do to address the randomness? Let’s call a new function called getRandomMonster on a button called ‘Randomizer’.
Above you can see the getRandomMonster function sets our enemyIndex to some value between 1 and the last enemy in our enemies array. We utilize a +1 to make sure that the first value isn't used since the character in the first position is just a placeholder character with a question mark for a picture. Then, of course we use Math.floor to make sure we are only getting integers, as there’s no enemy at index 2.5.
After implementing this function and putting in a new enemyIndex watch that is basically the same as our previous watch method, we should be getting random enemies, which we can then add to our enemy card in exactly the same way that we did for our playable characters.
So now that we have randomly generating enemies and a player select, we just need to add a start button!
It’s important that we set our start button to disabled as a default because we don’t want our user starting a game before they’ve select both a character to play with and an enemy to battle. Because we need both of these qualifiers to be met before the user is allowed to play, let’s use the || as shown above.
Then on click we will set a data item called ‘start’ to true. We are just doing this in order to conditionally render whether the user sees the select menu or the actual battle menu. In Vue this is particularly easy to manage, because we can just use a v-if tag as seen below.
Ok, so that was kind of breezed through, but hopefully pretty straightforward if you have any background with Vue. Next time I post one of these we can actually get these characters that we’ve selected battling each other!
