I recently started learning VueJS and decided to create a practice game to strengthen my understanding of the framework.
http://jsfiddle.net/mzref4o0/1/
Within this game, the attack method is crucial in determining the winner:
attack: function(isSpecialAttack) {
let youHurt = Math.floor(Math.random() * 10);
let monsterHurt = Math.floor(Math.random() * 10);
if (isSpecialAttack) {
youHurt = Math.floor(Math.random() * (20 - 10 + 1)) + 10;
monsterHurt = Math.floor(Math.random() * (20 - 10 + 1)) + 10;
}
this.you.bloodLevel -= youHurt;
this.monster.bloodLevel -= monsterHurt;
this.messages.push([
{id: this.getRandomId, turn: 'you', msg: 'PLAYER HTIS MONSTER FOR ' + monsterHurt},
{id: this.getRandomId, turn: 'monster', msg: 'MONSTER HTIS PLAYER FOR ' + youHurt}
])
if (this.you.bloodLevel <= 0 || this.monster.bloodLevel <= 0) {
if (this.you.bloodLevel <= 0) {
alert('you lost');
} else {
alert('you won');
}
}
},
The challenge I'm facing is that the alert message appears before the "attack" process completes, resulting in the blood bars dropping and the message being added after the alert is displayed. How can I ensure that the alert only appears once these actions are finished?
I suspect that this issue may be related to the event loop, but I'm not entirely sure.