Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digital Monster Digivice</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 pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| @keyframes shake { | |
| 0% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px); } | |
| 50% { transform: translateX(5px); } | |
| 75% { transform: translateX(-5px); } | |
| 100% { transform: translateX(0); } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0); } | |
| } | |
| .digivice-screen { | |
| background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); | |
| box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); | |
| } | |
| .digimon-sprite { | |
| image-rendering: pixelated; | |
| } | |
| .button-glow { | |
| box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7); | |
| } | |
| .notification { | |
| animation: pulse 1s infinite; | |
| } | |
| .hungry { | |
| animation: shake 0.5s infinite; | |
| } | |
| .happy { | |
| animation: float 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 min-h-screen flex items-center justify-center p-4"> | |
| <div class="relative w-full max-w-md"> | |
| <!-- Digivice Body --> | |
| <div class="relative bg-black rounded-3xl p-6 shadow-2xl border-4 border-gray-800 overflow-hidden"> | |
| <!-- Antenna --> | |
| <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 w-4 h-8 bg-red-600 rounded-t-full"></div> | |
| <!-- Screen Area --> | |
| <div class="digivice-screen rounded-xl p-4 mb-6 h-64 relative overflow-hidden"> | |
| <!-- Screen Content --> | |
| <div id="screen-content" class="h-full flex flex-col"> | |
| <!-- Default screen will be loaded here --> | |
| </div> | |
| <!-- Screen Glow Effect --> | |
| <div class="absolute inset-0 rounded-xl pointer-events-none" style="box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.2);"></div> | |
| </div> | |
| <!-- Buttons --> | |
| <div class="flex justify-between mb-4"> | |
| <button id="btn-a" class="bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold hover:bg-blue-500 transition-all"> | |
| A | |
| </button> | |
| <button id="btn-b" class="bg-red-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold hover:bg-red-500 transition-all"> | |
| B | |
| </button> | |
| </div> | |
| <div class="flex justify-center space-x-4"> | |
| <button id="btn-up" class="bg-yellow-500 text-gray-900 w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold hover:bg-yellow-400 transition-all"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <button id="btn-down" class="bg-yellow-500 text-gray-900 w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold hover:bg-yellow-400 transition-all"> | |
| <i class="fas fa-arrow-down"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-center mt-4"> | |
| <button id="btn-c" class="bg-green-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold hover:bg-green-500 transition-all"> | |
| C | |
| </button> | |
| </div> | |
| <!-- Speaker Holes --> | |
| <div class="flex justify-center space-x-1 mt-6"> | |
| <div class="w-2 h-2 bg-gray-400 rounded-full"></div> | |
| <div class="w-2 h-2 bg-gray-400 rounded-full"></div> | |
| <div class="w-2 h-2 bg-gray-400 rounded-full"></div> | |
| <div class="w-2 h-2 bg-gray-400 rounded-full"></div> | |
| </div> | |
| <!-- Battery Indicator --> | |
| <div class="absolute bottom-2 right-4 flex items-center"> | |
| <span class="text-xs text-white mr-1">BATT</span> | |
| <div class="w-12 h-4 border border-gray-400 rounded flex overflow-hidden"> | |
| <div id="battery-level" class="bg-green-500 h-full w-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Strap Holder --> | |
| <div class="absolute -left-2 top-1/2 transform -translate-y-1/2 w-4 h-16 bg-gray-700 rounded-l"></div> | |
| <div class="absolute -right-2 top-1/2 transform -translate-y-1/2 w-4 h-16 bg-gray-700 rounded-r"></div> | |
| </div> | |
| <script> | |
| // Digimon Data | |
| const digimonData = { | |
| botamon: { | |
| name: "Botamon", | |
| stage: "Baby I", | |
| sprite: "●", | |
| color: "text-purple-300", | |
| evolutions: ["koromon"], | |
| requirements: { careMistakes: 3, battles: 0, age: 1 } | |
| }, | |
| koromon: { | |
| name: "Koromon", | |
| stage: "Baby II", | |
| sprite: "●", | |
| color: "text-pink-300", | |
| evolutions: ["agumon", "betamon"], | |
| requirements: { careMistakes: 3, battles: 0, age: 2 } | |
| }, | |
| agumon: { | |
| name: "Agumon", | |
| stage: "Child", | |
| sprite: ` | |
| /\\_/\\ | |
| ( o.o ) | |
| > ^ < | |
| `, | |
| color: "text-yellow-300", | |
| evolutions: ["greymon", "tyrannomon"], | |
| requirements: { careMistakes: 5, battles: 5, age: 4 } | |
| }, | |
| betamon: { | |
| name: "Betamon", | |
| stage: "Child", | |
| sprite: ` | |
| /\\_/\\ | |
| ( x.x ) | |
| > ~ < | |
| `, | |
| color: "text-blue-300", | |
| evolutions: ["seadramon", "devimon"], | |
| requirements: { careMistakes: 5, battles: 5, age: 4 } | |
| }, | |
| greymon: { | |
| name: "Greymon", | |
| stage: "Adult", | |
| sprite: ` | |
| /\\___/\\ | |
| ( o.o ) | |
| / ^ \\ | |
| `, | |
| color: "text-orange-300", | |
| evolutions: ["metalgreymon", "skullgreymon"], | |
| requirements: { careMistakes: 8, battles: 15, age: 8 } | |
| }, | |
| tyrannomon: { | |
| name: "Tyrannomon", | |
| stage: "Adult", | |
| sprite: ` | |
| /\\___/\\ | |
| ( O.O ) | |
| / ^ \\ | |
| `, | |
| color: "text-red-300", | |
| evolutions: ["mastertyrannomon"], | |
| requirements: { careMistakes: 8, battles: 15, age: 8 } | |
| }, | |
| seadramon: { | |
| name: "Seadramon", | |
| stage: "Adult", | |
| sprite: ` | |
| ~\\___/~ | |
| ( o.o ) | |
| / ^ \\ | |
| `, | |
| color: "text-teal-300", | |
| evolutions: ["megaseadramon"], | |
| requirements: { careMistakes: 8, battles: 15, age: 8 } | |
| }, | |
| devimon: { | |
| name: "Devimon", | |
| stage: "Adult", | |
| sprite: ` | |
| /\\___/\\ | |
| ( X.X ) | |
| / ^ \\ | |
| `, | |
| color: "text-purple-500", | |
| evolutions: ["mydoomon"], | |
| requirements: { careMistakes: 8, battles: 15, age: 8 } | |
| } | |
| }; | |
| // Game State | |
| let gameState = { | |
| currentDigimon: null, | |
| digimonList: [], | |
| selectedDigimon: null, | |
| screen: "main", | |
| stats: { | |
| hunger: 100, | |
| happiness: 100, | |
| energy: 100, | |
| cleanliness: 100, | |
| age: 0, | |
| battles: 0, | |
| wins: 0, | |
| losses: 0, | |
| careMistakes: 0, | |
| lastFed: Date.now(), | |
| lastPlayed: Date.now(), | |
| lastCleaned: Date.now(), | |
| lastSleep: Date.now() | |
| }, | |
| time: { | |
| day: 1, | |
| hour: 8, | |
| minute: 0, | |
| paused: false | |
| }, | |
| notifications: [] | |
| }; | |
| // DOM Elements | |
| const screenContent = document.getElementById('screen-content'); | |
| const batteryLevel = document.getElementById('battery-level'); | |
| const buttons = { | |
| a: document.getElementById('btn-a'), | |
| b: document.getElementById('btn-b'), | |
| c: document.getElementById('btn-c'), | |
| up: document.getElementById('btn-up'), | |
| down: document.getElementById('btn-down') | |
| }; | |
| // Initialize the game | |
| function initGame() { | |
| // Start with a new Digimon | |
| createNewDigimon(); | |
| // Start game loop | |
| setInterval(gameLoop, 1000); | |
| // Set up button listeners | |
| setupButtons(); | |
| // Initial render | |
| renderScreen(); | |
| } | |
| // Game loop | |
| function gameLoop() { | |
| if (gameState.time.paused) return; | |
| // Update time | |
| gameState.time.minute += 5; | |
| if (gameState.time.minute >= 60) { | |
| gameState.time.minute = 0; | |
| gameState.time.hour++; | |
| if (gameState.time.hour >= 24) { | |
| gameState.time.hour = 0; | |
| gameState.time.day++; | |
| gameState.stats.age++; | |
| checkEvolution(); | |
| } | |
| } | |
| // Update stats | |
| updateStats(); | |
| // Check for notifications | |
| checkNotifications(); | |
| // Update battery (random for effect) | |
| if (Math.random() < 0.01) { | |
| updateBattery(); | |
| } | |
| // Render | |
| renderScreen(); | |
| } | |
| // Update Digimon stats over time | |
| function updateStats() { | |
| const now = Date.now(); | |
| const hoursSinceFed = (now - gameState.stats.lastFed) / (1000 * 60 * 60); | |
| const hoursSincePlayed = (now - gameState.stats.lastPlayed) / (1000 * 60 * 60); | |
| const hoursSinceCleaned = (now - gameState.stats.lastCleaned) / (1000 * 60 * 60); | |
| const hoursSinceSleep = (now - gameState.stats.lastSleep) / (1000 * 60 * 60); | |
| // Hunger decreases over time | |
| if (hoursSinceFed > 2) { | |
| gameState.stats.hunger = Math.max(0, gameState.stats.hunger - 5); | |
| if (gameState.stats.hunger < 30 && !gameState.notifications.includes('hungry')) { | |
| gameState.notifications.push('hungry'); | |
| } | |
| } | |
| // Happiness decreases if not played with | |
| if (hoursSincePlayed > 3) { | |
| gameState.stats.happiness = Math.max(0, gameState.stats.happiness - 3); | |
| if (gameState.stats.happiness < 30 && !gameState.notifications.includes('bored')) { | |
| gameState.notifications.push('bored'); | |
| } | |
| } | |
| // Cleanliness decreases over time | |
| if (hoursSinceCleaned > 4) { | |
| gameState.stats.cleanliness = Math.max(0, gameState.stats.cleanliness - 4); | |
| if (gameState.stats.cleanliness < 30 && !gameState.notifications.includes('dirty')) { | |
| gameState.notifications.push('dirty'); | |
| } | |
| } | |
| // Energy decreases if not slept | |
| if (hoursSinceSleep > 6) { | |
| gameState.stats.energy = Math.max(0, gameState.stats.energy - 4); | |
| if (gameState.stats.energy < 30 && !gameState.notifications.includes('tired')) { | |
| gameState.notifications.push('tired'); | |
| } | |
| } | |
| // Care mistakes if stats get too low | |
| if (gameState.stats.hunger <= 0 || gameState.stats.happiness <= 0 || | |
| gameState.stats.cleanliness <= 0 || gameState.stats.energy <= 0) { | |
| gameState.stats.careMistakes++; | |
| // Reset stats to prevent multiple care mistakes at once | |
| if (gameState.stats.hunger <= 0) gameState.stats.hunger = 30; | |
| if (gameState.stats.happiness <= 0) gameState.stats.happiness = 30; | |
| if (gameState.stats.cleanliness <= 0) gameState.stats.cleanliness = 30; | |
| if (gameState.stats.energy <= 0) gameState.stats.energy = 30; | |
| gameState.notifications.push('careMistake'); | |
| } | |
| } | |
| // Check for evolution conditions | |
| function checkEvolution() { | |
| if (!gameState.currentDigimon) return; | |
| const currentDigiData = digimonData[gameState.currentDigimon]; | |
| const requirements = currentDigiData.requirements; | |
| // Check if requirements are met | |
| if (gameState.stats.age >= requirements.age && | |
| gameState.stats.battles >= requirements.battles && | |
| gameState.stats.careMistakes <= requirements.careMistakes) { | |
| // Randomly select an evolution path | |
| const possibleEvolutions = currentDigiData.evolutions; | |
| const nextEvolution = possibleEvolutions[Math.floor(Math.random() * possibleEvolutions.length)]; | |
| // Evolve the Digimon | |
| gameState.currentDigimon = nextEvolution; | |
| gameState.notifications.push('evolution'); | |
| } | |
| } | |
| // Create a new Digimon | |
| function createNewDigimon() { | |
| gameState.currentDigimon = "botamon"; | |
| gameState.digimonList.push({ | |
| name: "Botamon", | |
| type: "botamon", | |
| stats: { ...gameState.stats } | |
| }); | |
| gameState.selectedDigimon = 0; | |
| // Reset stats | |
| gameState.stats = { | |
| hunger: 100, | |
| happiness: 100, | |
| energy: 100, | |
| cleanliness: 100, | |
| age: 0, | |
| battles: 0, | |
| wins: 0, | |
| losses: 0, | |
| careMistakes: 0, | |
| lastFed: Date.now(), | |
| lastPlayed: Date.now(), | |
| lastCleaned: Date.now(), | |
| lastSleep: Date.now() | |
| }; | |
| gameState.notifications.push('newDigimon'); | |
| } | |
| // Update battery level (visual effect only) | |
| function updateBattery() { | |
| const levels = ['w-0', 'w-1/4', 'w-1/2', 'w-3/4', 'w-full']; | |
| const colors = ['bg-red-500', 'bg-yellow-500', 'bg-green-500']; | |
| // Randomly change battery level for effect | |
| const randomLevel = levels[Math.floor(Math.random() * levels.length)]; | |
| const randomColor = colors[Math.floor(Math.random() * colors.length)]; | |
| batteryLevel.className = `h-full ${randomLevel} ${randomColor}`; | |
| } | |
| // Check for notifications | |
| function checkNotifications() { | |
| // Check if any stats are critically low | |
| if (gameState.stats.hunger < 20 && !gameState.notifications.includes('starving')) { | |
| gameState.notifications.push('starving'); | |
| } | |
| if (gameState.stats.happiness < 20 && !gameState.notifications.includes('depressed')) { | |
| gameState.notifications.push('depressed'); | |
| } | |
| if (gameState.stats.cleanliness < 20 && !gameState.notifications.includes('filthy')) { | |
| gameState.notifications.push('filthy'); | |
| } | |
| if (gameState.stats.energy < 20 && !gameState.notifications.includes('exhausted')) { | |
| gameState.notifications.push('exhausted'); | |
| } | |
| } | |
| // Render the current screen | |
| function renderScreen() { | |
| let content = ''; | |
| switch (gameState.screen) { | |
| case 'main': | |
| content = renderMainScreen(); | |
| break; | |
| case 'stats': | |
| content = renderStatsScreen(); | |
| break; | |
| case 'care': | |
| content = renderCareScreen(); | |
| break; | |
| case 'battle': | |
| content = renderBattleScreen(); | |
| break; | |
| case 'digivolve': | |
| content = renderDigivolveScreen(); | |
| break; | |
| case 'settings': | |
| content = renderSettingsScreen(); | |
| break; | |
| default: | |
| content = renderMainScreen(); | |
| } | |
| screenContent.innerHTML = content; | |
| // Add notification indicator if any | |
| if (gameState.notifications.length > 0) { | |
| const notificationBtn = document.getElementById('notification-btn'); | |
| if (notificationBtn) { | |
| notificationBtn.classList.add('notification'); | |
| } | |
| } | |
| } | |
| // Render main screen | |
| function renderMainScreen() { | |
| const digimon = gameState.currentDigimon ? digimonData[gameState.currentDigimon] : null; | |
| const hour = gameState.time.hour.toString().padStart(2, '0'); | |
| const minute = gameState.time.minute.toString().padStart(2, '0'); | |
| let digimonDisplay = ''; | |
| if (digimon) { | |
| // Add animation classes based on state | |
| let animationClass = ''; | |
| if (gameState.notifications.includes('hungry') || gameState.notifications.includes('starving')) { | |
| animationClass = 'hungry'; | |
| } else if (gameState.stats.happiness > 70) { | |
| animationClass = 'happy'; | |
| } | |
| digimonDisplay = ` | |
| <div class="flex-1 flex flex-col items-center justify-center ${digimon.color} ${animationClass}"> | |
| <pre class="digimon-sprite text-4xl mb-2">${digimon.sprite}</pre> | |
| <div class="text-center"> | |
| <div class="text-lg font-bold">${digimon.name}</div> | |
| <div class="text-xs">${digimon.stage}</div> | |
| </div> | |
| </div> | |
| `; | |
| } else { | |
| digimonDisplay = ` | |
| <div class="flex-1 flex items-center justify-center text-white"> | |
| No Digimon | |
| </div> | |
| `; | |
| } | |
| return ` | |
| <div class="h-full flex flex-col"> | |
| <!-- Status Bar --> | |
| <div class="flex justify-between items-center text-white text-xs mb-2"> | |
| <div>Day ${gameState.time.day}</div> | |
| <div>${hour}:${minute}</div> | |
| <div id="notification-btn" class="w-4 h-4 rounded-full bg-red-500 ${gameState.notifications.length > 0 ? 'notification' : 'opacity-0'}"></div> | |
| </div> | |
| <!-- Digimon Display --> | |
| ${digimonDisplay} | |
| <!-- Menu Options --> | |
| <div class="grid grid-cols-3 gap-2 text-white text-xs text-center mt-auto"> | |
| <div class="bg-blue-800 p-1 rounded">STATS</div> | |
| <div class="bg-green-800 p-1 rounded">CARE</div> | |
| <div class="bg-red-800 p-1 rounded">BATTLE</div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Render stats screen | |
| function renderStatsScreen() { | |
| const digimon = gameState.currentDigimon ? digimonData[gameState.currentDigimon] : null; | |
| return ` | |
| <div class="h-full flex flex-col text-white"> | |
| <div class="text-center font-bold mb-2">${digimon ? digimon.name : 'No Digimon'} STATS</div> | |
| <div class="flex-1 grid grid-cols-2 gap-2 text-xs"> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div>HUNGER</div> | |
| <div class="w-full bg-gray-700 h-4 rounded mt-1"> | |
| <div class="bg-red-500 h-full rounded" style="width: ${gameState.stats.hunger}%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div>HAPPINESS</div> | |
| <div class="w-full bg-gray-700 h-4 rounded mt-1"> | |
| <div class="bg-yellow-500 h-full rounded" style="width: ${gameState.stats.happiness}%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div>ENERGY</div> | |
| <div class="w-full bg-gray-700 h-4 rounded mt-1"> | |
| <div class="bg-blue-500 h-full rounded" style="width: ${gameState.stats.energy}%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div>CLEANLINESS</div> | |
| <div class="w-full bg-gray-700 h-4 rounded mt-1"> | |
| <div class="bg-green-500 h-full rounded" style="width: ${gameState.stats.cleanliness}%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div>AGE</div> | |
| <div>${gameState.stats.age} days</div> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div>BATTLES</div> | |
| <div>${gameState.stats.wins}W/${gameState.stats.losses}L</div> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div>CARE MISTAKES</div> | |
| <div>${gameState.stats.careMistakes}</div> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div>STAGE</div> | |
| <div>${digimon ? digimon.stage : 'N/A'}</div> | |
| </div> | |
| </div> | |
| <div class="mt-auto text-center text-xs"> | |
| Press B to return | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Render care screen | |
| function renderCareScreen() { | |
| return ` | |
| <div class="h-full flex flex-col text-white"> | |
| <div class="text-center font-bold mb-2">CARE MENU</div> | |
| <div class="flex-1 grid grid-cols-2 gap-2"> | |
| <button id="care-feed" class="bg-red-600 p-2 rounded flex flex-col items-center justify-center ${gameState.notifications.includes('hungry') ? 'button-glow' : ''}"> | |
| <i class="fas fa-utensils text-2xl mb-1"></i> | |
| <div class="text-xs">FEED</div> | |
| </button> | |
| <button id="care-play" class="bg-yellow-600 p-2 rounded flex flex-col items-center justify-center ${gameState.notifications.includes('bored') ? 'button-glow' : ''}"> | |
| <i class="fas fa-gamepad text-2xl mb-1"></i> | |
| <div class="text-xs">PLAY</div> | |
| </button> | |
| <button id="care-clean" class="bg-blue-600 p-2 rounded flex flex-col items-center justify-center ${gameState.notifications.includes('dirty') ? 'button-glow' : ''}"> | |
| <i class="fas fa-shower text-2xl mb-1"></i> | |
| <div class="text-xs">CLEAN</div> | |
| </button> | |
| <button id="care-sleep" class="bg-purple-600 p-2 rounded flex flex-col items-center justify-center ${gameState.notifications.includes('tired') ? 'button-glow' : ''}"> | |
| <i class="fas fa-moon text-2xl mb-1"></i> | |
| <div class="text-xs">SLEEP</div> | |
| </button> | |
| <button id="care-medicine" class="bg-green-600 p-2 rounded flex flex-col items-center justify-center"> | |
| <i class="fas fa-pills text-2xl mb-1"></i> | |
| <div class="text-xs">MEDICINE</div> | |
| </button> | |
| <button id="care-scold" class="bg-gray-600 p-2 rounded flex flex-col items-center justify-center"> | |
| <i class="fas fa-angry text-2xl mb-1"></i> | |
| <div class="text-xs">SCOLD</div> | |
| </button> | |
| </div> | |
| <div class="mt-auto text-center text-xs"> | |
| Press B to return | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Render battle screen | |
| function renderBattleScreen() { | |
| const opponents = ["Numemon", "Gazimon", "Gotsumon", "Patamon", "Gabumon"]; | |
| const randomOpponent = opponents[Math.floor(Math.random() * opponents.length)]; | |
| return ` | |
| <div class="h-full flex flex-col text-white"> | |
| <div class="text-center font-bold mb-2">BATTLE MENU</div> | |
| <div class="flex-1 flex flex-col items-center justify-center"> | |
| <div class="text-lg mb-4">VS ${randomOpponent}</div> | |
| <div class="grid grid-cols-2 gap-4 w-full"> | |
| <button id="battle-fight" class="bg-red-600 p-2 rounded"> | |
| <div class="text-xs">FIGHT</div> | |
| </button> | |
| <button id="battle-run" class="bg-blue-600 p-2 rounded"> | |
| <div class="text-xs">RUN</div> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-auto text-center text-xs"> | |
| Press B to return | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Render digivolve screen | |
| function renderDigivolveScreen() { | |
| const digimon = gameState.currentDigimon ? digimonData[gameState.currentDigimon] : null; | |
| const nextStage = digimon ? digimon.evolutions[0] : null; | |
| const nextDigimon = nextStage ? digimonData[nextStage] : null; | |
| return ` | |
| <div class="h-full flex flex-col items-center justify-center text-white"> | |
| <div class="text-center font-bold mb-4">DIGIVOLUTION!</div> | |
| <div class="flex items-center justify-center space-x-8 mb-4"> | |
| <div class="text-center"> | |
| <pre class="digimon-sprite text-4xl ${digimon.color}">${digimon.sprite}</pre> | |
| <div class="text-xs">${digimon.name}</div> | |
| </div> | |
| <div class="text-2xl">→</div> | |
| <div class="text-center"> | |
| <pre class="digimon-sprite text-4xl ${nextDigimon.color}">${nextDigimon.sprite}</pre> | |
| <div class="text-xs">${nextDigimon.name}</div> | |
| </div> | |
| </div> | |
| <div class="text-center text-xs mb-4"> | |
| Your ${digimon.name} is evolving into ${nextDigimon.name}! | |
| </div> | |
| <button id="digivolve-confirm" class="bg-green-600 px-4 py-2 rounded"> | |
| CONTINUE | |
| </button> | |
| </div> | |
| `; | |
| } | |
| // Render settings screen | |
| function renderSettingsScreen() { | |
| return ` | |
| <div class="h-full flex flex-col text-white"> | |
| <div class="text-center font-bold mb-2">SETTINGS</div> | |
| <div class="flex-1 grid grid-cols-2 gap-2"> | |
| <button id="settings-time" class="bg-blue-600 p-2 rounded flex flex-col items-center justify-center"> | |
| <i class="fas fa-clock text-2xl mb-1"></i> | |
| <div class="text-xs">TIME</div> | |
| </button> | |
| <button id="settings-sound" class="bg-green-600 p-2 rounded flex flex-col items-center justify-center"> | |
| <i class="fas fa-volume-up text-2xl mb-1"></i> | |
| <div class="text-xs">SOUND</div> | |
| </button> | |
| <button id="settings-reset" class="bg-red-600 p-2 rounded flex flex-col items-center justify-center"> | |
| <i class="fas fa-trash text-2xl mb-1"></i> | |
| <div class="text-xs">RESET</div> | |
| </button> | |
| <button id="settings-about" class="bg-yellow-600 p-2 rounded flex flex-col items-center justify-center"> | |
| <i class="fas fa-info-circle text-2xl mb-1"></i> | |
| <div class="text-xs">ABOUT</div> | |
| </button> | |
| </div> | |
| <div class="mt-auto text-center text-xs"> | |
| Press B to return | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Handle button presses | |
| function setupButtons() { | |
| // A Button - Contextual action | |
| buttons.a.addEventListener('click', () => { | |
| switch (gameState.screen) { | |
| case 'main': | |
| // Toggle between Digimon and menu | |
| break; | |
| case 'care': | |
| // Default action in care menu | |
| break; | |
| case 'battle': | |
| // Attack in battle | |
| break; | |
| } | |
| }); | |
| // B Button - Back/return | |
| buttons.b.addEventListener('click', () => { | |
| if (gameState.screen !== 'main') { | |
| gameState.screen = 'main'; | |
| renderScreen(); | |
| } else { | |
| // Check notifications | |
| if (gameState.notifications.length > 0) { | |
| handleNotification(); | |
| } | |
| } | |
| }); | |
| // C Button - Menu | |
| buttons.c.addEventListener('click', () => { | |
| if (gameState.screen === 'main') { | |
| gameState.screen = 'settings'; | |
| renderScreen(); | |
| } | |
| }); | |
| // Up Button - Navigate up | |
| buttons.up.addEventListener('click', () => { | |
| if (gameState.screen === 'main') { | |
| gameState.screen = 'stats'; | |
| renderScreen(); | |
| } | |
| }); | |
| // Down Button - Navigate down | |
| buttons.down.addEventListener('click', () => { | |
| if (gameState.screen === 'main') { | |
| gameState.screen = 'care'; | |
| renderScreen(); | |
| } else if (gameState.screen === 'care') { | |
| gameState.screen = 'battle'; | |
| renderScreen(); | |
| } | |
| }); | |
| // Care menu buttons | |
| document.addEventListener('click', (e) => { | |
| if (e.target.closest('#care-feed')) { | |
| feedDigimon(); | |
| } else if (e.target.closest('#care-play')) { | |
| playWithDigimon(); | |
| } else if (e.target.closest('#care-clean')) { | |
| cleanDigimon(); | |
| } else if (e.target.closest('#care-sleep')) { | |
| putDigimonToSleep(); | |
| } else if (e.target.closest('#battle-fight')) { | |
| startBattle(); | |
| } else if (e.target.closest('#digivolve-confirm')) { | |
| confirmEvolution(); | |
| } | |
| }); | |
| } | |
| // Handle notifications | |
| function handleNotification() { | |
| if (gameState.notifications.length === 0) return; | |
| const notification = gameState.notifications.shift(); | |
| let message = ''; | |
| switch (notification) { | |
| case 'hungry': | |
| message = `${digimonData[gameState.currentDigimon].name} is hungry!`; | |
| break; | |
| case 'starving': | |
| message = `${digimonData[gameState.currentDigimon].name} is starving!`; | |
| break; | |
| case 'bored': | |
| message = `${digimonData[gameState.currentDigimon].name} wants to play!`; | |
| break; | |
| case 'depressed': | |
| message = `${digimonData[gameState.currentDigimon].name} is depressed!`; | |
| break; | |
| case 'dirty': | |
| message = `${digimonData[gameState.currentDigimon].name} needs cleaning!`; | |
| break; | |
| case 'filthy': | |
| message = `${digimonData[gameState.currentDigimon].name} is filthy!`; | |
| break; | |
| case 'tired': | |
| message = `${digimonData[gameState.currentDigimon].name} is tired!`; | |
| break; | |
| case 'exhausted': | |
| message = `${digimonData[gameState.currentDigimon].name} is exhausted!`; | |
| break; | |
| case 'careMistake': | |
| message = `Care mistake! ${digimonData[gameState.currentDigimon].name} wasn't cared for properly.`; | |
| break; | |
| case 'newDigimon': | |
| message = `A new Digimon has appeared!`; | |
| break; | |
| case 'evolution': | |
| gameState.screen = 'digivolve'; | |
| break; | |
| default: | |
| message = `Notification: ${notification}`; | |
| } | |
| if (message) { | |
| alert(message); // In a real app, we'd show this in the Digivice screen | |
| } | |
| renderScreen(); | |
| } | |
| // Care actions | |
| function feedDigimon() { | |
| gameState.stats.hunger = Math.min(100, gameState.stats.hunger + 30); | |
| gameState.stats.lastFed = Date.now(); | |
| removeNotification('hungry'); | |
| removeNotification('starving'); | |
| renderScreen(); | |
| } | |
| function playWithDigimon() { | |
| gameState.stats.happiness = Math.min(100, gameState.stats.happiness + 30); | |
| gameState.stats.energy = Math.max(0, gameState.stats.energy - 10); | |
| gameState.stats.lastPlayed = Date.now(); | |
| removeNotification('bored'); | |
| removeNotification('depressed'); | |
| renderScreen(); | |
| } | |
| function cleanDigimon() { | |
| gameState.stats.cleanliness = Math.min(100, gameState.stats.cleanliness + 40); | |
| gameState.stats.lastCleaned = Date.now(); | |
| removeNotification('dirty'); | |
| removeNotification('filthy'); | |
| renderScreen(); | |
| } | |
| function putDigimonToSleep() { | |
| gameState.stats.energy = Math.min(100, gameState.stats.energy + 50); | |
| gameState.stats.lastSleep = Date.now(); | |
| removeNotification('tired'); | |
| removeNotification('exhausted'); | |
| renderScreen(); | |
| } | |
| function removeNotification(type) { | |
| gameState.notifications = gameState.notifications.filter(n => n !== type); | |
| } | |
| // Battle system | |
| function startBattle() { | |
| const winChance = 0.5 + | |
| (gameState.stats.happiness / 200) + | |
| (gameState.stats.energy / 200) - | |
| (gameState.stats.careMistakes * 0.05); | |
| const didWin = Math.random() < winChance; | |
| if (didWin) { | |
| gameState.stats.battles++; | |
| gameState.stats.wins++; | |
| gameState.stats.happiness = Math.min(100, gameState.stats.happiness + 10); | |
| alert(`${digimonData[gameState.currentDigimon].name} won the battle!`); | |
| } else { | |
| gameState.stats.battles++; | |
| gameState.stats.losses++; | |
| gameState.stats.energy = Math.max(0, gameState.stats.energy - 20); | |
| alert(`${digimonData[gameState.currentDigimon].name} lost the battle...`); | |
| } | |
| gameState.screen = 'main'; | |
| renderScreen(); | |
| } | |
| // Evolution | |
| function confirmEvolution() { | |
| gameState.screen = 'main'; | |
| renderScreen(); | |
| } | |
| // Initialize the game when the page loads | |
| window.addEventListener('DOMContentLoaded', 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=dennis20014/fun-stuff" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |