From 08ed4002fa471b60ac572a2ecae48d17310d0512 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Fri, 27 Dec 2024 00:49:53 +0100
Subject: [PATCH] implement restart game, surrender
---
04 - monster slayer game/prj-monster-01-starting-setup/index.html | 9 +++++----
04 - monster slayer game/prj-monster-01-starting-setup/app.js | 21 ++++++++++++++++++---
2 files changed, 23 insertions(+), 7 deletions(-)
diff --git a/04 - monster slayer game/prj-monster-01-starting-setup/app.js b/04 - monster slayer game/prj-monster-01-starting-setup/app.js
index 4422cc1..99db112 100644
--- a/04 - monster slayer game/prj-monster-01-starting-setup/app.js
+++ b/04 - monster slayer game/prj-monster-01-starting-setup/app.js
@@ -13,9 +13,15 @@
},
computed: {
monsterBarStyle() {
+ if (this.monsterHealth < 0) {
+ return { width: "0%" };
+ }
return { width: this.monsterHealth + "%" };
},
playerBarStyle() {
+ if (this.playerHealth < 0) {
+ return { width: "0%" };
+ }
return { width: this.playerHealth + "%" };
},
mayUseSpecialAttack() {
@@ -23,15 +29,15 @@
},
},
watch: {
- playerHealt(value) {
+ playerHealth(value) {
if (value <= 0 && this.monsterHealth <= 0) {
this.winner = "draw";
} else if (value <= 0) {
- this.winner = "moster";
+ this.winner = "monster";
}
},
monsterHealth(value) {
- if (value <= 0 && this.playerHealt <= 0) {
+ if (value <= 0 && this.playerHealth <= 0) {
this.winner = "draw";
} else if (value <= 0) {
this.winner = "player";
@@ -39,6 +45,12 @@
},
},
methods: {
+ startGame() {
+ this.playerHealth = 100;
+ this.monsterHealth = 100;
+ this.currentRound = 0;
+ this.winner = null;
+ },
attackMonster() {
this.currentRound++;
const attackValue = getRandomValue(5, 12);
@@ -65,6 +77,9 @@
}
this.attackPlayer();
},
+ surrender(){
+ this.winner = 'monster';
+ }
},
});
diff --git a/04 - monster slayer game/prj-monster-01-starting-setup/index.html b/04 - monster slayer game/prj-monster-01-starting-setup/index.html
index e521d09..ef89d35 100644
--- a/04 - monster slayer game/prj-monster-01-starting-setup/index.html
+++ b/04 - monster slayer game/prj-monster-01-starting-setup/index.html
@@ -31,17 +31,18 @@
</section>
<section class="container" v-if="winner">
<h2>Game Over!</h2>
- <h3 v-if="winner == 'monster'">You lost!</h3>
- <h3 v-else-if="winner == 'player'">You won!</h3>
+ <h3 v-if="winner === 'monster'">You lost!</h3>
+ <h3 v-else-if="winner === 'player'">You won!</h3>
<h3 v-else>It's a Draw</h3>
+ <button @click="startGame">Start new game</button>
</section>
- <section id="controls">
+ <section id="controls" v-else>
<button @click="attackMonster">ATTACK</button>
<button @click="specialAttackMonster" :disabled="mayUseSpecialAttack">
SPECIAL ATTACK
</button>
<button @click="healPlayer">HEAL</button>
- <button>SURRENDER</button>
+ <button @click="surrender">SURRENDER</button>
</section>
<section id="log" class="container">
<h2>Battle Log</h2>
--
Gitblit v1.8.0