Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Godzilla Tamagotchi</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); | |
| :root { | |
| --eink-bg: #f0f0e0; | |
| --eink-text: #111; | |
| --eink-highlight: #555; | |
| --eink-pixel: #333; | |
| --lcd-bg: #c8f7c5; | |
| } | |
| body { | |
| font-family: 'VT323', monospace; | |
| background-color: #222; | |
| color: var(--eink-text); | |
| overflow: hidden; | |
| user-select: none; | |
| } | |
| .device { | |
| background: linear-gradient(145deg, #3a3a3a, #2a2a2a); | |
| box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); | |
| border-radius: 2rem; | |
| position: relative; | |
| } | |
| .screen-border { | |
| background: linear-gradient(145deg, #4a4a4a, #3a3a3a); | |
| box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5); | |
| border-radius: 1rem; | |
| } | |
| .eink-screen { | |
| background-color: var(--eink-bg); | |
| font-family: 'VT323', monospace; | |
| color: var(--eink-text); | |
| image-rendering: pixelated; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .lcd-screen { | |
| background-color: var(--lcd-bg); | |
| font-family: 'VT323', monospace; | |
| color: #333; | |
| image-rendering: pixelated; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .pixel-grid { | |
| background-image: | |
| linear-gradient(var(--eink-pixel) 0.1px, transparent 0.1px), | |
| linear-gradient(90deg, var(--eink-pixel) 0.1px, transparent 0.1px); | |
| background-size: 4px 4px; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.15; | |
| pointer-events: none; | |
| } | |
| .godzilla-sprite { | |
| image-rendering: pixelated; | |
| filter: contrast(1.2) brightness(0.9); | |
| transition: transform 0.3s ease; | |
| } | |
| .button { | |
| background: linear-gradient(145deg, #5a5a5a, #3a3a3a); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | |
| transition: all 0.1s ease; | |
| } | |
| .button:active { | |
| transform: translateY(2px); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .screen-glare { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%); | |
| pointer-events: none; | |
| } | |
| .scanlines { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| to bottom, | |
| transparent 95%, | |
| rgba(0,0,0,0.1) 96% | |
| ); | |
| background-size: 100% 3px; | |
| pointer-events: none; | |
| animation: scanline 8s linear infinite; | |
| } | |
| @keyframes scanline { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 0 100%; } | |
| } | |
| .status-bar { | |
| border-bottom: 2px solid var(--eink-highlight); | |
| padding: 0.25rem 0.5rem; | |
| } | |
| .health-bar { | |
| background: linear-gradient(90deg, #ff5555, #ff0000); | |
| height: 6px; | |
| border-radius: 3px; | |
| } | |
| .hunger-bar { | |
| background: linear-gradient(90deg, #ffaa00, #ff7700); | |
| height: 6px; | |
| border-radius: 3px; | |
| } | |
| .energy-bar { | |
| background: linear-gradient(90deg, #55ff55, #00aa00); | |
| height: 6px; | |
| border-radius: 3px; | |
| } | |
| .mood-indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| box-shadow: 0 0 4px currentColor; | |
| } | |
| .mood-happy { background-color: #ff5555; color: #ff0000; } | |
| .mood-neutral { background-color: #aaaaaa; color: #666666; } | |
| .mood-angry { background-color: #55ff55; color: #00aa00; } | |
| .pixel-border { | |
| border: 2px solid var(--eink-text); | |
| box-shadow: | |
| inset 2px 2px 0 var(--eink-highlight), | |
| inset -2px -2px 0 var(--eink-highlight); | |
| } | |
| .retro-text { | |
| text-shadow: 1px 1px 0 var(--eink-highlight); | |
| letter-spacing: 0.5px; | |
| } | |
| .action-button { | |
| transition: all 0.1s ease; | |
| border: 2px solid rgba(0,0,0,0.2); | |
| box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); | |
| } | |
| .action-button:active { | |
| transform: scale(0.95); | |
| filter: brightness(0.9); | |
| box-shadow: inset 0 0 4px rgba(0,0,0,0.3); | |
| } | |
| .godzilla-evolution { | |
| animation: pulse 1s infinite alternate, glow 1.5s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| from { transform: scale(1); } | |
| to { transform: scale(1.05); } | |
| } | |
| @keyframes glow { | |
| from { filter: drop-shadow(0 0 4px rgba(255, 100, 0, 0.7)); } | |
| to { filter: drop-shadow(0 0 10px rgba(255, 200, 0, 0.9)); } | |
| } | |
| .damage-effect { | |
| animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; | |
| } | |
| @keyframes shake { | |
| 10%, 90% { transform: translateX(-1px); } | |
| 20%, 80% { transform: translateX(2px); } | |
| 30%, 50%, 70% { transform: translateX(-3px); } | |
| 40%, 60% { transform: translateX(3px); } | |
| } | |
| .attack-effect { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle, rgba(255,100,0,0.8) 0%, transparent 70%); | |
| opacity: 0; | |
| pointer-events: none; | |
| animation: attackFlash 0.5s ease-out; | |
| } | |
| @keyframes attackFlash { | |
| 0% { opacity: 0; transform: scale(0.5); } | |
| 50% { opacity: 0.8; transform: scale(1); } | |
| 100% { opacity: 0; transform: scale(1.2); } | |
| } | |
| .sleep-effect { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle, rgba(0,100,255,0.1) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .sleep-bubble { | |
| position: absolute; | |
| background-color: rgba(255,255,255,0.7); | |
| border-radius: 50%; | |
| animation: floatUp 4s linear infinite; | |
| } | |
| @keyframes floatUp { | |
| 0% { transform: translateY(0) scale(0.5); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { transform: translateY(-100px) scale(1.2); opacity: 0; } | |
| } | |
| .progress-container { | |
| position: relative; | |
| height: 8px; | |
| background-color: rgba(0,0,0,0.1); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #ff5555, #ff0000); | |
| transition: width 0.3s ease; | |
| } | |
| .evolution-points { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 0.6rem; | |
| color: white; | |
| text-shadow: 1px 1px 0 #000; | |
| } | |
| .menu-screen { | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.7); | |
| z-index: 10; | |
| padding: 1rem; | |
| } | |
| .menu-content { | |
| background-color: var(--lcd-bg); | |
| border: 2px solid #000; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| height: 100%; | |
| overflow-y: auto; | |
| } | |
| .menu-item { | |
| padding: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| background-color: rgba(255,255,255,0.3); | |
| border-radius: 0.25rem; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .menu-item:hover { | |
| background-color: rgba(255,255,255,0.5); | |
| } | |
| .menu-item:active { | |
| transform: scale(0.98); | |
| } | |
| .close-menu { | |
| position: absolute; | |
| top: 0.5rem; | |
| right: 0.5rem; | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| .city-background { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 30%; | |
| background-color: #555; | |
| background-image: | |
| linear-gradient(90deg, #666 1px, transparent 1px), | |
| linear-gradient(#666 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| z-index: -1; | |
| } | |
| .explosion { | |
| position: absolute; | |
| width: 100px; | |
| height: 100px; | |
| background: radial-gradient(circle, rgba(255,200,0,0.8) 0%, rgba(255,100,0,0.8) 50%, transparent 70%); | |
| border-radius: 50%; | |
| transform: scale(0); | |
| animation: explode 0.5s ease-out forwards; | |
| pointer-events: none; | |
| z-index: 5; | |
| } | |
| @keyframes explode { | |
| 0% { transform: scale(0); opacity: 1; } | |
| 100% { transform: scale(3); opacity: 0; } | |
| } | |
| .battle-screen { | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(255,0,0,0.1); | |
| z-index: 10; | |
| } | |
| .enemy { | |
| position: absolute; | |
| right: 20%; | |
| bottom: 30%; | |
| width: 60px; | |
| height: 60px; | |
| background-color: #333; | |
| border-radius: 50%; | |
| z-index: 2; | |
| } | |
| .battle-message { | |
| position: absolute; | |
| bottom: 10%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: rgba(0,0,0,0.7); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.5rem; | |
| text-align: center; | |
| z-index: 11; | |
| } | |
| .battle-options { | |
| position: absolute; | |
| bottom: 5%; | |
| left: 0; | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| z-index: 11; | |
| } | |
| .battle-option { | |
| background-color: rgba(255,255,255,0.8); | |
| border: 2px solid #000; | |
| border-radius: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .battle-option:hover { | |
| background-color: rgba(255,255,255,1); | |
| } | |
| .battle-option:active { | |
| transform: scale(0.95); | |
| } | |
| </style> | |
| </head> | |
| <body class="flex items-center justify-center min-h-screen p-4"> | |
| <div class="device rounded-3xl p-6 relative w-full max-w-md"> | |
| <!-- Upper E-ink Display --> | |
| <div class="screen-border rounded-xl p-3 mb-4"> | |
| <div class="eink-screen rounded-lg pixel-border h-64 relative overflow-hidden"> | |
| <div class="pixel-grid"></div> | |
| <div class="scanlines"></div> | |
| <div class="screen-glare"></div> | |
| <div class="city-background"></div> | |
| <!-- Status Bar --> | |
| <div class="status-bar flex justify-between items-center px-2 py-1"> | |
| <div class="text-xs retro-text">GODZILLA-TAMA</div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="flex items-center space-x-1"> | |
| <div class="mood-indicator mood-happy"></div> | |
| <span class="text-xs retro-text" id="mood-text">HAPPY</span> | |
| </div> | |
| <div class="text-xs retro-text">AGE: <span id="age">1</span></div> | |
| </div> | |
| </div> | |
| <!-- Main Display Content --> | |
| <div class="flex flex-col items-center justify-center h-40 relative"> | |
| <div id="godzilla-container" class="relative"> | |
| <img id="godzilla-sprite" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48c3R5bGU+LnN0MHtmaWxsOiMzMzM7fTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTUwIDIwYy0xNiAwLTMwIDE0LTMwIDMwczE0IDMwIDMwIDMwIDMwLTE0IDMwLTMwUzY2IDIwIDUwIDIwem0wIDUwYy0xMSAwLTIwLTktMjAtMjBzOS0yMCAyMC0yMCAyMCA5IDIwIDIwLTkgMjAtMjAgMjB6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTUwIDQwYy01IDAtMTAgNS0xMCAxMHM1IDEwIDEwIDEwIDEwLTUgMTAtMTAtNS0xMC0xMC0xMHptMCAxNWMtMyAwLTUgMi01IDVzMiA1IDUgNSA1LTIgNS01LTItNS01LTV6Ii8+PC9zdmc+" class="godzilla-sprite w-32 h-32" alt="Baby Godzilla"> | |
| <div id="damage-overlay" class="absolute inset-0 bg-red-500 opacity-0 pointer-events-none"></div> | |
| <div id="sleep-overlay" class="absolute inset-0 pointer-events-none" style="display: none;"></div> | |
| <div id="attack-effect" class="attack-effect"></div> | |
| </div> | |
| <div id="action-text" class="text-sm mt-2 retro-text px-2 py-1 bg-white bg-opacity-70 rounded">*RAWR!*</div> | |
| </div> | |
| <!-- Stats Bars --> | |
| <div class="absolute bottom-0 left-0 right-0 px-2 pb-2"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>HP</span> | |
| <span>HGR</span> | |
| <span>NRG</span> | |
| <span>EVOL</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <div class="health-bar flex-grow" id="health-bar"></div> | |
| <div class="hunger-bar flex-grow" id="hunger-bar"></div> | |
| <div class="energy-bar flex-grow" id="energy-bar"></div> | |
| <div class="progress-container w-16" id="evolution-container"> | |
| <div class="progress-bar" id="evolution-bar"></div> | |
| <div class="evolution-points" id="evolution-text">0%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Battle Screen (Hidden by default) --> | |
| <div id="battle-screen" class="battle-screen"> | |
| <div class="enemy" id="enemy"></div> | |
| <div class="battle-message" id="battle-message"></div> | |
| <div class="battle-options"> | |
| <div class="battle-option" id="battle-attack">ATTACK</div> | |
| <div class="battle-option" id="battle-special">SPECIAL</div> | |
| <div class="battle-option" id="battle-flee">FLEE</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lower LCD Display --> | |
| <div class="screen-border rounded-xl p-3"> | |
| <div class="lcd-screen rounded-lg pixel-border h-40 relative overflow-hidden"> | |
| <div class="pixel-grid"></div> | |
| <div class="scanlines"></div> | |
| <!-- Menu Buttons --> | |
| <div class="grid grid-cols-3 gap-2 p-2 h-full"> | |
| <button id="feed-btn" class="action-button bg-yellow-400 rounded-md flex flex-col items-center justify-center p-1 hover:bg-yellow-500"> | |
| <i class="fas fa-hamburger text-xl"></i> | |
| <span class="text-xs mt-1">FEED</span> | |
| </button> | |
| <button id="train-btn" class="action-button bg-blue-400 rounded-md flex flex-col items-center justify-center p-1 hover:bg-blue-500"> | |
| <i class="fas fa-dumbbell text-xl"></i> | |
| <span class="text-xs mt-1">TRAIN</span> | |
| </button> | |
| <button id="battle-btn" class="action-button bg-red-400 rounded-md flex flex-col items-center justify-center p-1 hover:bg-red-500"> | |
| <i class="fas fa-fist-raised text-xl"></i> | |
| <span class="text-xs mt-1">BATTLE</span> | |
| </button> | |
| <button id="sleep-btn" class="action-button bg-purple-400 rounded-md flex flex-col items-center justify-center p-1 hover:bg-purple-500"> | |
| <i class="fas fa-moon text-xl"></i> | |
| <span class="text-xs mt-1">SLEEP</span> | |
| </button> | |
| <button id="stats-btn" class="action-button bg-green-400 rounded-md flex flex-col items-center justify-center p-1 hover:bg-green-500"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| <span class="text-xs mt-1">STATS</span> | |
| </button> | |
| <button id="special-btn" class="action-button bg-pink-400 rounded-md flex flex-col items-center justify-center p-1 hover:bg-pink-500"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| <span class="text-xs mt-1">SPECIAL</span> | |
| </button> | |
| </div> | |
| <!-- Menu Screen (Hidden by default) --> | |
| <div id="menu-screen" class="menu-screen"> | |
| <div class="menu-content"> | |
| <button class="close-menu" id="close-menu">×</button> | |
| <h2 class="text-lg mb-4 text-center border-b-2 border-black pb-2">GODZILLA STATS</h2> | |
| <div class="menu-item"> | |
| <div class="font-bold">Stage:</div> | |
| <div id="menu-stage">Baby</div> | |
| </div> | |
| <div class="menu-item"> | |
| <div class="font-bold">Health:</div> | |
| <div id="menu-health">100/100</div> | |
| </div> | |
| <div class="menu-item"> | |
| <div class="font-bold">Hunger:</div> | |
| <div id="menu-hunger">50/100</div> | |
| </div> | |
| <div class="menu-item"> | |
| <div class="font-bold">Energy:</div> | |
| <div id="menu-energy">100/100</div> | |
| </div> | |
| <div class="menu-item"> | |
| <div class="font-bold">Evolution:</div> | |
| <div id="menu-evolution">0%</div> | |
| </div> | |
| <div class="menu-item"> | |
| <div class="font-bold">Age:</div> | |
| <div id="menu-age">1 day</div> | |
| </div> | |
| <div class="menu-item"> | |
| <div class="font-bold">Mood:</div> | |
| <div id="menu-mood">Happy</div> | |
| </div> | |
| <div class="menu-item"> | |
| <div class="font-bold">Battles Won:</div> | |
| <div id="menu-battles">0</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Physical Buttons --> | |
| <div class="flex justify-between mt-4 px-4"> | |
| <div class="flex space-x-6"> | |
| <button id="left-btn" class="button rounded-full w-12 h-12 flex items-center justify-center hover:bg-gray-600"> | |
| <i class="fas fa-arrow-left text-xl"></i> | |
| </button> | |
| <button id="right-btn" class="button rounded-full w-12 h-12 flex items-center justify-center hover:bg-gray-600"> | |
| <i class="fas fa-arrow-right text-xl"></i> | |
| </button> | |
| </div> | |
| <button id="select-btn" class="button rounded-full w-12 h-12 flex items-center justify-center hover:bg-gray-600"> | |
| <i class="fas fa-circle text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Device Details --> | |
| <div class="absolute top-0 left-0 right-0 flex justify-center mt-2"> | |
| <div class="bg-gray-800 rounded-full w-16 h-4"></div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 flex justify-center mb-1"> | |
| <div class="text-xs text-gray-400">©1997 BANDAI TOHO</div> | |
| </div> | |
| </div> | |
| <script> | |
| // Enhanced Game State | |
| const state = { | |
| health: 100, | |
| maxHealth: 100, | |
| hunger: 50, | |
| maxHunger: 100, | |
| energy: 100, | |
| maxEnergy: 100, | |
| age: 1, | |
| stage: 'baby', | |
| mood: 'happy', | |
| isSleeping: false, | |
| isBattling: false, | |
| evolutionPoints: 0, | |
| maxEvolutionPoints: 30, | |
| lastFed: Date.now(), | |
| lastTrained: Date.now(), | |
| lastAction: Date.now(), | |
| battlesWon: 0, | |
| battlesLost: 0, | |
| enemiesDefeated: [], | |
| specialAttackReady: true, | |
| evolutionReady: false, | |
| sleepBubbles: [] | |
| }; | |
| // Enhanced Godzilla Sprites (Base64 encoded SVGs) | |
| const sprites = { | |
| baby: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48c3R5bGU+LnN0MHtmaWxsOiMzMzM7fTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTY0IDI0Yy0yMiAwLTQwIDE4LTQwIDQwczE4IDQwIDQwIDQwIDQwLTE4IDQwLTQwUzg2IDI0IDY0IDI0em0wIDY0Yy0xMyAwLTI0LTExLTI0LTI0czExLTI0IDI0LTI0IDI0IDExIDI0IDI0LTExIDI0LTI0IDI0eiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02NCA0OGMtOSAwLTE2IDctMTYgMTZzNyAxNiAxNiAxNiAxNi03IDE2LTE2LTctMTYtMTYtMTZ6bTAgMjRjLTQgMC04LTQtOC04czQtOCA4LTggOCA0IDggOC00IDgtOCA4eiIvPjwvc3ZnPg==", | |
| teen: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48c3R5bGU+LnN0MHtmaWxsOiMzMzM7fS5zdDF7ZmlsbDojNTU1O308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01NiAzMmMtMTQgMC0yNCAxMC0yNCAyNHMxMCAyNCAyNCAyNCAyNC0xMCAyNC0yNC0xMC0yNC0yNC0yNHptMCA0M2MtMTAgMC0xOS05LTE5LTE5czktMTkgMTktMTkgMTkgOSAxOSAxOS05IDE5LTE5IDE5eiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01NiAzN2MtMTEgMC0yMCA5LTIwIDIwczkgMjAgMjAgMjAgMjAtOSAyMC0yMC05LTIwLTIwLTIwem0wIDI3Yy00IDAtOS00LTktOXM0LTkgOS05IDkgNCA5IDktNCA5LTkgOXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTAgNjRoMTJ2MTJINTB6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTU2IDY0djE2Ii8+PC9zdmc+", | |
| adult: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48c3R5bGU+LnN0MHtmaWxsOiMzMzM7fS5zdDF7ZmlsbDojNTU1O308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NCAxNmMtMTQgMC0yNCAxMC0yNCAyNHMxMCAyNCAyNCAyNCAyNC0xMCAyNC0yNC0xMC0yNC0yNC0yNHptMCA0M2MtMTAgMC0xOS05LTE5LTE5czktMTkgMTktMTkgMTkgOSAxOSAxOS05IDE5LTE5IDE5eiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik00NCAyMWMtMTEgMC0yMCA5LTIwIDIwczkgMjAgMjAgMjAgMjAtOSAyMC0yMC05LTIwLTIwLTIwem0wIDI3Yy00IDAtOS00LTktOXM0LTkgOS05IDkgNCA5IDktNCA5LTkgOXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzggNjRoMTJ2MTZIMzh6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTQ0IDY0djE2Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTM4IDMyaDZ2MTZoLTYiLz48L3N2Zz4=", | |
| king: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48c3R5bGU+LnN0MHtmaWxsOiMzMzM7fS5zdDF7ZmlsbDojNTU1O308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zMiA4Yy0xNCAwLTI0IDEwLTI0IDI0czEwIDI0IDI0IDI0IDI0LTEwIDI0LTI0LTEwLTI0LTI0LTI0em0wIDQzYy0xMCAwLTE5LTktMTktMTlzOS0xOSAxOS0xOSAxOSA5IDE5IDE5LTkgMTktMTkgMTl6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTMyIDEzYy0xMSAwLTIwIDktMjAgMjBzOSAyMCAyMCAyMCAyMC05IDIwLTIwLTktMjAtMjAtMjB6bTAgMjdjLTQgMC05LTQtOS05czQtOSA5LTkgOSA0IDkgOS00IDktOSA5eiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yNiA0OGgxMnYyNEgyNnoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzIgNDh2MjQiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjYgMTZoNnYxNkgyNnoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzIgOHY2Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMyIDhoNiIvPjwvc3ZnPg==" | |
| }; | |
| // Enemies for battle | |
| const enemies = { | |
| mothra: { name: "Mothra", health: 30, attack: 5, sprite: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZmlsbD0iI2ZmYzBjMCIgZD0iTTMyIDMyYy04IDAtMTYgOC0xNiAxNnM4IDE2IDE2IDE2IDE2LTggMTYtMTYtOC0xNi0xNi0xNnptMCAyNGMtNCAwLTgtNC04LThzNC04IDgtOCA4IDQgOCA4LTQgOC04IDh6Ii8+PHBhdGggZmlsbD0iI2ZmMDAwMCIgZD0iTTMyIDM2Yy0yIDAtNCAyLTQgNHMyIDQgNCA0IDQtMiA0LTQtMi00LTQtNHoiLz48L3N2Zz4=" }, | |
| ghidorah: { name: "Ghidorah", health: 50, attack: 8, sprite: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZmlsbD0iI2ZmYzBjMCIgZD0iTTMyIDMyYy04IDAtMTYgOC0xNiAxNnM4IDE2IDE2IDE2IDE2LTggMTYtMTYtOC0xNi0xNi0xNnptMCAyNGMtNCAwLTgtNC04LThzNC04IDgtOCA4IDQgOCA4LTQgOC04IDh6Ii8+PHBhdGggZmlsbD0iI2ZmMDAwMCIgZD0iTTMyIDM2Yy0yIDAtNCAyLTQgNHMyIDQgNCA0IDQtMiA0LTQtMi00LTQtNHoiLz48L3N2Zz4=" }, | |
| mechagodzilla: { name: "Mechagodzilla", health: 70, attack: 12, sprite: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZmlsbD0iI2ZmYzBjMCIgZD0iTTMyIDMyYy04IDAtMTYgOC0xNiAxNnM4IDE2IDE2IDE2IDE2LTggMTYtMTYtOC0xNi0xNi0xNnptMCAyNGMtNCAwLTgtNC04LThzNC04IDgtOCA4IDQgOCA4LTQgOC04IDh6Ii8+PHBhdGggZmlsbD0iI2ZmMDAwMCIgZD0iTTMyIDM2Yy0yIDAtNCAyLTQgNHMyIDQgNCA0IDQtMiA0LTQtMi00LTQtNHoiLz48L3N2Zz4=" } | |
| }; | |
| // Action Messages | |
| const messages = { | |
| happy: ["*RAWR!*", "*STOMP STOMP*", "Feed me humans!", "Let's destroy Tokyo!", "I feel powerful!", "Atomic breath ready!", "King of monsters!"], | |
| neutral: ["...zzz...", "Hmm...", "I'm bored", "What now?", "Not bad", "Maybe I'll nap", "Where's my snack?"], | |
| angry: ["GRRRR!!!", "I'll destroy you!", "RAAAAH!", "FIGHT ME!", "I'M HUNGRY!", "OUT OF MY WAY!", "DESTROY!!!"] | |
| }; | |
| // Initialize game | |
| function initGame() { | |
| updateDisplay(); | |
| setInterval(gameLoop, 3000); | |
| setInterval(decrementStats, 10000); | |
| setInterval(updateSleepBubbles, 1000); | |
| // Button event listeners | |
| document.getElementById('feed-btn').addEventListener('click', feed); | |
| document.getElementById('train-btn').addEventListener('click', train); | |
| document.getElementById('battle-btn').addEventListener('click', startBattle); | |
| document.getElementById('sleep-btn').addEventListener('click', toggleSleep); | |
| document.getElementById('stats-btn').addEventListener('click', showStats); | |
| document.getElementById('special-btn').addEventListener('click', specialAction); | |
| document.getElementById('left-btn').addEventListener('click', () => navigate('left')); | |
| document.getElementById('right-btn').addEventListener('click', () => navigate('right')); | |
| document.getElementById('select-btn').addEventListener('click', selectAction); | |
| document.getElementById('close-menu').addEventListener('click', closeMenu); | |
| // Battle event listeners | |
| document.getElementById('battle-attack').addEventListener('click', battleAttack); | |
| document.getElementById('battle-special').addEventListener('click', battleSpecial); | |
| document.getElementById('battle-flee').addEventListener('click', fleeBattle); | |
| } | |
| // Main game loop | |
| function gameLoop() { | |
| if (state.isSleeping) { | |
| state.energy = Math.min(state.maxEnergy, state.energy + 15); | |
| state.health = Math.min(state.maxHealth, state.health + 5); | |
| if (Math.random() > 0.85) toggleSleep(); // Wake up randomly | |
| } else { | |
| state.hunger = Math.min(state.maxHunger, state.hunger + 5); | |
| state.energy = Math.max(0, state.energy - 2); | |
| } | |
| // Check for evolution | |
| checkEvolution(); | |
| // Update mood | |
| updateMood(); | |
| // Random events | |
| if (!state.isSleeping && !state.isBattling && Math.random() > 0.9) { | |
| randomEvent(); | |
| } | |
| updateDisplay(); | |
| } | |
| // Decrement stats over time | |
| function decrementStats() { | |
| if (!state.isSleeping && !state.isBattling) { | |
| state.health = Math.max(0, state.health - 1); | |
| if (state.hunger > 80) { | |
| state.health = Math.max(0, state.health - 3); | |
| } | |
| if (state.energy < 20) { | |
| state.health = Math.max(0, state.health - 2); | |
| } | |
| } | |
| // Age over time | |
| if (Date.now() - state.lastAction > 60000) { | |
| state.age++; | |
| state.lastAction = Date.now(); | |
| } | |
| updateDisplay(); | |
| } | |
| // Update all display elements | |
| function updateDisplay() { | |
| // Update bars | |
| document.getElementById('health-bar').style.width = `${(state.health / state.maxHealth) * 100}%`; | |
| document.getElementById('hunger-bar').style.width = `${(state.hunger / state.maxHunger) * 100}%`; | |
| document.getElementById('energy-bar').style.width = `${(state.energy / state.maxEnergy) * 100}%`; | |
| // Update evolution progress | |
| const evolutionPercent = Math.min(100, (state.evolutionPoints / state.maxEvolutionPoints) * 100); | |
| document.getElementById('evolution-bar').style.width = `${evolutionPercent}%`; | |
| document.getElementById('evolution-text').textContent = `${Math.floor(evolutionPercent)}%`; | |
| // Update age | |
| document.getElementById('age').textContent = state.age; | |
| // Update sprite | |
| document.getElementById('godzilla-sprite').src = sprites[state.stage]; | |
| // Update mood indicator and text | |
| const moodIndicator = document.querySelector('.mood-indicator'); | |
| moodIndicator.className = 'mood-indicator'; | |
| moodIndicator.classList.add(`mood-${state.mood}`); | |
| document.getElementById('mood-text').textContent = state.mood.toUpperCase(); | |
| // Random action text | |
| if (!state.isBattling && Date.now() - state.lastAction > 5000) { | |
| showRandomMessage(); | |
| } | |
| // Update sleep overlay | |
| const sleepOverlay = document.getElementById('sleep-overlay'); | |
| if (state.isSleeping) { | |
| sleepOverlay.style.display = 'block'; | |
| } else { | |
| sleepOverlay.style.display = 'none'; | |
| } | |
| // Update menu stats if open | |
| if (document.getElementById('menu-screen').style.display === 'block') { | |
| updateMenuStats(); | |
| } | |
| } | |
| // Update menu stats | |
| function updateMenuStats() { | |
| document.getElementById('menu-stage').textContent = state.stage.charAt(0).toUpperCase() + state.stage.slice(1); | |
| document.getElementById('menu-health').textContent = `${state.health}/${state.maxHealth}`; | |
| document.getElementById('menu-hunger').textContent = `${state.hunger}/${state.maxHunger}`; | |
| document.getElementById('menu-energy').textContent = `${state.energy}/${state.maxEnergy}`; | |
| document.getElementById('menu-evolution').textContent = `${Math.floor((state.evolutionPoints / state.maxEvolutionPoints) * 100)}%`; | |
| document.getElementById('menu-age').textContent = `${state.age} day${state.age !== 1 ? 's' : ''}`; | |
| document.getElementById('menu-mood').textContent = state.mood.charAt(0).toUpperCase() + state.mood.slice(1); | |
| document.getElementById('menu-battles').textContent = state.battlesWon; | |
| } | |
| // Show random message based on mood | |
| function showRandomMessage() { | |
| const messagesArray = messages[state.mood]; | |
| const randomMessage = messagesArray[Math.floor(Math.random() * messagesArray.length)]; | |
| showMessage(randomMessage); | |
| } | |
| // Update mood based on stats | |
| function updateMood() { | |
| if (state.health < 30 || state.hunger > 80) { | |
| state.mood = 'angry'; | |
| } else if (state.energy < 30 || state.hunger > 60) { | |
| state.mood = 'neutral'; | |
| } else { | |
| state.mood = 'happy'; | |
| } | |
| } | |
| // Check for evolution | |
| function checkEvolution() { | |
| if (state.evolutionPoints >= state.maxEvolutionPoints && !state.evolutionReady) { | |
| state.evolutionReady = true; | |
| showMessage("READY TO EVOLVE!"); | |
| document.getElementById('godzilla-container').classList.add('godzilla-evolution'); | |
| } | |
| // Manual evolution when ready | |
| if (state.evolutionReady && document.getElementById('evolution-container').getAttribute('data-click-to-evolve')) { | |
| if (state.stage === 'baby') { | |
| evolveToTeen(); | |
| } else if (state.stage === 'teen') { | |
| evolveToAdult(); | |
| } else if (state.stage === 'adult') { | |
| evolveToKing(); | |
| } | |
| } | |
| } | |
| // Evolve to teen stage | |
| function evolveToTeen() { | |
| state.stage = 'teen'; | |
| state.evolutionPoints = 0; | |
| state.maxEvolutionPoints = 60; | |
| state.evolutionReady = false; | |
| state.maxHealth = 120; | |
| state.health = 120; | |
| state.maxEnergy = 120; | |
| state.energy = 120; | |
| showMessage("EVOLVED TO TEEN!"); | |
| document.getElementById('godzilla-container').classList.remove('godzilla-evolution'); | |
| document.getElementById('evolution-container').removeAttribute('data-click-to-evolve'); | |
| createExplosion(64, 64); | |
| } | |
| // Evolve to adult stage | |
| function evolveToAdult() { | |
| state.stage = 'adult'; | |
| state.evolutionPoints = 0; | |
| state.maxEvolutionPoints = 100; | |
| state.evolutionReady = false; | |
| state.maxHealth = 150; | |
| state.health = 150; | |
| state.maxEnergy = 150; | |
| state.energy = 150; | |
| showMessage("EVOLVED TO ADULT!"); | |
| document.getElementById('godzilla-container').classList.remove('godzilla-evolution'); | |
| document.getElementById('evolution-container').removeAttribute('data-click-to-evolve'); | |
| createExplosion(64, 64); | |
| } | |
| // Evolve to king stage | |
| function evolveToKing() { | |
| state.stage = 'king'; | |
| state.evolutionPoints = 0; | |
| state.maxEvolutionPoints = 0; // Max evolution reached | |
| state.evolutionReady = false; | |
| state.maxHealth = 200; | |
| state.health = 200; | |
| state.maxEnergy = 200; | |
| state.energy = 200; | |
| showMessage("KING OF MONSTERS!"); | |
| document.getElementById('godzilla-container').classList.remove('godzilla-evolution'); | |
| document.getElementById('evolution-container').removeAttribute('data-click-to-evolve'); | |
| createExplosion(64, 64); | |
| } | |
| // Feed action | |
| function feed() { | |
| if (state.isSleeping) { | |
| showMessage("Zzz... sleeping"); | |
| return; | |
| } | |
| if (state.isBattling) { | |
| showMessage("Can't feed during battle!"); | |
| return; | |
| } | |
| state.hunger = Math.max(0, state.hunger - 30); | |
| state.health = Math.min(state.maxHealth, state.health + 5); | |
| state.lastFed = Date.now(); | |
| state.lastAction = Date.now(); | |
| // Animate eating | |
| document.getElementById('godzilla-sprite').style.transform = 'scale(1.1)'; | |
| setTimeout(() => { | |
| document.getElementById('godzilla-sprite').style.transform = 'scale(1)'; | |
| }, 300); | |
| showMessage("YUM! Nuclear waste!"); | |
| updateDisplay(); | |
| } | |
| // Train action | |
| function train() { | |
| if (state.isSleeping) { | |
| showMessage("Zzz... sleeping"); | |
| return; | |
| } | |
| if (state.isBattling) { | |
| showMessage("Already in battle!"); | |
| return; | |
| } | |
| if (state.energy < 20) { | |
| showMessage("Too tired..."); | |
| return; | |
| } | |
| state.energy = Math.max(0, state.energy - 15); | |
| state.hunger = Math.min(state.maxHunger, state.hunger + 10); | |
| state.evolutionPoints += 5; | |
| state.lastTrained = Date.now(); | |
| state.lastAction = Date.now(); | |
| // Animate training | |
| document.getElementById('godzilla-sprite').style.transform = 'translateY(-5px)'; | |
| setTimeout(() => { | |
| document.getElementById('godzilla-sprite').style.transform = 'translateY(0)'; | |
| }, 300); | |
| showMessage("Training my atomic breath!"); | |
| updateDisplay(); | |
| } | |
| // Start battle | |
| function startBattle() { | |
| if (state.isSleeping) { | |
| showMessage("Zzz... sleeping"); | |
| return; | |
| } | |
| if (state.isBattling) { | |
| showMessage("Already in battle!"); | |
| return; | |
| } | |
| if (state.energy < 10) { | |
| showMessage("Need more energy..."); | |
| return; | |
| } | |
| state.isBattling = true; | |
| state.battleEnemy = getRandomEnemy(); | |
| document.getElementById('battle-screen').style.display = 'block'; | |
| document.getElementById('enemy').style.backgroundImage = `url('${state.battleEnemy.sprite}')`; | |
| document.getElementById('battle-message').textContent = `A wild ${state.battleEnemy.name} appears!`; | |
| state.lastAction = Date.now(); | |
| updateDisplay(); | |
| } | |
| // Get random enemy | |
| function getRandomEnemy() { | |
| const enemyKeys = Object.keys(enemies); | |
| const randomKey = enemyKeys[Math.floor(Math.random() * enemyKeys.length)]; | |
| return { | |
| ...enemies[randomKey], | |
| currentHealth: enemies[randomKey].health | |
| }; | |
| } | |
| // Battle attack | |
| function battleAttack() { | |
| if (!state.isBattling) return; | |
| // Godzilla attacks | |
| const godzillaDamage = Math.floor(Math.random() * 10) + 5 + (state.stage === 'teen' ? 5 : state.stage === 'adult' ? 10 : state.stage === 'king' ? 15 : 0); | |
| state.battleEnemy.currentHealth = Math.max(0, state.battleEnemy.currentHealth - godzillaDamage); | |
| // Enemy attacks back | |
| const enemyDamage = Math.floor(Math.random() * state.battleEnemy.attack) + 1; | |
| state.health = Math.max(0, state.health - enemyDamage); | |
| // Update battle message | |
| document.getElementById('battle-message').textContent = | |
| `You hit ${state.battleEnemy.name} for ${godzillaDamage} damage!\n` + | |
| `${state.battleEnemy.name} hits you for ${enemyDamage} damage!`; | |
| // Show attack effects | |
| showAttackEffect(); | |
| showDamage(); | |
| createExplosion(80, 40); | |
| // Check battle outcome | |
| checkBattleOutcome(); | |
| state.lastAction = Date.now(); | |
| updateDisplay(); | |
| } | |
| // Battle special attack | |
| function battleSpecial() { | |
| if (!state.isBattling || !state.specialAttackReady) return; | |
| // Godzilla special attack | |
| const godzillaDamage = Math.floor(Math.random() * 20) + 15 + (state.stage === 'teen' ? 5 : state.stage === 'adult' ? 10 : state.stage === 'king' ? 20 : 0); | |
| state.battleEnemy.currentHealth = Math.max(0, state.battleEnemy.currentHealth - godzillaDamage); | |
| // Update battle message | |
| document.getElementById('battle-message').textContent = | |
| `ATOMIC BREATH! You hit ${state.battleEnemy.name} for ${godzillaDamage} damage!`; | |
| // Show special attack effects | |
| showAttackEffect(); | |
| createExplosion(80, 40); | |
| document.getElementById('godzilla-container').classList.add('godzilla-evolution'); | |
| setTimeout(() => { | |
| document.getElementById('godzilla-container').classList.remove('godzilla-evolution'); | |
| }, 1000); | |
| state.specialAttackReady = false; | |
| setTimeout(() => { | |
| state.specialAttackReady = true; | |
| }, 30000); | |
| // Check battle outcome | |
| checkBattleOutcome(); | |
| state.lastAction = Date.now(); | |
| updateDisplay(); | |
| } | |
| // Flee battle | |
| function fleeBattle() { | |
| if (!state.isBattling) return; | |
| // 50% chance to flee successfully | |
| if (Math.random() > 0.5) { | |
| document.getElementById('battle-message').textContent = `You fled from ${state.battleEnemy.name}!`; | |
| setTimeout(() => { | |
| endBattle(false); | |
| }, 1500); | |
| } else { | |
| // Enemy gets a free attack | |
| const enemyDamage = Math.floor(Math.random() * state.battleEnemy.attack) + 5; | |
| state.health = Math.max(0, state.health - enemyDamage); | |
| document.getElementById('battle-message').textContent = | |
| `Failed to flee!\n${state.battleEnemy.name} hits you for ${enemyDamage} damage!`; | |
| showDamage(); | |
| } | |
| state.lastAction = Date.now(); | |
| updateDisplay(); | |
| } | |
| // Check battle outcome | |
| function checkBattleOutcome() { | |
| if (state.battleEnemy.currentHealth <= 0) { | |
| // Victory | |
| document.getElementById('battle-message').textContent = `You defeated ${state.battleEnemy.name}!`; | |
| state.evolutionPoints += 10; | |
| state.battlesWon++; | |
| state.enemiesDefeated.push(state.battleEnemy.name); | |
| setTimeout(() => { | |
| endBattle(true); | |
| }, 1500); | |
| } else if (state.health <= 0) { | |
| // Defeat | |
| document.getElementById('battle-message').textContent = `You were defeated by ${state.battleEnemy.name}!`; | |
| state.battlesLost++; | |
| setTimeout(() => { | |
| endBattle(false); | |
| }, 1500); | |
| } | |
| } | |
| // End battle | |
| function endBattle(victory) { | |
| state.isBattling = false; | |
| document.getElementById('battle-screen').style.display = 'none'; | |
| if (victory) { | |
| showMessage(`VICTORY! +10 EP`); | |
| document.getElementById('godzilla-container').classList.add('godzilla-evolution'); | |
| setTimeout(() => { | |
| document.getElementById('godzilla-container').classList.remove('godzilla-evolution'); | |
| }, 1000); | |
| } else { | |
| showMessage("DEFEAT! Need to train more..."); | |
| } | |
| state.lastAction = Date.now(); | |
| updateDisplay(); | |
| } | |
| // Toggle sleep | |
| function toggleSleep() { | |
| state.isSleeping = !state.isSleeping; | |
| state.lastAction = Date.now(); | |
| if (state.isSleeping) { | |
| showMessage("Zzz... sleeping"); | |
| startSleepBubbles(); | |
| } else { | |
| showMessage("I'm awake!"); | |
| stopSleepBubbles(); | |
| } | |
| updateDisplay(); | |
| } | |
| // Create sleep bubbles | |
| function startSleepBubbles() { | |
| state.sleepBubbles = []; | |
| for (let i = 0; i < 3; i++) { | |
| state.sleepBubbles.push({ | |
| x: Math.random() * 100, | |
| y: 100, | |
| size: Math.random() * 10 + 5, | |
| speed: Math.random() * 2 + 1 | |
| }); | |
| } | |
| } | |
| // Update sleep bubbles | |
| function updateSleepBubbles() { | |
| if (!state.isSleeping) return; | |
| const sleepOverlay = document.getElementById('sleep-overlay'); | |
| // Remove old bubbles | |
| while (sleepOverlay.firstChild) { | |
| sleepOverlay.removeChild(sleepOverlay.firstChild); | |
| } | |
| // Update and create new bubbles | |
| for (let i = 0; i < state.sleepBubbles.length; i++) { | |
| const bubble = state.sleepBubbles[i]; | |
| bubble.y -= bubble.speed; | |
| if (bubble.y < -10) { | |
| bubble.y = 110; | |
| bubble.x = Math.random() * 100; | |
| } | |
| const bubbleEl = document.createElement('div'); | |
| bubbleEl.className = 'sleep-bubble'; | |
| bubbleEl.style.left = `${bubble.x}%`; | |
| bubbleEl.style.top = `${bubble.y}%`; | |
| bubbleEl.style.width = `${bubble.size}px`; | |
| bubbleEl.style.height = `${bubble.size}px`; | |
| bubbleEl.style.animationDelay = `${i * 0.5}s`; | |
| sleepOverlay.appendChild(bubbleEl); | |
| } | |
| // Occasionally add new bubbles | |
| if (Math.random() > 0.7 && state.sleepBubbles.length < 10) { | |
| state.sleepBubbles.push({ | |
| x: Math.random() * 100, | |
| y: 100, | |
| size: Math.random() * 10 + 5, | |
| speed: Math.random() * 2 + 1 | |
| }); | |
| } | |
| } | |
| // Stop sleep bubbles | |
| function stopSleepBubbles() { | |
| state.sleepBubbles = []; | |
| const sleepOverlay = document.getElementById('sleep-overlay'); | |
| while (sleepOverlay.firstChild) { | |
| sleepOverlay.removeChild(sleepOverlay.firstChild); | |
| } | |
| } | |
| // Show stats menu | |
| function showStats() { | |
| if (state.isBattling) { | |
| showMessage("Can't check stats in battle!"); | |
| return; | |
| } | |
| updateMenuStats(); | |
| document.getElementById('menu-screen').style.display = 'block'; | |
| state.lastAction = Date.now(); | |
| } | |
| // Close menu | |
| function closeMenu() { | |
| document.getElementById('menu-screen').style.display = 'none'; | |
| state.lastAction = Date.now(); | |
| } | |
| // Special action | |
| function specialAction() { | |
| if (state.isSleeping) { | |
| showMessage("Zzz... sleeping"); | |
| return; | |
| } | |
| if (state.isBattling) { | |
| showMessage("Use special in battle!"); | |
| return; | |
| } | |
| if (state.energy < 50) { | |
| showMessage("Not enough energy!"); | |
| return; | |
| } | |
| if (state.evolutionReady) { | |
| // Trigger evolution | |
| if (state.stage === 'baby') { | |
| evolveToTeen(); | |
| } else if (state.stage === 'teen') { | |
| evolveToAdult(); | |
| } else if (state.stage === 'adult') { | |
| evolveToKing(); | |
| } | |
| return; | |
| } | |
| state.energy = Math.max(0, state.energy - 50); | |
| state.hunger = Math.min(state.maxHunger, state.hunger + 20); | |
| if (state.stage === 'king') { | |
| showMessage("ATOMIC BREATH!!!"); | |
| document.getElementById('godzilla-container').classList.add('godzilla-evolution'); | |
| setTimeout(() => { | |
| document.getElementById('godzilla-container').classList.remove('godzilla-evolution'); | |
| }, 1000); | |
| createExplosion(64, 64); | |
| } else { | |
| showMessage("Special attack practice!"); | |
| document.getElementById('godzilla-container').classList.add('godzilla-evolution'); | |
| setTimeout(() => { | |
| document.getElementById('godzilla-container').classList.remove('godzilla-evolution'); | |
| }, 1000); | |
| } | |
| state.lastAction = Date.now(); | |
| updateDisplay(); | |
| } | |
| // Navigation | |
| function navigate(direction) { | |
| showMessage(direction === 'left' ? "<--" : "-->"); | |
| state.lastAction = Date.now(); | |
| } | |
| // Select action | |
| function selectAction() { | |
| if (state.evolutionReady) { | |
| document.getElementById('evolution-container').setAttribute('data-click-to-evolve', 'true'); | |
| showMessage("CLICK EVOLUTION BAR!"); | |
| } else { | |
| showMessage("SELECTED"); | |
| } | |
| state.lastAction = Date.now(); | |
| } | |
| // Show message | |
| function showMessage(msg) { | |
| const actionText = document.getElementById('action-text'); | |
| actionText.textContent = msg; | |
| actionText.style.animation = 'none'; | |
| void actionText.offsetWidth; // Trigger reflow | |
| actionText.style.animation = 'fadeIn 0.5s'; | |
| } | |
| // Show damage effect | |
| function showDamage() { | |
| const damageOverlay = document.getElementById('damage-overlay'); | |
| damageOverlay.classList.add('damage-effect'); | |
| damageOverlay.style.opacity = '0.3'; | |
| setTimeout(() => { | |
| damageOverlay.style.opacity = '0'; | |
| damageOverlay.classList.remove('damage-effect'); | |
| }, 500); | |
| } | |
| // Show attack effect | |
| function showAttackEffect() { | |
| const attackEffect = document.getElementById('attack-effect'); | |
| attackEffect.style.animation = 'none'; | |
| void attackEffect.offsetWidth; // Trigger reflow | |
| attackEffect.style.animation = 'attackFlash 0.5s ease-out'; | |
| } | |
| // Create explosion effect | |
| function createExplosion(x, y) { | |
| const explosion = document.createElement('div'); | |
| explosion.className = 'explosion'; | |
| explosion.style.left = `${x}px`; | |
| explosion.style.top = `${y}px`; | |
| document.getElementById('godzilla-container').appendChild(explosion); | |
| setTimeout(() => { | |
| explosion.remove(); | |
| }, 500); | |
| } | |
| // Random events | |
| function randomEvent() { | |
| const events = [ | |
| () => { | |
| state.health = Math.min(state.maxHealth, state.health + 10); | |
| showMessage("Found nuclear waste! +10 HP"); | |
| createExplosion(20, 100); | |
| }, | |
| () => { | |
| state.health = Math.max(0, state.health - 10); | |
| showMessage("Attacked by Mothra! -10 HP"); | |
| showDamage(); | |
| createExplosion(64, 64); | |
| }, | |
| () => { | |
| state.evolutionPoints += 5; | |
| showMessage("Training pays off! +5 EP"); | |
| }, | |
| () => { | |
| showMessage("The city fears you!"); | |
| }, | |
| () => { | |
| state.energy = Math.min(state.maxEnergy, state.energy + 20); | |
| showMessage("Energy boost! +20 NRG"); | |
| }, | |
| () => { | |
| if (state.stage === 'king') { | |
| showMessage("Citizens worship you!"); | |
| } else { | |
| showMessage("Grow stronger to rule!"); | |
| } | |
| } | |
| ]; | |
| const randomEvent = events[Math.floor(Math.random() * events.length)]; | |
| randomEvent(); | |
| state.lastAction = Date.now(); | |
| updateDisplay(); | |
| } | |
| // Initialize the game when the page loads | |
| window.onload = initGame; | |
| </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=Deleteduser86/godzilla-toma" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |