Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Dungeons & Dragons</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| } | |
| #output { | |
| 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> | |
| <div id="output"></div> | |
| <script> | |
| let character = {}; | |
| document.getElementById("createCharacter").addEventListener("click", createCharacter); | |
| document.getElementById("startAdventure").addEventListener("click", startAdventure); | |
| document.getElementById("attack").addEventListener("click", attack); | |
| document.getElementById("castSpell").addEventListener("click", castSpell); | |
| function createCharacter() { | |
| character = { | |
| name: "Hero", | |
| class: "Warrior", | |
| level: 1, | |
| health: 100, | |
| magic: 50, | |
| strength: 10, | |
| intelligence: 5 | |
| }; | |
| display(`Character Created: ${character.name}, the ${character.class}`); | |
| } | |
| function startAdventure() { | |
| const encounters = ["a wild beast", "a mysterious traveler", "a hidden treasure"]; | |
| const encounter = encounters[Math.floor(Math.random() * encounters.length)]; | |
| display(`You encounter ${encounter} on your adventure.`); | |
| } | |
| function attack() { | |
| if (!character.name) { | |
| display("You need to create a character first!"); | |
| return; | |
| } | |
| const damage = Math.floor(Math.random() * character.strength); | |
| display(`You attack dealing ${damage} damage.`); | |
| } | |
| function castSpell() { | |
| if (!character.name) { | |
| display("You need to create a character first!"); | |
| return; | |
| } | |
| const spells = ["Fireball", "Healing Light", "Shadow Strike"]; | |
| const spell = spells[Math.floor(Math.random() * spells.length)]; | |
| display(`You cast ${spell}! It uses 10 magic points.`); | |
| character.magic -= 10; | |
| } | |
| function display(message) { | |
| document.getElementById("output").textContent += message + "\n"; | |
| } | |
| </script> | |
| </body> | |
| </html> | |