|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Epic RPG Adventure</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
.health-bar { |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.damage-text { |
|
|
position: absolute; |
|
|
color: red; |
|
|
font-weight: bold; |
|
|
animation: floatUp 1s forwards; |
|
|
} |
|
|
@keyframes floatUp { |
|
|
0% { transform: translateY(0); opacity: 1; } |
|
|
100% { transform: translateY(-50px); opacity: 0; } |
|
|
} |
|
|
.game-container { |
|
|
background-image: url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
.dialog-box { |
|
|
background-color: rgba(0, 0, 0, 0.8); |
|
|
border: 2px solid gold; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.character-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.character-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white font-sans"> |
|
|
<div class="game-container min-h-screen flex flex-col items-center justify-center p-4"> |
|
|
|
|
|
<div id="main-menu" class="text-center fade-in"> |
|
|
<h1 class="text-6xl font-bold mb-8 text-yellow-400">Epic RPG Adventure</h1> |
|
|
<div class="space-y-4"> |
|
|
<button onclick="startNewGame()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-xl w-64 transition-all hover:scale-105"> |
|
|
<i class="fas fa-play mr-2"></i> New Game |
|
|
</button> |
|
|
<button onclick="loadGame()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg text-xl w-64 transition-all hover:scale-105"> |
|
|
<i class="fas fa-folder-open mr-2"></i> Load Game |
|
|
</button> |
|
|
<button onclick="showCredits()" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg text-xl w-64 transition-all hover:scale-105"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Credits |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="character-creation" class="hidden text-center w-full max-w-4xl"> |
|
|
<h2 class="text-4xl font-bold mb-8 text-yellow-400">Create Your Hero</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="character-card bg-gray-800 p-6 rounded-lg cursor-pointer" onclick="selectClass('warrior')"> |
|
|
<div class="text-5xl mb-4 text-red-500"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">Warrior</h3> |
|
|
<p class="text-gray-300 mb-4">Strong and resilient, excels in melee combat</p> |
|
|
<div class="text-left"> |
|
|
<p><i class="fas fa-heart text-red-500 mr-2"></i> High Health</p> |
|
|
<p><i class="fas fa-fist-raised text-orange-500 mr-2"></i> Strong Attacks</p> |
|
|
<p><i class="fas fa-running text-blue-500 mr-2"></i> Low Speed</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="character-card bg-gray-800 p-6 rounded-lg cursor-pointer" onclick="selectClass('mage')"> |
|
|
<div class="text-5xl mb-4 text-blue-500"> |
|
|
<i class="fas fa-hat-wizard"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">Mage</h3> |
|
|
<p class="text-gray-300 mb-4">Master of arcane arts, powerful spells</p> |
|
|
<div class="text-left"> |
|
|
<p><i class="fas fa-bolt text-yellow-500 mr-2"></i> High Magic</p> |
|
|
<p><i class="fas fa-heart text-red-500 mr-2"></i> Low Health</p> |
|
|
<p><i class="fas fa-brain text-purple-500 mr-2"></i> Smart</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="character-card bg-gray-800 p-6 rounded-lg cursor-pointer" onclick="selectClass('rogue')"> |
|
|
<div class="text-5xl mb-4 text-green-500"> |
|
|
<i class="fas fa-user-ninja"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">Rogue</h3> |
|
|
<p class="text-gray-300 mb-4">Stealthy and quick, deadly with daggers</p> |
|
|
<div class="text-left"> |
|
|
<p><i class="fas fa-tachometer-alt text-green-500 mr-2"></i> High Speed</p> |
|
|
<p><i class="fas fa-heart text-red-500 mr-2"></i> Medium Health</p> |
|
|
<p><i class="fas fa-eye-slash text-gray-500 mr-2"></i> Sneaky</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-lg mb-6"> |
|
|
<h3 class="text-2xl font-bold mb-4">Character Details</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-left mb-2">Name:</label> |
|
|
<input type="text" id="character-name" class="w-full p-2 rounded bg-gray-700 border border-gray-600" placeholder="Enter your name"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-left mb-2">Gender:</label> |
|
|
<select id="character-gender" class="w-full p-2 rounded bg-gray-700 border border-gray-600"> |
|
|
<option value="male">Male</option> |
|
|
<option value="female">Female</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button onclick="finalizeCharacter()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg text-xl transition-all hover:scale-105"> |
|
|
<i class="fas fa-check mr-2"></i> Begin Adventure |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="game-screen" class="hidden w-full max-w-6xl"> |
|
|
<div class="flex flex-col md:flex-row gap-6"> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-90 rounded-lg p-4 w-full md:w-1/4"> |
|
|
<h3 class="text-xl font-bold mb-4 border-b pb-2">Hero</h3> |
|
|
<div class="text-center mb-4"> |
|
|
<div class="text-6xl mb-2" id="character-icon"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<h4 class="text-2xl font-bold" id="character-display-name">Unknown</h4> |
|
|
<p class="text-gray-300" id="character-display-class">Class: None</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Health</span> |
|
|
<span id="health-text">100/100</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-4"> |
|
|
<div id="health-bar" class="health-bar bg-red-500 h-4 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Mana</span> |
|
|
<span id="mana-text">50/50</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-4"> |
|
|
<div id="mana-bar" class="health-bar bg-blue-500 h-4 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Experience</span> |
|
|
<span id="exp-text">0/100</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-4"> |
|
|
<div id="exp-bar" class="health-bar bg-yellow-500 h-4 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-2 mb-4"> |
|
|
<div class="bg-gray-700 p-2 rounded"> |
|
|
<div class="text-sm text-gray-300">Level</div> |
|
|
<div class="font-bold" id="level-text">1</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-2 rounded"> |
|
|
<div class="text-sm text-gray-300">Gold</div> |
|
|
<div class="font-bold" id="gold-text">10</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-2 rounded"> |
|
|
<div class="text-sm text-gray-300">Attack</div> |
|
|
<div class="font-bold" id="attack-text">10</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-2 rounded"> |
|
|
<div class="text-sm text-gray-300">Defense</div> |
|
|
<div class="font-bold" id="defense-text">5</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button onclick="openInventory()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded mb-2"> |
|
|
<i class="fas fa-backpack mr-2"></i> Inventory |
|
|
</button> |
|
|
<button onclick="openQuests()" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded mb-2"> |
|
|
<i class="fas fa-scroll mr-2"></i> Quests |
|
|
</button> |
|
|
<button onclick="saveGame()" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded"> |
|
|
<i class="fas fa-save mr-2"></i> Save Game |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
|
|
|
<div id="game-messages" class="bg-gray-800 bg-opacity-90 rounded-lg p-4 mb-4 h-40 overflow-y-auto"> |
|
|
<p class="text-yellow-300">Welcome to Epic RPG Adventure!</p> |
|
|
<p>Create your character and begin your journey.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<button onclick="explore()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105"> |
|
|
<i class="fas fa-binoculars mr-2"></i> Explore |
|
|
</button> |
|
|
<button onclick="rest()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105"> |
|
|
<i class="fas fa-bed mr-2"></i> Rest |
|
|
</button> |
|
|
<button onclick="visitTown()" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105"> |
|
|
<i class="fas fa-city mr-2"></i> Visit Town |
|
|
</button> |
|
|
<button onclick="train()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105"> |
|
|
<i class="fas fa-dumbbell mr-2"></i> Train |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="combat-area" class="hidden bg-gray-800 bg-opacity-90 rounded-lg p-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center mb-8"> |
|
|
|
|
|
<div class="text-center mb-6 md:mb-0 relative"> |
|
|
<div class="text-6xl mb-2" id="player-combat-icon"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold" id="player-combat-name">Hero</h4> |
|
|
<div class="w-full bg-gray-700 rounded-full h-3 mt-2"> |
|
|
<div id="player-health-bar" class="health-bar bg-red-500 h-3 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
<div class="text-sm" id="player-health-text">100/100</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-2xl font-bold mx-4 mb-6 md:mb-0">VS</div> |
|
|
|
|
|
|
|
|
<div class="text-center relative"> |
|
|
<div class="text-6xl mb-2" id="enemy-icon"> |
|
|
<i class="fas fa-spider"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold" id="enemy-name">Goblin</h4> |
|
|
<div class="w-full bg-gray-700 rounded-full h-3 mt-2"> |
|
|
<div id="enemy-health-bar" class="health-bar bg-red-500 h-3 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
<div class="text-sm" id="enemy-health-text">30/30</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="combat-actions" class="grid grid-cols-2 gap-4"> |
|
|
<button onclick="playerAttack()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg"> |
|
|
<i class="fas fa-sword mr-2"></i> Attack |
|
|
</button> |
|
|
<button onclick="playerSpell()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg"> |
|
|
<i class="fas fa-magic mr-2"></i> Cast Spell |
|
|
</button> |
|
|
<button onclick="playerDefend()" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-4 rounded-lg"> |
|
|
<i class="fas fa-shield-alt mr-2"></i> Defend |
|
|
</button> |
|
|
<button onclick="playerFlee()" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded-lg"> |
|
|
<i class="fas fa-running mr-2"></i> Flee |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="town-area" class="hidden bg-gray-800 bg-opacity-90 rounded-lg p-6"> |
|
|
<h3 class="text-2xl font-bold mb-4">Town Square</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<button onclick="visitShop()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i> Shop |
|
|
</button> |
|
|
<button onclick="visitTavern()" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded-lg"> |
|
|
<i class="fas fa-beer mr-2"></i> Tavern |
|
|
</button> |
|
|
<button onclick="visitGuild()" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg"> |
|
|
<i class="fas fa-scroll mr-2"></i> Adventurer's Guild |
|
|
</button> |
|
|
<button onclick="leaveTown()" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-4 rounded-lg"> |
|
|
<i class="fas fa-door-open mr-2"></i> Leave Town |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="inventory-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
|
|
<div class="bg-gray-800 rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-2xl font-bold">Inventory</h3> |
|
|
<button onclick="closeInventory()" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-3xl mb-2"><i class="fas fa-sword"></i></div> |
|
|
<div class="font-bold">Iron Sword</div> |
|
|
<div class="text-sm text-gray-300">Attack +5</div> |
|
|
<button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm"> |
|
|
Equip |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-3xl mb-2"><i class="fas fa-shield-alt"></i></div> |
|
|
<div class="font-bold">Wooden Shield</div> |
|
|
<div class="text-sm text-gray-300">Defense +3</div> |
|
|
<button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm"> |
|
|
Equip |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-3xl mb-2"><i class="fas fa-flask"></i></div> |
|
|
<div class="font-bold">Health Potion</div> |
|
|
<div class="text-sm text-gray-300">Restores 30 HP</div> |
|
|
<button class="mt-2 bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm"> |
|
|
Use |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-3xl mb-2"><i class="fas fa-flask"></i></div> |
|
|
<div class="font-bold">Mana Potion</div> |
|
|
<div class="text-sm text-gray-300">Restores 20 MP</div> |
|
|
<button class="mt-2 bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm"> |
|
|
Use |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h4 class="text-xl font-bold mb-3">Equipped Items</h4> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-700 p-3 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="text-2xl mr-3"><i class="fas fa-sword"></i></div> |
|
|
<div> |
|
|
<div class="font-bold">Iron Sword</div> |
|
|
<div class="text-sm text-gray-300">Attack +5</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-3 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="text-2xl mr-3"><i class="fas fa-shield-alt"></i></div> |
|
|
<div> |
|
|
<div class="font-bold">Wooden Shield</div> |
|
|
<div class="text-sm text-gray-300">Defense +3</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="credits-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
|
|
<div class="bg-gray-800 rounded-lg p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-2xl font-bold">Credits</h3> |
|
|
<button onclick="hideCredits()" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold text-yellow-400">Epic RPG Adventure</h4> |
|
|
<p class="text-gray-300">Created with HTML, CSS, and JavaScript</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold">Developer</h4> |
|
|
<p class="text-gray-300">Your Name Here</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold">Special Thanks</h4> |
|
|
<ul class="list-disc list-inside text-gray-300"> |
|
|
<li>Tailwind CSS</li> |
|
|
<li>Font Awesome</li> |
|
|
<li>Unsplash for images</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-700"> |
|
|
<p class="text-sm text-gray-400">© 2023 All Rights Reserved</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const gameState = { |
|
|
player: { |
|
|
name: '', |
|
|
class: '', |
|
|
gender: '', |
|
|
level: 1, |
|
|
exp: 0, |
|
|
expToNextLevel: 100, |
|
|
health: 100, |
|
|
maxHealth: 100, |
|
|
mana: 50, |
|
|
maxMana: 50, |
|
|
attack: 10, |
|
|
defense: 5, |
|
|
gold: 10, |
|
|
inventory: [ |
|
|
{ name: 'Iron Sword', type: 'weapon', attack: 5, icon: 'fa-s sword' }, |
|
|
{ name: 'Wooden Shield', type: 'shield', defense: 3, icon: 'fa-shield-alt' }, |
|
|
{ name: 'Health Potion', type: 'consumable', effect: 'heal', amount: 30, icon: 'fa-flask' }, |
|
|
{ name: 'Mana Potion', type: 'consumable', effect: 'mana', amount: 20, icon: 'fa-flask' } |
|
|
], |
|
|
equipped: { |
|
|
weapon: { name: 'Iron Sword', type: 'weapon', attack: 5, icon: 'fa-sword' }, |
|
|
shield: { name: 'Wooden Shield', type: 'shield', defense: 3, icon: 'fa-shield-alt' } |
|
|
} |
|
|
}, |
|
|
currentEnemy: null, |
|
|
inCombat: false, |
|
|
gameMessages: [] |
|
|
}; |
|
|
|
|
|
|
|
|
const enemies = [ |
|
|
{ name: 'Goblin Girl', health: 30, maxHealth: 30, attack: 8, defense: 2, exp: 20, gold: 5, icon: 'fa-user-ninja' }, |
|
|
{ name: 'Orc Girl', health: 50, maxHealth: 50, attack: 12, defense: 5, exp: 35, gold: 10, icon: 'fa-user-injured' }, |
|
|
{ name: 'Skeleton Girl', health: 25, maxHealth: 25, attack: 10, defense: 3, exp: 25, gold: 8, icon: 'fa-skull' }, |
|
|
{ name: 'Wolf Girl', health: 20, maxHealth: 20, attack: 7, defense: 1, exp: 15, gold: 3, icon: 'fa-paw' }, |
|
|
{ name: 'Bandit Girl', health: 40, maxHealth: 40, attack: 11, defense: 4, exp: 30, gold: 15, icon: 'fa-user' }, |
|
|
{ name: 'Catgirl', health: 25, maxHealth: 25, attack: 9, defense: 2, exp: 22, gold: 7, icon: 'fa-cat' }, |
|
|
{ name: 'Bunny Girl', health: 35, maxHealth: 35, attack: 7, defense: 3, exp: 25, gold: 8, icon: 'fa-paw' }, |
|
|
{ name: 'Fox Girl', health: 28, maxHealth: 28, attack: 10, defense: 2, exp: 24, gold: 9, icon: 'fa-paw' }, |
|
|
{ name: 'Slime Girl', health: 45, maxHealth: 45, attack: 6, defense: 6, exp: 28, gold: 10, icon: 'fa-droplet' }, |
|
|
{ name: 'Dragon Girl', health: 60, maxHealth: 60, attack: 15, defense: 8, exp: 50, gold: 25, icon: 'fa-dragon' } |
|
|
]; |
|
|
|
|
|
|
|
|
function startNewGame() { |
|
|
document.getElementById('main-menu').classList.add('hidden'); |
|
|
document.getElementById('character-creation').classList.remove('hidden'); |
|
|
addGameMessage('Begin your adventure by creating your character.'); |
|
|
} |
|
|
|
|
|
function selectClass(characterClass) { |
|
|
const cards = document.querySelectorAll('.character-card'); |
|
|
cards.forEach(card => card.classList.remove('ring-2', 'ring-yellow-400')); |
|
|
|
|
|
const selectedCard = document.querySelector(`.character-card:nth-child(${characterClass === 'warrior' ? 1 : characterClass === 'mage' ? 2 : 3})`); |
|
|
selectedCard.classList.add('ring-2', 'ring-yellow-400'); |
|
|
|
|
|
gameState.player.class = characterClass; |
|
|
|
|
|
|
|
|
if (characterClass === 'warrior') { |
|
|
gameState.player.maxHealth = 120; |
|
|
gameState.player.health = 120; |
|
|
gameState.player.attack = 12; |
|
|
gameState.player.defense = 8; |
|
|
gameState.player.mana = 30; |
|
|
gameState.player.maxMana = 30; |
|
|
} else if (characterClass === 'mage') { |
|
|
gameState.player.maxHealth = 70; |
|
|
gameState.player.health = 70; |
|
|
gameState.player.attack = 8; |
|
|
gameState.player.defense = 3; |
|
|
gameState.player.mana = 80; |
|
|
gameState.player.maxMana = 80; |
|
|
} else if (characterClass === 'rogue') { |
|
|
gameState.player.maxHealth = 90; |
|
|
gameState.player.health = 90; |
|
|
gameState.player.attack = 10; |
|
|
gameState.player.defense = 5; |
|
|
gameState.player.mana = 50; |
|
|
gameState.player.maxMana = 50; |
|
|
} |
|
|
|
|
|
addGameMessage(`You selected the ${characterClass} class.`); |
|
|
} |
|
|
|
|
|
function finalizeCharacter() { |
|
|
const nameInput = document.getElementById('character-name'); |
|
|
const genderSelect = document.getElementById('character-gender'); |
|
|
|
|
|
if (!nameInput.value.trim()) { |
|
|
addGameMessage('Please enter a name for your character.', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (!gameState.player.class) { |
|
|
addGameMessage('Please select a class for your character.', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
gameState.player.name = nameInput.value.trim(); |
|
|
gameState.player.gender = genderSelect.value; |
|
|
|
|
|
|
|
|
document.getElementById('character-creation').classList.add('hidden'); |
|
|
document.getElementById('game-screen').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
updateCharacterDisplay(); |
|
|
|
|
|
addGameMessage(`Welcome, ${gameState.player.name} the ${gameState.player.class}! Your adventure begins now.`, 'success'); |
|
|
} |
|
|
|
|
|
function updateCharacterDisplay() { |
|
|
|
|
|
document.getElementById('character-display-name').textContent = gameState.player.name; |
|
|
document.getElementById('character-display-class').textContent = `Class: ${capitalizeFirstLetter(gameState.player.class)}`; |
|
|
|
|
|
|
|
|
document.getElementById('health-text').textContent = `${gameState.player.health}/${gameState.player.maxHealth}`; |
|
|
document.getElementById('mana-text').textContent = `${gameState.player.mana}/${gameState.player.maxMana}`; |
|
|
document.getElementById('exp-text').textContent = `${gameState.player.exp}/${gameState.player.expToNextLevel}`; |
|
|
document.getElementById('level-text').textContent = gameState.player.level; |
|
|
document.getElementById('gold-text').textContent = gameState.player.gold; |
|
|
document.getElementById('attack-text').textContent = gameState.player.attack + (gameState.player.equipped.weapon ? gameState.player.equipped.weapon.attack : 0); |
|
|
document.getElementById('defense-text').textContent = gameState.player.defense + (gameState.player.equipped.shield ? gameState.player.equipped.shield.defense : 0); |
|
|
|
|
|
|
|
|
const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100; |
|
|
document.getElementById('health-bar').style.width = `${healthPercent}%`; |
|
|
|
|
|
|
|
|
const manaPercent = (gameState.player.mana / gameState.player.maxMana) * 100; |
|
|
document.getElementById('mana-bar').style.width = `${manaPercent}%`; |
|
|
|
|
|
|
|
|
const expPercent = (gameState.player.exp / gameState.player.expToNextLevel) * 100; |
|
|
document.getElementById('exp-bar').style.width = `${expPercent}%`; |
|
|
|
|
|
|
|
|
const characterIcon = document.getElementById('character-icon'); |
|
|
const playerCombatIcon = document.getElementById('player-combat-icon'); |
|
|
|
|
|
if (gameState.player.class === 'warrior') { |
|
|
characterIcon.innerHTML = '<i class="fas fa-shield-alt text-red-500"></i>'; |
|
|
playerCombatIcon.innerHTML = '<i class="fas fa-shield-alt text-red-500"></i>'; |
|
|
} else if (gameState.player.class === 'mage') { |
|
|
characterIcon.innerHTML = '<i class="fas fa-hat-wizard text-blue-500"></i>'; |
|
|
playerCombatIcon.innerHTML = '<i class="fas fa-hat-wizard text-blue-500"></i>'; |
|
|
} else if (gameState.player.class === 'rogue') { |
|
|
characterIcon.innerHTML = '<i class="fas fa-user-ninja text-green-500"></i>'; |
|
|
playerCombatIcon.innerHTML = '<i class="fas fa-user-ninja text-green-500"></i>'; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('player-combat-name').textContent = gameState.player.name; |
|
|
} |
|
|
|
|
|
function addGameMessage(message, type = 'info') { |
|
|
const messagesDiv = document.getElementById('game-messages'); |
|
|
const messageElement = document.createElement('p'); |
|
|
|
|
|
if (type === 'error') { |
|
|
messageElement.className = 'text-red-400'; |
|
|
} else if (type === 'success') { |
|
|
messageElement.className = 'text-green-400'; |
|
|
} else if (type === 'warning') { |
|
|
messageElement.className = 'text-yellow-400'; |
|
|
} else { |
|
|
messageElement.className = 'text-gray-300'; |
|
|
} |
|
|
|
|
|
messageElement.textContent = message; |
|
|
messagesDiv.appendChild(messageElement); |
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight; |
|
|
|
|
|
|
|
|
gameState.gameMessages.push(message); |
|
|
} |
|
|
|
|
|
function explore() { |
|
|
if (gameState.inCombat) { |
|
|
addGameMessage('You are already in combat!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
if (Math.random() < 0.7) { |
|
|
startCombat(); |
|
|
} else { |
|
|
|
|
|
const randomEvent = Math.random(); |
|
|
|
|
|
if (randomEvent < 0.5) { |
|
|
|
|
|
const goldFound = Math.floor(Math.random() * 10) + 5; |
|
|
gameState.player.gold += goldFound; |
|
|
updateCharacterDisplay(); |
|
|
addGameMessage(`You found ${goldFound} gold coins on the ground!`, 'success'); |
|
|
} else { |
|
|
|
|
|
gameState.player.inventory.push({ |
|
|
name: 'Health Potion', |
|
|
type: 'consumable', |
|
|
effect: 'heal', |
|
|
amount: 30, |
|
|
icon: 'fa-flask' |
|
|
}); |
|
|
addGameMessage('You found a Health Potion!', 'success'); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function startCombat() { |
|
|
gameState.inCombat = true; |
|
|
|
|
|
|
|
|
const randomEnemyIndex = Math.floor(Math.random() * enemies.length); |
|
|
gameState.currentEnemy = {...enemies[randomEnemyIndex]}; |
|
|
|
|
|
|
|
|
document.getElementById('combat-area').classList.remove('hidden'); |
|
|
document.getElementById('enemy-name').textContent = gameState.currentEnemy.name; |
|
|
document.getElementById('enemy-health-text').textContent = `${gameState.currentEnemy.health}/${gameState.currentEnemy.maxHealth}`; |
|
|
document.getElementById('enemy-health-bar').style.width = '100%'; |
|
|
document.getElementById('enemy-icon').innerHTML = `<i class="fas ${gameState.currentEnemy.icon}"></i>`; |
|
|
|
|
|
|
|
|
document.getElementById('player-health-text').textContent = `${gameState.player.health}/${gameState.player.maxHealth}`; |
|
|
const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100; |
|
|
document.getElementById('player-health-bar').style.width = `${healthPercent}%`; |
|
|
|
|
|
addGameMessage(`A wild ${gameState.currentEnemy.name} appears!`, 'warning'); |
|
|
} |
|
|
|
|
|
function playerAttack() { |
|
|
if (!gameState.inCombat || !gameState.currentEnemy) { |
|
|
addGameMessage('There is nothing to attack!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const playerAttackPower = gameState.player.attack + (gameState.player.equipped.weapon ? gameState.player.equipped.weapon.attack : 0); |
|
|
const damage = Math.max(1, playerAttackPower - Math.floor(gameState.currentEnemy.defense / 2)); |
|
|
|
|
|
|
|
|
gameState.currentEnemy.health -= damage; |
|
|
|
|
|
|
|
|
const enemyHealthPercent = (gameState.currentEnemy.health / gameState.currentEnemy.maxHealth) * 100; |
|
|
document.getElementById('enemy-health-bar').style.width = `${Math.max(0, enemyHealthPercent)}%`; |
|
|
document.getElementById('enemy-health-text').textContent = `${Math.max(0, gameState.currentEnemy.health)}/${gameState.currentEnemy.maxHealth}`; |
|
|
|
|
|
|
|
|
showDamageText(document.querySelector('#combat-area .relative:last-child'), damage); |
|
|
|
|
|
addGameMessage(`You attack the ${gameState.currentEnemy.name} for ${damage} damage!`, 'success'); |
|
|
|
|
|
|
|
|
if (gameState.currentEnemy.health <= 0) { |
|
|
enemyDefeated(); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
enemyAttack(); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function playerSpell() { |
|
|
if (!gameState.inCombat || !gameState.currentEnemy) { |
|
|
addGameMessage('There is nothing to attack!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (gameState.player.mana < 15) { |
|
|
addGameMessage('Not enough mana to cast a spell!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
gameState.player.mana -= 15; |
|
|
updateCharacterDisplay(); |
|
|
|
|
|
|
|
|
let spellDamage; |
|
|
if (gameState.player.class === 'mage') { |
|
|
spellDamage = Math.max(3, 15 + Math.floor(Math.random() * 10)); |
|
|
} else { |
|
|
spellDamage = Math.max(3, 10 + Math.floor(Math.random() * 5)); |
|
|
} |
|
|
|
|
|
|
|
|
gameState.currentEnemy.health -= spellDamage; |
|
|
|
|
|
|
|
|
const enemyHealthPercent = (gameState.currentEnemy.health / gameState.currentEnemy.maxHealth) * 100; |
|
|
document.getElementById('enemy-health-bar').style.width = `${Math.max(0, enemyHealthPercent)}%`; |
|
|
document.getElementById('enemy-health-text').textContent = `${Math.max(0, gameState.currentEnemy.health)}/${gameState.currentEnemy.maxHealth}`; |
|
|
|
|
|
|
|
|
showDamageText(document.querySelector('#combat-area .relative:last-child'), spellDamage, 'blue'); |
|
|
|
|
|
addGameMessage(`You cast a spell on the ${gameState.currentEnemy.name} for ${spellDamage} damage!`, 'success'); |
|
|
|
|
|
|
|
|
if (gameState.currentEnemy.health <= 0) { |
|
|
enemyDefeated(); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
enemyAttack(); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function playerDefend() { |
|
|
if (!gameState.inCombat || !gameState.currentEnemy) { |
|
|
addGameMessage('There is nothing to defend against!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
addGameMessage(`You take a defensive stance, reducing damage from the next attack.`, 'info'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const enemyDamage = Math.max(1, Math.floor((gameState.currentEnemy.attack - (gameState.player.defense + (gameState.player.equipped.shield ? gameState.player.equipped.shield.defense : 0))) / 2)); |
|
|
|
|
|
|
|
|
gameState.player.health -= enemyDamage; |
|
|
|
|
|
|
|
|
const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100; |
|
|
document.getElementById('player-health-bar').style.width = `${Math.max(0, healthPercent)}%`; |
|
|
document.getElementById('player-health-text').textContent = `${Math.max(0, gameState.player.health)}/${gameState.player.maxHealth}`; |
|
|
document.getElementById('health-bar').style.width = `${Math.max(0, healthPercent)}%`; |
|
|
document.getElementById('health-text').textContent = `${Math.max(0, gameState.player.health)}/${gameState.player.maxHealth}`; |
|
|
|
|
|
|
|
|
showDamageText(document.querySelector('#combat-area .relative:first-child'), enemyDamage); |
|
|
|
|
|
addGameMessage(`The ${gameState.currentEnemy.name} attacks you for ${enemyDamage} damage (reduced by your defense)!`, 'warning'); |
|
|
|
|
|
|
|
|
if (gameState.player.health <= 0) { |
|
|
playerDefeated(); |
|
|
} |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function playerFlee() { |
|
|
if (!gameState.inCombat || !gameState.currentEnemy) { |
|
|
addGameMessage('There is nothing to flee from!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
if (Math.random() < 0.6) { |
|
|
addGameMessage(`You successfully fled from the ${gameState.currentEnemy.name}!`, 'success'); |
|
|
endCombat(); |
|
|
} else { |
|
|
addGameMessage(`You failed to flee! The ${gameState.currentEnemy.name} attacks you!`, 'error'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
enemyAttack(); |
|
|
}, 1000); |
|
|
} |
|
|
} |
|
|
|
|
|
function enemyAttack() { |
|
|
if (!gameState.inCombat || !gameState.currentEnemy) return; |
|
|
|
|
|
|
|
|
const enemyDamage = Math.max(1, gameState.currentEnemy.attack - (gameState.player.defense + (gameState.player.equipped.shield ? gameState.player.equipped.shield.defense : 0))); |
|
|
|
|
|
|
|
|
gameState.player.health -= enemyDamage; |
|
|
|
|
|
|
|
|
const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100; |
|
|
document.getElementById('player-health-bar').style.width = `${Math.max(0, healthPercent)}%`; |
|
|
document.getElementById('player-health-text').textContent = `${Math.max(0, gameState.player.health)}/${gameState.player.maxHealth}`; |
|
|
document.getElementById('health-bar').style.width = `${Math.max(0, healthPercent)}%`; |
|
|
document.getElementById('health-text').textContent = `${Math.max(0, gameState.player.health)}/${gameState.player.maxHealth}`; |
|
|
|
|
|
|
|
|
showDamageText(document.querySelector('#combat-area .relative:first-child'), enemyDamage); |
|
|
|
|
|
addGameMessage(`The ${gameState.currentEnemy.name} attacks you for ${enemyDamage} damage!`, 'warning'); |
|
|
|
|
|
|
|
|
if (gameState.player.health <= 0) { |
|
|
playerDefeated(); |
|
|
} |
|
|
} |
|
|
|
|
|
function enemyDefeated() { |
|
|
addGameMessage(`You defeated the ${gameState.currentEnemy.name}!`, 'success'); |
|
|
|
|
|
|
|
|
gameState.player.exp += gameState.currentEnemy.exp; |
|
|
gameState.player.gold += gameState.currentEnemy.gold; |
|
|
|
|
|
addGameMessage(`Gained ${gameState.currentEnemy.exp} experience and ${gameState.currentEnemy.gold} gold.`, 'success'); |
|
|
|
|
|
|
|
|
checkLevelUp(); |
|
|
|
|
|
|
|
|
endCombat(); |
|
|
} |
|
|
|
|
|
function playerDefeated() { |
|
|
addGameMessage(`You were defeated by the ${gameState.currentEnemy.name}!`, 'error'); |
|
|
addGameMessage('You wake up in town, having lost some gold and experience.', 'warning'); |
|
|
|
|
|
|
|
|
gameState.player.exp = Math.max(0, gameState.player.exp - 10); |
|
|
gameState.player.gold = Math.max(0, gameState.player.gold - 5); |
|
|
|
|
|
|
|
|
gameState.player.health = Math.floor(gameState.player.maxHealth * 0.3); |
|
|
|
|
|
|
|
|
updateCharacterDisplay(); |
|
|
|
|
|
|
|
|
endCombat(); |
|
|
} |
|
|
|
|
|
function endCombat() { |
|
|
gameState.inCombat = false; |
|
|
gameState.currentEnemy = null; |
|
|
document.getElementById('combat-area').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function checkLevelUp() { |
|
|
if (gameState.player.exp >= gameState.player.expToNextLevel) { |
|
|
gameState.player.level++; |
|
|
gameState.player.exp -= gameState.player.expToNextLevel; |
|
|
gameState.player.expToNextLevel = Math.floor(gameState.player.expToNextLevel * 1.2); |
|
|
|
|
|
|
|
|
gameState.player.maxHealth += 10; |
|
|
gameState.player.health = gameState.player.maxHealth; |
|
|
gameState.player.maxMana += 5; |
|
|
gameState.player.mana = gameState.player.maxMana; |
|
|
gameState.player.attack += 2; |
|
|
gameState.player.defense += 1; |
|
|
|
|
|
addGameMessage(`Level up! You are now level ${gameState.player.level}!`, 'success'); |
|
|
addGameMessage('Your stats have improved!', 'info'); |
|
|
|
|
|
updateCharacterDisplay(); |
|
|
} |
|
|
} |
|
|
|
|
|
function rest() { |
|
|
if (gameState.inCombat) { |
|
|
addGameMessage('You cannot rest while in combat!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const healthRestored = Math.floor(gameState.player.maxHealth * 0.3); |
|
|
const manaRestored = Math.floor(gameState.player.maxMana * 0.3); |
|
|
|
|
|
gameState.player.health = Math.min(gameState.player.maxHealth, gameState.player.health + healthRestored); |
|
|
gameState.player.mana = Math.min(gameState.player.maxMana, gameState.player.mana + manaRestored); |
|
|
|
|
|
addGameMessage(`You rest and recover ${healthRestored} health and ${manaRestored} mana.`, 'success'); |
|
|
updateCharacterDisplay(); |
|
|
} |
|
|
|
|
|
function visitTown() { |
|
|
if (gameState.inCombat) { |
|
|
addGameMessage('You cannot visit town while in combat!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
document.getElementById('town-area').classList.remove('hidden'); |
|
|
addGameMessage('You enter the town square.', 'info'); |
|
|
} |
|
|
|
|
|
function leaveTown() { |
|
|
document.getElementById('town-area').classList.add('hidden'); |
|
|
addGameMessage('You leave the town.', 'info'); |
|
|
} |
|
|
|
|
|
function visitShop() { |
|
|
addGameMessage('The shop is currently closed. Come back later!', 'info'); |
|
|
} |
|
|
|
|
|
function visitTavern() { |
|
|
addGameMessage('You enjoy a drink at the tavern and hear rumors of a dragon in the mountains.', 'info'); |
|
|
} |
|
|
|
|
|
function visitGuild() { |
|
|
addGameMessage('The Adventurer\'s Guild has no quests available right now.', 'info'); |
|
|
} |
|
|
|
|
|
function train() { |
|
|
if (gameState.inCombat) { |
|
|
addGameMessage('You cannot train while in combat!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
if (gameState.player.gold < 5) { |
|
|
addGameMessage('You need at least 5 gold to train!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
gameState.player.gold -= 5; |
|
|
|
|
|
|
|
|
const statToImprove = ['attack', 'defense'][Math.floor(Math.random() * 2)]; |
|
|
const improvement = 1; |
|
|
|
|
|
if (statToImprove === 'attack') { |
|
|
gameState.player.attack += improvement; |
|
|
addGameMessage(`After training, your attack increased by ${improvement}! (Cost: 5 gold)`, 'success'); |
|
|
} else { |
|
|
gameState.player.defense += improvement; |
|
|
addGameMessage(`After training, your defense increased by ${improvement}! (Cost: 5 gold)`, 'success'); |
|
|
} |
|
|
|
|
|
updateCharacterDisplay(); |
|
|
} |
|
|
|
|
|
function openInventory() { |
|
|
document.getElementById('inventory-modal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeInventory() { |
|
|
document.getElementById('inventory-modal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function openQuests() { |
|
|
addGameMessage('You have no active quests at the moment.', 'info'); |
|
|
} |
|
|
|
|
|
function saveGame() { |
|
|
localStorage.setItem('epicRpgSave', JSON.stringify(gameState)); |
|
|
addGameMessage('Game saved successfully!', 'success'); |
|
|
} |
|
|
|
|
|
function loadGame() { |
|
|
const savedGame = localStorage.getItem('epicRpgSave'); |
|
|
|
|
|
if (savedGame) { |
|
|
try { |
|
|
const parsedGame = JSON.parse(savedGame); |
|
|
Object.assign(gameState, parsedGame); |
|
|
|
|
|
document.getElementById('main-menu').classList.add('hidden'); |
|
|
document.getElementById('game-screen').classList.remove('hidden'); |
|
|
|
|
|
updateCharacterDisplay(); |
|
|
addGameMessage(`Welcome back, ${gameState.player.name}! Game loaded successfully.`, 'success'); |
|
|
} catch (e) { |
|
|
addGameMessage('Failed to load saved game.', 'error'); |
|
|
} |
|
|
} else { |
|
|
addGameMessage('No saved game found.', 'error'); |
|
|
} |
|
|
} |
|
|
|
|
|
function showCredits() { |
|
|
document.getElementById('credits-modal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideCredits() { |
|
|
document.getElementById('credits-modal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function showDamageText(element, damage, color = 'red') { |
|
|
const damageText = document.createElement('div'); |
|
|
damageText.className = 'damage-text'; |
|
|
damageText.style.color = color; |
|
|
damageText.textContent = `-${damage}`; |
|
|
damageText.style.left = '50%'; |
|
|
damageText.style.transform = 'translateX(-50%)'; |
|
|
|
|
|
element.appendChild(damageText); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
damageText.remove(); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function capitalizeFirstLetter(string) { |
|
|
return string.charAt(0).toUpperCase() + string.slice(1); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
addGameMessage('Welcome to Epic RPG Adventure!'); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=lunarflu/rpg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
