create project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dungeons & Dragons 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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#dc2626',
secondary: '#ca8a04',
dark: '#0f172a',
light: '#f1f5f9',
dungeon: '#1e293b',
monster: '#991b1b',
treasure: '#f59e0b'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Roboto:wght@300;400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
overflow-x: hidden;
background-image:
radial-gradient(circle at 10% 20%, rgba(220, 38, 38, 0.1) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(202, 138, 4, 0.1) 0%, transparent 20%);
}
.game-container {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
border-radius: 15px;
overflow: hidden;
animation: fadeIn 0.8s ease-out;
border: 2px solid #dc2626;
}
.character-card {
transition: all 0.3s ease;
border: 1px solid #334155;
}
.character-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
border-color: #ca8a04;
}
.stats-bar {
height: 12px;
border-radius: 6px;
background: #374151;
overflow: hidden;
}
.health-bar {
background: linear-gradient(to right, #ef4444, #f87171);
}
.mana-bar {
background: linear-gradient(to right, #3b82f6, #60a5fa);
}
.xp-bar {
background: linear-gradient(to right, #10b981, #34d399);
}
.dice {
animation: roll 0.8s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes roll {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
100% { transform: rotate(360deg) scale(1); }
}
.roll-animation {
animation: roll 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.glow {
box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
}
.card-title {
font-family: 'MedievalSharp', cursive;
text-transform: uppercase;
letter-spacing: 1px;
}
.stat-name {
font-weight: 700;
}
.action-btn {
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.action-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.action-btn:hover::after {
left: 100%;
}
.enemy-card {
background: linear-gradient(145deg, #1e293b, #0f172a);
border: 1px solid #991b1b;
}
.quest-item {
border-left: 3px solid #ca8a04;
}
.dice-result {
font-family: 'MedievalSharp', cursive;
font-size: 3rem;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.event-log {
min-height: 200px;
background: rgba(15, 23, 42, 0.7);
border-radius: 10px;
border: 1px solid #334155;
}
.dungeon-bg {
background-image:
repeating-linear-gradient(
45deg,
transparent,
transparent 20px,
rgba(220, 38, 38, 0.05) 20px,
rgba(220, 38, 38, 0.05) 40px
);
}
</style>
<!-- Game Area -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
<!-- Character Panel -->
<div class="lg:col-span-1">
<div class="bg-gray-900 rounded-xl p-6 shadow-lg character-card">
<div class="flex justify-center mb-4">
<div class="w-32 h-32 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white text-4xl border-2 border-secondary">
<i class="fas fa-user-astronaut"></i>
</div>
</div>
<h2 class="text-xl font-bold text-center mb-4 card-title">Hero's Journal</h2>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="stat-name">Name:</span>
<span id="heroName" class="font-bold text-light">Adventurer</span>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="stat-name">Level:</span>
<span id="level" class="font-bold text-light">1</span>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="stat-name">Class:</span>
<span id="class" class="font-bold text-light">Warrior</span>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="stat-name">Gold:</span>
<span id="goldValue" class="font-bold text-treasure">100</span>
</div>
</div>
<div class="pt-4">
<h3 class="font-bold mb-2 card-title">Stats</h3>
<div class="space-y-3">
<div>
<div class="flex justify-between mb-1">
<span>Health</span>
<span id="healthValue" class="font-bold text-red-400">100</span>
</div>
<div class="stats-bar">
<div id="healthBar" class="health-bar h-full w-3/4"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Mana</span>
<span id="manaValue" class="font-bold text-blue-400">50</span>
</div>
<div class="stats-bar">
<div id="manaBar" class="mana-bar h-full w-1/2"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Experience</span>
<span id="xpValue" class="font-bold text-green-400">0</span>
</div>
<div class="stats-bar">
<div id="xpBar" class="xp-bar h-full w-1/3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Actions -->
<div class="mt-6 bg-gray-900 rounded-xl p-6 shadow-lg">
<h3 class="font-bold text-lg mb-4 text-center card-title">Actions</h3>
<div class="grid grid-cols-2 gap-3">
<button id="attackBtn" class="action-btn bg-red-600 hover:bg-red-700 text-white py-3 px-4 rounded-lg font-bold transition transform hover:scale-105">
<i class="fas fa-fist-raised mr-2"></i>Attack
</button>
<button id="defendBtn" class="action-btn bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-bold transition transform hover:scale-105">
<i class="fas fa-shield-alt mr-2"></i>Defend
</button>
<button id="healBtn" class="action-btn bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-bold transition transform hover:scale-105">
<i class="fas fa-heartbeat mr-2"></i>Heal
</button>
<button id="magicBtn" class="action-btn bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg font-bold transition transform hover:scale-105">
<i class="fas fa-magic mr-2"></i>Magic
</button>
</div>
</div>
</div>
<!-- Main Game Area -->
<div class="lg:col-span-2">
<div class="dungeon-bg bg-gradient-to-br from-dungeon to-gray-900 rounded-xl p-6 shadow-lg text-white h-full">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold card-title">Adventure Log</h2>
<div class="flex gap-2">
<button id="newGameBtn" class="bg-secondary hover:bg-yellow-600 text-white py-2 px-4 rounded-lg font-bold transition">
New Game
</button>
<button id="saveBtn" class="bg-primary hover:bg-red-700 text-white py-2 px-4 rounded-lg font-bold transition">
Save
</button>
</div>
</div>
<!-- Event Display -->
<div id="eventDisplay" class="event-log rounded-lg p-6 mb-6">
<p class="text-center text-lg mb-4">Welcome to the Dungeons & Dragons realm!</p>
<p class="text-center">Your adventure begins now...</p>
</div>
<!-- Quest Area -->
<div class="bg-black/30 backdrop-blur-sm rounded-lg p-6">
<h3 class="font-bold text-lg mb-4 card-title">Current Quests</h3>
<div class="space-y-4">
<div class="flex items-start gap-4 quest-item">
<div class="bg-yellow-500/20 p-3 rounded-lg">
<i class="fas fa-scroll text-yellow-400 text-xl"></i>
</div>
<div>
<h4 class="font-bold">The Lost Artifact</h4>
<p class="text-sm opacity-80">Find the ancient artifact hidden in the Whispering Woods.</p>
</div>
</div>
<div class="flex items-start gap-4 quest-item">
<div class="bg-red-500/20 p-3 rounded-lg">
<i class="fas fa-bullseye text-red-400 text-xl"></i>
</div>
<div>
<h4 class="font-bold">Defeat the Goblin King</h4>
<p class="text-sm opacity-80">Collect 3 magical gems to weaken the goblin king's armor.</p>
</div>
</div>
<div class="flex items-start gap-4 quest-item">
<div class="bg-purple-500/20 p-3 rounded-lg">
<i class="fas fa-crown text-purple-400 text-xl"></i>
</div>
<div>
<h4 class="font-bold">Dragon's Hoard</h4>
<p class="text-sm opacity-80">Retrieve the dragon's treasure from its lair near the mountain peaks.</p>
</div>
</div>
</div>
</div>
<!-- Dice Roll -->
<div class="mt-6 bg-black/20 backdrop-blur-sm rounded-lg p-6">
<div class="flex flex-col items-center">
<h3 class="font-bold text-lg mb-4 card-title">Dice Roll</h3>
<div class="flex gap-4 items-center">
<div class="text-center">
<div id="diceResult" class="dice-result mb-2">?</div>
<span class="text-sm opacity-75">Roll Result</span>
</div>
<button id="rollDiceBtn" class="bg-treasure hover:bg-yellow-600 text-white py-3 px-6 rounded-full font-bold text-xl transition transform hover:scale-110">
<i class="fas fa-dice"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="bg-gray-800 text-white text-center p-4 border-t-2 border-secondary">
<p>Dungeons & Dragons RPG © 2023 | Made with <i class="fas fa-heart text-red-500"></i> and <i class="fas fa-dragon text-yellow-400"></i></p>
</div>
</div>
<script>
// Game state
const gameState = {
hero: {
name: 'Adventurer',
level: 1,
class: 'Warrior',
health: 100,
maxHealth: 100,
mana: 50,
maxMana: 50,
experience: 0,
gold: 100
},
enemies: [
{ name: 'Goblin', health: 30, attack: 5, reward: 15, type: 'monster' },
{ name: 'Orc', health: 60, attack: 10, reward: 25, type: 'monster' },
{ name: 'Dragon', health: 150, attack: 20, reward: 100, type: 'boss' }
],
currentEnemy: null,
quests: ['The Lost Artifact', 'Defeat the Goblin King', 'Dragon\'s Hoard'],
diceRolled: false
};
// DOM Elements
const heroNameEl = document.getElementById('heroName');
const levelEl = document.getElementById('level');
const classEl = document.getElementById('class');
const healthValueEl = document.getElementById('healthValue');
const manaValueEl = document.getElementById('manaValue');
const xpValueEl = document.getElementById('xpValue');
const goldValueEl = document.getElementById('goldValue');
const healthBarEl = document.getElementById('healthBar');
const manaBarEl = document.getElementById('manaBar');
const xpBarEl = document.getElementById('xpBar');
const eventDisplayEl = document.getElementById('eventDisplay');
const diceResultEl = document.getElementById('diceResult');
const rollDiceBtn = document.getElementById('rollDiceBtn');
// Initialize game
function initGame() {
updateUI();
setupEventListeners();
}
// Update UI based on game state
function updateUI() {
heroNameEl.textContent = gameState.hero.name;
levelEl.textContent = gameState.hero.level;
classEl.textContent = gameState.hero.class;
goldValueEl.textContent = gameState.hero.gold;
healthValueEl.textContent = gameState.hero.health;
manaValueEl.textContent = gameState.hero.mana;
xpValueEl.textContent = gameState.hero.experience;
// Update bars
const healthPercent = (gameState.hero.health / gameState.hero.maxHealth) * 100;
const manaPercent = (gameState.hero.mana / gameState.hero.maxMana) * 100;
const xpPercent = (gameState.hero.experience / (gameState.hero.level * 50)) * 100;
healthBarEl.style.width = `${healthPercent}%`;
manaBarEl.style.width = `${manaPercent}%`;
xpBarEl.style.width = `${xpPercent}%`;
}
// Setup event listeners
function setupEventListeners() {
document.getElementById('attackBtn').addEventListener('click', attack);
document.getElementById('defendBtn').addEventListener('click', defend);
document.getElementById('healBtn').addEventListener('click', heal);
document.getElementById('magicBtn').addEventListener('click', magic);
document.getElementById('rollDiceBtn').addEventListener('click', rollDice);
document.getElementById('newGameBtn').addEventListener('click', newGame);
document.getElementById('saveBtn').addEventListener('click', saveGame);
}
// Game actions
function attack() {
const damage = Math.floor(Math.random() * 15) + 5;
let message = `You strike the enemy for ${damage} damage!`;
if (gameState.currentEnemy) {
gameState.currentEnemy.health -= damage;
if (gameState.currentEnemy.health <= 0) {
message += ` You defeated the ${gameState.currentEnemy.name}!`;
gameState.hero.experience += gameState.currentEnemy.reward;
gameState.hero.gold += Math.floor(gameState.currentEnemy.reward / 2);
gameState.currentEnemy = null;
eventDisplayEl.innerHTML = `<p class="text-green-400">${message}</p>`;
} else {
eventDisplayEl.innerHTML = `<p>${message}</p>`;
}
} else {
eventDisplayEl.innerHTML = `<p class="text-yellow-400">No enemy to attack!</p>`;
}
updateUI();
}
function defend() {
eventDisplayEl.innerHTML = `<p class="text-blue-400">You take a defensive stance, reducing incoming damage by half!</p>`;
gameState.hero.mana = Math.min(gameState.hero.maxMana, gameState.hero.mana + 5);
updateUI();
}
function heal() {
if (gameState.hero.mana >= 10) {
const healAmount = Math.floor(Math.random() * 20) + 10;
gameState.hero.health = Math.min(gameState.hero.maxHealth, gameState.hero.health + healAmount);
gameState.hero.mana -= 10;
eventDisplayEl.innerHTML = `<p class="text-green-400">You heal yourself for ${healAmount} hit points!</p>`;
updateUI();
} else {
eventDisplayEl.innerHTML = `<p class="text-red-400">Not enough mana to heal!</p>`;
}
}
function magic() {
const spellDamage = Math.floor(Math.random() * 25) + 10;
if (gameState.hero.mana >= 15) {
if (gameState.currentEnemy) {
gameState.currentEnemy.health -= spellDamage;
gameState.hero.mana -= 15;
eventDisplayEl.innerHTML = `<p class="text-purple-400">You cast a powerful spell dealing ${spellDamage} damage!</p>`;
if (gameState.currentEnemy.health <= 0) {
eventDisplayEl.innerHTML += `<p class="text-green-400"> You defeated the ${gameState.currentEnemy.name}!</p>`;
gameState.hero.experience += gameState.currentEnemy.reward;
gameState.hero.gold += Math.floor(gameState.currentEnemy.reward / 2);
gameState.currentEnemy = null;
}
updateUI();
}
} else {
eventDisplayEl.innerHTML = `<p class="text-red-400">Not enough mana for magic!</p>`;
}
}
function rollDice() {
if (!gameState.diceRolled) {
gameState.diceRolled = true;
const result = Math.floor(Math.random() * 6) + 1;
diceResultEl.textContent = result;
diceResultEl.classList.add('roll-animation');
setTimeout(() => {
diceResultEl.classList.remove('roll-animation');
gameState.diceRolled = false;
}, 500);
// Special effects based on roll
let message = '';
switch(result) {
case 1:
message = 'Critical failure! You trip and hurt yourself.';
gameState.hero.health = Math.max(1, gameState.hero.health - 5);
break;
case 2:
message = 'Minor setback, but you survive.';
break;
case 3:
message = 'Lucky roll! You gain a small boost.';
gameState.hero.health = Math.min(gameState.hero.maxHealth, gameState.hero.health + 5);
break;
case 4:
message = 'Lucky roll! You find a healing potion.';
gameState.hero.mana += 10;
break;
case 5:
message = 'Excellent roll! You discover treasure!';
gameState.hero.gold += 20;
break;
case 6:
message = 'Perfect roll! Double fortune strikes!';
gameState.hero.experience += 20;
break;
}
eventDisplayEl.innerHTML = `<p class="text-yellow-400">${message}</p>`;
updateUI();
}
}
function newGame() {
gameState.hero = {
name: 'Adventurer',
level: 1,
class: 'Warrior',
health: 100,
maxHealth: 100,
mana: 50,
maxMana: 50,
experience: 0,
gold: 100
};
gameState.currentEnemy = null;
gameState.diceRolled = false;
eventDisplayEl.innerHTML = '<p class="text-green-400">New game started! Adventure begins again...</p>';
updateUI();
}
function saveGame() {
eventDisplayEl.innerHTML = '<p class="text-blue-400">Game saved successfully!</p>';
}
// Initialize the game when page loads
window.addEventListener('DOMContentLoaded', initGame);
</script>