Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Dungeons & Dragons</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| } | |
| #output, #characterSheet { | |
| white-space: pre-wrap; | |
| background-color: #f0f0f0; | |
| padding: 10px; | |
| margin-top: 10px; | |
| border-radius: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Dungeons & Dragons: Adventure Awaits</h1> | |
| <button id="createCharacter">Create Character</button> | |
| <button id="startAdventure">Start Adventure</button> | |
| <button id="attack">Attack</button> | |
| <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, 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); | |
| document.getElementById("attack").addEventListener("click", attack); | |
| document.getElementById("castSpell").addEventListener("click", castSpell); | |
| document.getElementById("useItem").addEventListener("click", useItem); | |
| function createCharacter() { | |
| character = { | |
| name: "Hero", | |
| class: "Warrior", | |
| level: 1, | |
| health: 100, | |
| 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() { | |
| currentMonster = monsters[Math.floor(Math.random() * monsters.length)]; | |
| display(`You encounter a ${currentMonster.name} on your adventure.`); | |
| } | |
| function attack() { | |
| if (!character.name) { | |
| display("You need to create a character first!"); | |
| return; | |
| } | |
| if (!currentMonster) { | |
| display("There is no monster to attack!"); | |
| return; | |
| } | |
| 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.`); | |
| 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 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; | |
| } | |
| 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; | |
| } | |
| 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) { | |
| document.getElementById("output").textContent += message + "\n"; | |
| } | |
| </script> | |
| </body> | |
| </html> | |