Update index.html

index.html

@@ -6,7 +6,7 @@
         body {
             font-family: Arial, sans-serif;
         }
-        #output {
+        #output, #characterSheet {
             white-space: pre-wrap;
             background-color: #f0f0f0;
             padding: 10px;
@@ -23,15 +23,17 @@
     <button id="castSpell">Cast Spell</button>
     <button id="useItem">Use Item</button>
     <div id="output"></div>
+    <div id="characterSheet"></div>
 
     <script>
         let character = {};
         let inventory = ["health potion", "magic potion", "mysterious key"];
         let monsters = [
-            { name: "Goblin", health: 30, strength: 5 },
-            { name: "Orc", health: 50, strength: 10 },
-            { name: "Dragon", health: 100, strength: 20 }
+            { name: "Goblin", health: 30, strength: 5, armor: 2, magicResistance: 1, treasure: 10 },
+            { name: "Orc", health: 50, strength: 10, armor: 5, magicResistance: 2, treasure: 20 },
+            { name: "Dragon", health: 100, strength: 20, armor: 10, magicResistance: 5, treasure: 50 }
         ];
+        let currentMonster = null;
 
         document.getElementById("createCharacter").addEventListener("click", createCharacter);
         document.getElementById("startAdventure").addEventListener("click", startAdventure);
@@ -48,15 +50,18 @@
                 magic: 50,
                 strength: 10,
                 intelligence: 5,
+                armor: 5,
+                magicResistance: 3,
+                gold: 0,
                 inventory: [...inventory]
             };
+            updateCharacterSheet();
             display(`Character Created: ${character.name}, the ${character.class}`);
         }
 
         function startAdventure() {
-            const encounters = ["a wild beast", "a mysterious traveler", "a hidden treasure", ...monsters.map(m => `a ${m.name}`)];
-            const encounter = encounters[Math.floor(Math.random() * encounters.length)];
-            display(`You encounter ${encounter} on your adventure.`);
+            currentMonster = monsters[Math.floor(Math.random() * monsters.length)];
+            display(`You encounter a ${currentMonster.name} on your adventure.`);
         }
 
         function attack() {
@@ -64,36 +69,113 @@
                 display("You need to create a character first!");
                 return;
             }
+            if (!currentMonster) {
+                display("There is no monster to attack!");
+                return;
+            }
 
-            const damage = Math.floor(Math.random() * character.strength);
-            display(`You attack dealing ${damage} damage.`);
-        }
+            let damage = Math.floor(Math.random() * character.strength) - currentMonster.armor;
+            damage = damage < 0 ? 0 : damage;
+            currentMonster.health -= damage;
+            display(`You attack the ${currentMonster.name} dealing ${damage} damage.`);
 
-        function castSpell() {
-            if (!character.name) {
-                display("You need to create a character first!");
-                return;
+            if (currentMonster.health <= 0) {
+                character.gold += currentMonster.treasure;
+                display(`You defeated the ${currentMonster.name} and found ${currentMonster.treasure} gold!`);
+                currentMonster = null;
+            } else {
+                monsterAttack();
             }
 
-            const spells = ["Fireball", "Healing Light", "Shadow Strike", "Ice Bolt", "Thunder Wave"];
-            const spell = spells[Math.floor(Math.random() * spells.length)];
-            display(`You cast ${spell}! It uses 10 magic points.`);
-            character.magic -= 10;
+            updateCharacterSheet();
         }
 
-        function useItem() {
-            if (!character.name) {
-                display("You need to create a character first!");
-                return;
-            }
+function castSpell() {
+    if (!character.name) {
+        display("You need to create a character first!");
+        return;
+    }
+    if (!currentMonster) {
+        display("There is no monster to cast a spell on!");
+        return;
+    }
+    if (character.magic < 10) {
+        display("Not enough magic points to cast a spell.");
+        return;
+    }
 
-            if (character.inventory.length === 0) {
-                display("Your inventory is empty!");
-                return;
-            }
+    const spells = [
+        { name: "Fireball", damage: 20, cost: 10 },
+        { name: "Healing Light", healing: 15, cost: 10 },
+        { name: "Shadow Strike", damage: 15, cost: 10 }
+    ];
+    const spell = spells[Math.floor(Math.random() * spells.length)];
+
+    character.magic -= spell.cost;
+    if (spell.damage) {
+        let damage = spell.damage - currentMonster.magicResistance;
+        damage = damage < 0 ? 0 : damage;
+        currentMonster.health -= damage;
+        display(`You cast ${spell.name} dealing ${damage} damage to the ${currentMonster.name}.`);
+    } else if (spell.healing) {
+        character.health += spell.healing;
+        display(`You cast ${spell.name} and heal yourself for ${spell.healing} health.`);
+    }
+
+    if (currentMonster.health <= 0) {
+        character.gold += currentMonster.treasure;
+        display(`You defeated the ${currentMonster.name} and found ${currentMonster.treasure} gold!`);
+        currentMonster = null;
+    } else {
+        monsterAttack();
+    }
+
+    updateCharacterSheet();
+}
+
+function useItem() {
+    if (!character.name) {
+        display("You need to create a character first!");
+        return;
+    }
 
-            const item = character.inventory.pop();
+    if (character.inventory.length === 0) {
+        display("Your inventory is empty!");
+        return;
+    }
+
+    const item = character.inventory.pop();
+    switch (item) {
+        case "health potion":
+            character.health += 20;
+            display(`You use a ${item} and restore 20 health.`);
+            break;
+        case "magic potion":
+            character.magic += 20;
+            display(`You use a ${item} and restore 20 magic points.`);
+            break;
+        case "mysterious key":
+            // Implement effect of mysterious key
+            display(`You use a ${item}, but nothing happens.`);
+            break;
+        default:
             display(`You use a ${item}.`);
+            break;
+    }
+
+    updateCharacterSheet();
+}
+
+        function monsterAttack() {
+            let damage = Math.floor(Math.random() * currentMonster.strength) - character.armor;
+            damage = damage < 0 ? 0 : damage;
+            character.health -= damage;
+            display(`The ${currentMonster.name} attacks you dealing ${damage} damage.`);
+        }
+
+        function updateCharacterSheet() {
+            let sheet = `Name: ${character.name}\nClass: ${character.class}\nLevel: ${character.level}\nHealth: ${character.health}\nMagic: ${character.magic}\nStrength: ${character.strength}\nIntelligence: ${character.intelligence}\nArmor: ${character.armor}\nMagic Resistance: ${character.magicResistance}\nGold: ${character.gold}`;
+            document.getElementById("characterSheet").textContent = sheet;
         }
 
         function display(message) {