Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>🎲 D20 Dungeon Crawler 🏰</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| margin: 0; | |
| background-color: #2c3e50; | |
| color: #ecf0f1; | |
| } | |
| #game-container { | |
| background-color: #34495e; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.3); | |
| max-width: 800px; | |
| width: 100%; | |
| } | |
| button { | |
| margin: 5px; | |
| padding: 10px 15px; | |
| background-color: #3498db; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #2980b9; | |
| } | |
| select { | |
| margin: 5px; | |
| padding: 5px 10px; | |
| } | |
| #dungeon-image { | |
| width: 100%; | |
| height: 200px; | |
| background-color: #2c3e50; | |
| margin-bottom: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 24px; | |
| text-align: center; | |
| } | |
| #choices { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| } | |
| #combat-log { | |
| max-height: 200px; | |
| overflow-y: auto; | |
| background-color: #2c3e50; | |
| padding: 10px; | |
| border-radius: 5px; | |
| margin-top: 20px; | |
| } | |
| #monster-trophies { | |
| display: flex; | |
| flex-wrap: wrap; | |
| margin-top: 10px; | |
| } | |
| .monster-trophy { | |
| font-size: 24px; | |
| margin-right: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="game-container"> | |
| <h1>🎲 D20 Dungeon Crawler 🏰</h1> | |
| <div id="character-creation"> | |
| <h2>👤 Character Creation</h2> | |
| <select id="race"> | |
| <option value="human">👨 Human</option> | |
| <option value="elf">🧝♂️ Elf</option> | |
| <option value="dwarf">🧔 Dwarf</option> | |
| <option value="halfling">🧒 Halfling</option> | |
| </select> | |
| <select id="class"> | |
| <option value="warrior">⚔️ Warrior</option> | |
| <option value="mage">🧙♂️ Mage</option> | |
| <option value="rogue">🗡️ Rogue</option> | |
| <option value="cleric">✨ Cleric</option> | |
| </select> | |
| <button onclick="createCharacter()">🎭 Create Character</button> | |
| </div> | |
| <div id="game-area" style="display: none;"> | |
| <div id="dungeon-image"></div> | |
| <div id="encounter-description"></div> | |
| <div id="choices"></div> | |
| <div id="player-stats"></div> | |
| <div id="combat-log"></div> | |
| <div id="monster-trophies"></div> | |
| </div> | |
| </div> | |
| <svg id="d20" width="100" height="100" viewBox="0 0 100 100" style="display: none;"> | |
| <polygon points="50,5 95,75 5,75" fill="#f3f3f3" stroke="#000" stroke-width="2"/> | |
| <text x="50" y="55" font-size="24" text-anchor="middle" id="roll-result"></text> | |
| </svg> | |
| <script> | |
| let player, currentEncounter, score = 0, monsterTrophies = []; | |
| const settingsData = ` | |
| 🏛️🏮,Ancient Temple,A crumbling temple with flickering torches and moss-covered statues | |
| 🌳🍄,Enchanted Forest,A mystical forest filled with glowing mushrooms and whispering trees | |
| 🏔️❄️,Frozen Peaks,Treacherous icy mountains with howling winds and hidden crevasses | |
| 🏜️🐫,Desert Ruins,Sun-baked ruins half-buried in shifting sands | |
| 🌋🔥,Volcanic Cavern,A scorching cave system with rivers of lava and sulfurous air | |
| 🌊🐚,Sunken City,The remains of an ancient city submerged beneath crystal-clear waters | |
| 🕯️📚,Arcane Library,Towering bookshelves filled with magical tomes and floating candles | |
| ⚰️💀,Haunted Crypt,A chilling burial chamber echoing with unseen whispers | |
| 🌿🦋,Fairy Glade,A serene clearing shimmering with magical butterflies and flower petals | |
| 🕰️⚙️,Clockwork Maze,An intricate labyrinth of gears, pistons, and ticking mechanisms | |
| 🌙🐺,Shadowy Woods,Dark and foreboding forest where eyes seem to watch from every shadow | |
| 🔮🎭,Illusory Palace,A grand castle where nothing is as it seems, constantly shifting | |
| 🕳️🦇,Abyssal Chasm,A deep, dark pit with strange echoes and unseen terrors | |
| 🌈🦄,Crystal Cavern,A dazzling cave system filled with luminous, multi-colored crystals | |
| 🎪🎭,Carnival of Souls,An eerie, abandoned fairground with a sinister undercurrent | |
| 🗿🌴,Primal Jungle,A dense, primordial jungle teeming with ancient creatures and ruins | |
| 🌀🌌,Astral Plane,A surreal realm of floating islands and swirling cosmic energies | |
| 🏴☠️🦜,Ghost Ship,A decrepit vessel sailing through mists, crewed by spectral pirates | |
| 🕋🎶,Harmonic Sanctuary,A tranquil temple where magical music fills the air | |
| 🏭👾,Alien Hive,A bizarre, organic structure pulsing with otherworldly life | |
| `; | |
| const monstersData = ` | |
| 👹🗡️,Goblin,A small, green-skinned creature with a wicked grin and rusty dagger | |
| 💀🏹,Skeleton Archer,A reanimated skeleton wielding a creaky bow with surprising accuracy | |
| 🐺🌙,Dire Wolf,A massive wolf with glowing eyes and razor-sharp fangs | |
| 🕷️🕸️,Giant Spider,A hairy arachnid the size of a horse, with venom dripping from its fangs | |
| 🧟♂️🔗,Zombie,A shambling corpse with rotting flesh, driven by an insatiable hunger | |
| 🧙♀️🔮,Evil Witch,A cackling hag with gnarled fingers and a bubbling cauldron of curses | |
| 🐉🔥,Young Dragon,A scaled wyrm with smoke curling from its nostrils, hungry for treasure | |
| 🦇🧛♂️,Vampire,A pale, aristocratic figure with razor-sharp fangs and hypnotic eyes | |
| 🌿🍃,Treant,An ancient tree come to life, with bark-covered limbs and mossy beard | |
| 🦎🔱,Lizardfolk Warrior,A scaly humanoid with sharp claws and primitive weapons | |
| 👻🔗,Poltergeist,An invisible spirit that delights in chaos and flying objects | |
| 🐙🌊,Kraken Spawn,A mass of writhing tentacles emerging from dark waters | |
| 🦅🦁,Griffin,A majestic creature with the head and wings of an eagle and body of a lion | |
| 🗿🔨,Stone Golem,A hulking figure carved from living rock, nearly impervious to harm | |
| 🦄🌈,Corrupted Unicorn,Once pure, now twisted by dark magic with a deadly horn | |
| 🧜♀️🎶,Siren,A hauntingly beautiful creature with an alluring, deadly song | |
| 🐲☁️,Cloud Giant,A towering humanoid wreathed in mists, with storm-powered magic | |
| 🦂🔥,Infernal Scorpion,A massive scorpion with a carapace of smoldering coals | |
| 🧠👁️,Mind Flayer,A tentacle-faced horror with powerful psionic abilities | |
| 🌑🐺,Shadow Wolf,A beast made of living darkness with glowing red eyes | |
| `; | |
| const settings = parseCSV(settingsData); | |
| const monsters = parseCSV(monstersData); | |
| function parseCSV(data) { | |
| return data.trim().split('\n').map(line => { | |
| const [emoji, name, description] = line.split(','); | |
| return { emoji, name, description }; | |
| }); | |
| } | |
| function createCharacter() { | |
| const race = document.getElementById('race').value; | |
| const characterClass = document.getElementById('class').value; | |
| player = { | |
| race, | |
| class: characterClass, | |
| maxHp: 50, | |
| hp: 50, | |
| attack: 10, | |
| defense: 5, | |
| magic: 8 | |
| }; | |
| document.getElementById('character-creation').style.display = 'none'; | |
| document.getElementById('game-area').style.display = 'block'; | |
| updateStats(); | |
| nextEncounter(); | |
| } | |
| function updateStats() { | |
| document.getElementById('player-stats').innerHTML = ` | |
| 👤 Player: ❤️ HP ${player.hp}/${player.maxHp}, ⚔️ ATK ${player.attack}, 🛡️ DEF ${player.defense}, 🔮 MAG ${player.magic} | |
| <br>🏆 Score: ${score} | |
| `; | |
| } | |
| function nextEncounter() { | |
| const setting = settings[Math.floor(Math.random() * settings.length)]; | |
| const monster = monsters[Math.floor(Math.random() * monsters.length)]; | |
| currentEncounter = { | |
| setting, | |
| monster, | |
| monsterHp: 30, | |
| description: `${setting.emoji} You find yourself in ${setting.name}. ${setting.description} | |
| <br><br>${monster.emoji} Suddenly, a ${monster.name} appears! ${monster.description}`, | |
| choices: generateChoices() | |
| }; | |
| document.getElementById('dungeon-image').innerHTML = setting.emoji; | |
| document.getElementById('encounter-description').innerHTML = currentEncounter.description; | |
| displayChoices(); | |
| } | |
| function generateChoices() { | |
| return [ | |
| { text: "⚔️ Attack with your weapon", successRate: 0.7, statUsed: "attack" }, | |
| { text: "🔮 Cast a spell", successRate: 0.6, statUsed: "magic" }, | |
| { text: "🕵️ Try to sneak past", successRate: 0.5, statUsed: "defense" }, | |
| { text: "🗣️ Attempt to communicate", successRate: 0.3, statUsed: "magic" } | |
| ]; | |
| } | |
| function displayChoices() { | |
| const choicesDiv = document.getElementById('choices'); | |
| choicesDiv.innerHTML = ""; | |
| currentEncounter.choices.forEach((choice, index) => { | |
| const button = document.createElement('button'); | |
| button.textContent = `${String.fromCharCode(65 + index)}. ${choice.text}`; | |
| button.onclick = () => makeChoice(index); | |
| choicesDiv.appendChild(button); | |
| }); | |
| } | |
| async function makeChoice(index) { | |
| const choice = currentEncounter.choices[index]; | |
| const roll = await rollD20(); | |
| const success = roll / 20 <= choice.successRate; | |
| const statBonus = player[choice.statUsed] / 10; | |
| const totalSuccessRate = Math.min(choice.successRate + statBonus, 1); | |
| if (success) { | |
| const damage = Math.floor(roll * totalSuccessRate); | |
| currentEncounter.monsterHp -= damage; | |
| score += damage; | |
| log(`✅ Success! ${choice.text} (🎲 Roll: ${roll}, 📊 Success Rate: ${(totalSuccessRate * 100).toFixed(1)}%, 💥 Damage: ${damage}, 🏆 Score: +${damage})`); | |
| } else { | |
| player.hp -= 5; | |
| log(`❌ Failure... ${choice.text} (🎲 Roll: ${roll}, 📊 Success Rate: ${(totalSuccessRate * 100).toFixed(1)}%, ❤️ HP: -5)`); | |
| } | |
| updateStats(); | |
| if (player.hp <= 0) { | |
| log("💀 Game over! You have been defeated."); | |
| return; | |
| } | |
| if (currentEncounter.monsterHp <= 0) { | |
| log(`🎉 Victory! You defeated the ${currentEncounter.monster.name}!`); | |
| monsterTrophies.push(currentEncounter.monster.emoji); | |
| updateMonsterTrophies(); | |
| player.hp = player.maxHp; // Heal to full after battle | |
| updateStats(); | |
| nextEncounter(); | |
| } else { | |
| log(`The ${currentEncounter.monster.name} has ${currentEncounter.monsterHp} HP remaining.`); | |
| } | |
| } | |
| function updateMonsterTrophies() { | |
| const trophiesDiv = document.getElementById('monster-trophies'); | |
| trophiesDiv.innerHTML = monsterTrophies.map(emoji => `<span class="monster-trophy">${emoji}</span>`).join(''); | |
| } | |
| function rollD20() { | |
| return new Promise(resolve => { | |
| const d20 = document.getElementById('d20'); | |
| d20.style.display = 'block'; | |
| const result = Math.floor(Math.random() * 20) + 1; | |
| document.getElementById('roll-result').textContent = result; | |
| d20.animate([ | |
| { transform: 'rotate(0deg)' }, | |
| { transform: 'rotate(360deg)' } | |
| ], { | |
| duration: 1000, | |
| iterations: 1 | |
| }).onfinish = () => { | |
| d20.style.display = 'none'; | |
| resolve(result); | |
| }; | |
| }); | |
| } | |
| function log(message) { | |
| const combatLog = document.getElementById('combat-log'); | |
| combatLog.innerHTML += `<p>${message}</p>`; | |
| combatLog.scrollTop = combatLog.scrollHeight; | |
| } | |
| </script> | |
| </body> | |
| </html> |