+
XP: 0
Health: 100
diff --git a/script.js b/script.js
index 5a7b897..a84f275 100644
--- a/script.js
+++ b/script.js
@@ -62,43 +62,51 @@ const locations = [
"button text": ["Go to store", "Go to cave", "Fight dragon"],
"button functions": [goStore, goCave, fightDragon],
text: "You are in the town square. You see a sign that says \"Store\".",
+ imagePath: "/images/square.webp",
},
{
name: "store",
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
"button functions": [buyHealth, buyWeapon, goTown],
text: "You enter the store.",
+ imagePath: "/images/store.webp",
},
{
name: "cave",
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
"button functions": [fightSlime, fightBeast, goTown],
text: "You enter the cave. You see some monsters.",
+ imagePath: "/images/cave.webp",
}, {
name: "fight",
"button text": ["Attack", "Dodge", "Run"],
"button functions": [attack, dodge, goTown],
text: "You are fighting a monster.",
+ imagePath: "/images/fight.webp",
}, {
name: "kill monster",
"button text": ["Go to town square", "Go to town square", "Go to town square"],
"button functions": [goTown, goTown, easterEgg],
text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.',
+ imagePath: "/images/monster.webp",
}, {
name: "lose",
"button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
"button functions": [restart, restart, restart],
text: "You die. ☠",
+ imagePath: "/images/lose.webp",
}, {
name: "win",
"button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
"button functions": [restart, restart, restart],
text: "You defeat the dragon! YOU WIN THE GAME! 🎉",
+ imagePath: "/images/win.webp",
}, {
name: "easter egg",
"button text": ["2", "8", "Go to town square?"],
"button functions": [pickTwo, pickEight, goTown],
text: "You find a secret game. Pick a number above. Two numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!",
+ imagePath: "/images/witch.webp",
}
];
@@ -128,8 +136,17 @@ function update(location) {
button2.onclick = location["button functions"][1];
button3.onclick = location["button functions"][2];
text.innerHTML = location.text;
+
+ const imageElement = document.querySelector('.image');
+ if (imageElement) {
+ imageElement.src = location.imagePath;
+ } else {
+ console.error("Image not found");
+ }
}
+
+
function goTown() {
update(locations[0]);
}
@@ -243,7 +260,7 @@ function attack() {
} else {
text.innerText += " You miss.";
};
-
+
healthText.innerText = actualHealth;
monsterHealthText.innerText = monsterHealth;
if (actualHealth <= 0) {
@@ -262,8 +279,8 @@ function attack() {
actualWeapon--;
}
- localStorage.setItem ("Current Weapon", actualWeapon);
- localStorage.setItem ("Health", actualHealth.toString());
+ localStorage.setItem("Current Weapon", actualWeapon);
+ localStorage.setItem("Health", actualHealth.toString());
localStorage.setItem("Inventory", JSON.stringify(actualInventory));
}
@@ -284,7 +301,7 @@ function dodge() {
function defeatMonster() {
let actualGold = parseInt(localStorage.getItem("Gold"));
actualGold += Math.floor(monsters[fighting].level * 6.7);
- let actualXp = parseInt(localStorage.getItem ("XP"));
+ let actualXp = parseInt(localStorage.getItem("XP"));
actualXp += monsters[fighting].level;
goldText.innerText = actualGold;
xpText.innerText = actualXp;
diff --git a/styles.css b/styles.css
index 5b92729..fec4e43 100644
--- a/styles.css
+++ b/styles.css
@@ -13,7 +13,7 @@ body {
max-height: 400px;
background-color: #ffffff ;
color:#ffffff;
- margin-top: 30px;
+ /*margin-top: 30px;*/
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
@@ -44,4 +44,18 @@ button {
background-color: #feac32 ;
background-image: linear-gradient(#fecc4c, #ffac33);
border: 3px solid #feac32;
+}
+
+.image {
+ width: 520px;
+ height: 400px;
+ margin-top: 30px;
+ margin-bottom: 0px;
+}
+
+.imageTwo {
+ max-width: 520px;
+ max-height: 434px;
+ margin-left: auto;
+ margin-right: auto;
}
\ No newline at end of file
+