Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tamacodechi - Le Tamagotchi des Développeurs</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 bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .bounce-animation { | |
| animation: bounce 1s infinite; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .tamagotchi-screen { | |
| box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.5); | |
| } | |
| .pixel-art { | |
| image-rendering: pixelated; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4"> | |
| <div class="container mx-auto max-w-md"> | |
| <div class="bg-gray-800 rounded-3xl p-6 shadow-2xl border-4 border-cyan-400 relative overflow-hidden"> | |
| <!-- En-tête avec titre et niveau --> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h1 class="text-2xl font-bold text-cyan-400"> | |
| <i class="fas fa-code mr-2"></i>Tamacodechi | |
| </h1> | |
| <div class="bg-gray-700 px-3 py-1 rounded-full text-sm font-mono"> | |
| Niveau: <span id="level">1</span> | |
| </div> | |
| </div> | |
| <!-- Écran du Tamacodechi --> | |
| <div class="tamagotchi-screen bg-black rounded-xl p-4 mb-6 h-64 flex flex-col items-center justify-center relative overflow-hidden"> | |
| <div id="pet-container" class="relative"> | |
| <div id="pet" class="text-6xl pixel-art bounce-animation">👨💻</div> | |
| <div id="pet-status" class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-xs bg-black bg-opacity-70 px-2 py-1 rounded whitespace-nowrap"></div> | |
| </div> | |
| <div id="message" class="mt-4 text-center text-sm text-cyan-300 font-mono"></div> | |
| <div id="evolution" class="absolute top-0 left-0 w-full h-full flex items-center justify-center hidden"> | |
| <div class="text-4xl animate-pulse text-yellow-300">LEVEL UP!</div> | |
| </div> | |
| </div> | |
| <!-- Barres de statut --> | |
| <div class="space-y-3 mb-6"> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span><i class="fas fa-heart text-red-400 mr-1"></i> Santé</span> | |
| <span id="health-value">100%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div id="health-bar" class="progress-bar bg-red-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span><i class="fas fa-hamburger text-yellow-400 mr-1"></i> Nourriture</span> | |
| <span id="food-value">100%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div id="food-bar" class="progress-bar bg-yellow-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span><i class="fas fa-bolt text-blue-400 mr-1"></i> Énergie</span> | |
| <span id="energy-value">100%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div id="energy-bar" class="progress-bar bg-blue-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span><i class="fas fa-laugh-beam text-green-400 mr-1"></i> Bonheur</span> | |
| <span id="happiness-value">100%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div id="happiness-bar" class="progress-bar bg-green-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span><i class="fas fa-brain text-purple-400 mr-1"></i> XP</span> | |
| <span id="xp-value">0/100</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div id="xp-bar" class="progress-bar bg-purple-500 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Boutons d'action --> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button id="feed-btn" class="bg-yellow-600 hover:bg-yellow-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs"> | |
| <i class="fas fa-utensils mb-1"></i> | |
| Nourrir | |
| </button> | |
| <button id="play-btn" class="bg-green-600 hover:bg-green-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs"> | |
| <i class="fas fa-gamepad mb-1"></i> | |
| Jouer | |
| </button> | |
| <button id="sleep-btn" class="bg-blue-600 hover:bg-blue-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs"> | |
| <i class="fas fa-moon mb-1"></i> | |
| Dormir | |
| </button> | |
| <button id="code-btn" class="bg-purple-600 hover:bg-purple-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs"> | |
| <i class="fas fa-code mb-1"></i> | |
| Coder | |
| </button> | |
| <button id="clean-btn" class="bg-pink-600 hover:bg-pink-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs"> | |
| <i class="fas fa-broom mb-1"></i> | |
| Nettoyer | |
| </button> | |
| <button id="heal-btn" class="bg-red-600 hover:bg-red-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs"> | |
| <i class="fas fa-medkit mb-1"></i> | |
| Soigner | |
| </button> | |
| </div> | |
| <!-- Boutons spéciaux --> | |
| <div class="flex justify-between mt-4"> | |
| <button id="debug-btn" class="bg-gray-700 hover:bg-gray-600 text-xs py-1 px-3 rounded-full"> | |
| <i class="fas fa-bug mr-1"></i>Debug | |
| </button> | |
| <button id="save-btn" class="bg-cyan-700 hover:bg-cyan-600 text-xs py-1 px-3 rounded-full"> | |
| <i class="fas fa-save mr-1"></i>Sauvegarder | |
| </button> | |
| <button id="load-btn" class="bg-cyan-700 hover:bg-cyan-600 text-xs py-1 px-3 rounded-full"> | |
| <i class="fas fa-folder-open mr-1"></i>Charger | |
| </button> | |
| </div> | |
| <!-- Console de debug --> | |
| <div id="debug-console" class="mt-4 bg-black text-green-400 font-mono text-xs p-2 rounded-lg h-24 overflow-y-auto hidden"> | |
| <div>System initialized...</div> | |
| </div> | |
| </div> | |
| <!-- Crédits --> | |
| <div class="text-center text-gray-500 text-xs mt-4"> | |
| Tamacodechi v1.0 - Le Tamagotchi des développeurs | |
| </div> | |
| </div> | |
| <script> | |
| // État du Tamacodechi | |
| const state = { | |
| health: 100, | |
| food: 100, | |
| energy: 100, | |
| happiness: 100, | |
| xp: 0, | |
| level: 1, | |
| xpToNextLevel: 100, | |
| isSleeping: false, | |
| isSick: false, | |
| isDirty: false, | |
| evolutionStage: 0, | |
| lastAction: null, | |
| messages: [ | |
| "Salut ! Je suis ton Tamacodechi!", | |
| "J'ai faim...", | |
| "Joue avec moi!", | |
| "Je veux coder!", | |
| "J'ai besoin de dormir...", | |
| "Je me sens seul...", | |
| "Je suis malade...", | |
| "Je suis sale...", | |
| "Je veux apprendre!", | |
| "Je m'ennuie..." | |
| ] | |
| }; | |
| // Éléments du DOM | |
| const elements = { | |
| pet: document.getElementById('pet'), | |
| petStatus: document.getElementById('pet-status'), | |
| message: document.getElementById('message'), | |
| evolution: document.getElementById('evolution'), | |
| healthBar: document.getElementById('health-bar'), | |
| healthValue: document.getElementById('health-value'), | |
| foodBar: document.getElementById('food-bar'), | |
| foodValue: document.getElementById('food-value'), | |
| energyBar: document.getElementById('energy-bar'), | |
| energyValue: document.getElementById('energy-value'), | |
| happinessBar: document.getElementById('happiness-bar'), | |
| happinessValue: document.getElementById('happiness-value'), | |
| xpBar: document.getElementById('xp-bar'), | |
| xpValue: document.getElementById('xp-value'), | |
| level: document.getElementById('level'), | |
| debugConsole: document.getElementById('debug-console') | |
| }; | |
| // Boutons d'action | |
| const buttons = { | |
| feed: document.getElementById('feed-btn'), | |
| play: document.getElementById('play-btn'), | |
| sleep: document.getElementById('sleep-btn'), | |
| code: document.getElementById('code-btn'), | |
| clean: document.getElementById('clean-btn'), | |
| heal: document.getElementById('heal-btn'), | |
| debug: document.getElementById('debug-btn'), | |
| save: document.getElementById('save-btn'), | |
| load: document.getElementById('load-btn') | |
| }; | |
| // Évolution du Tamacodechi | |
| const evolutionStages = [ | |
| { emoji: "👶", name: "Bébé Codeur", xpRequired: 0 }, | |
| { emoji: "👦", name: "Apprenti Dev", xpRequired: 100 }, | |
| { emoji: "👨💻", name: "Développeur", xpRequired: 300 }, | |
| { emoji: "🧙♂️", name: "Codeur Pro", xpRequired: 600 }, | |
| { emoji: "🧙♂️", name: "Hacker", xpRequired: 1000 } | |
| ]; | |
| // Initialisation | |
| function init() { | |
| updateUI(); | |
| setRandomMessage(); | |
| startGameLoop(); | |
| setupEventListeners(); | |
| logToConsole("Tamacodechi initialisé!"); | |
| } | |
| // Boucle de jeu | |
| function startGameLoop() { | |
| setInterval(() => { | |
| // Dégradation naturelle des stats | |
| if (!state.isSleeping) { | |
| state.food = Math.max(0, state.food - 1); | |
| state.energy = Math.max(0, state.energy - 1); | |
| state.happiness = Math.max(0, state.happiness - 0.5); | |
| } else { | |
| // Récupération pendant le sommeil | |
| state.energy = Math.min(100, state.energy + 2); | |
| state.health = Math.min(100, state.health + 0.5); | |
| } | |
| // Effets secondaires | |
| if (state.food < 30) { | |
| state.health = Math.max(0, state.health - 0.5); | |
| } | |
| if (state.energy < 20) { | |
| state.health = Math.max(0, state.health - 0.5); | |
| } | |
| if (state.happiness < 20) { | |
| state.health = Math.max(0, state.health - 0.3); | |
| } | |
| // Maladie aléatoire | |
| if (Math.random() < 0.005 && !state.isSick) { | |
| state.isSick = true; | |
| showMessage("Je ne me sens pas bien..."); | |
| } | |
| // Saleté aléatoire | |
| if (Math.random() < 0.01 && !state.isDirty) { | |
| state.isDirty = true; | |
| showMessage("Je suis tout sale!"); | |
| } | |
| // Vérifier l'évolution | |
| checkEvolution(); | |
| // Mettre à jour l'UI | |
| updateUI(); | |
| // Changer de message aléatoirement | |
| if (Math.random() < 0.05) { | |
| setRandomMessage(); | |
| } | |
| }, 3000); | |
| } | |
| // Mise à jour de l'interface | |
| function updateUI() { | |
| // Mettre à jour les barres de progression | |
| elements.healthBar.style.width = `${state.health}%`; | |
| elements.foodBar.style.width = `${state.food}%`; | |
| elements.energyBar.style.width = `${state.energy}%`; | |
| elements.happinessBar.style.width = `${state.happiness}%`; | |
| elements.xpBar.style.width = `${(state.xp / state.xpToNextLevel) * 100}%`; | |
| // Mettre à jour les valeurs textuelles | |
| elements.healthValue.textContent = `${Math.round(state.health)}%`; | |
| elements.foodValue.textContent = `${Math.round(state.food)}%`; | |
| elements.energyValue.textContent = `${Math.round(state.energy)}%`; | |
| elements.happinessValue.textContent = `${Math.round(state.happiness)}%`; | |
| elements.xpValue.textContent = `${Math.round(state.xp)}/${state.xpToNextLevel}`; | |
| elements.level.textContent = state.level; | |
| // Changer l'apparence en fonction de l'état | |
| if (state.isSick) { | |
| elements.pet.style.color = "red"; | |
| elements.petStatus.textContent = "Malade"; | |
| elements.petStatus.style.color = "red"; | |
| } else if (state.isDirty) { | |
| elements.pet.style.color = "brown"; | |
| elements.petStatus.textContent = "Sale"; | |
| elements.petStatus.style.color = "brown"; | |
| } else if (state.isSleeping) { | |
| elements.pet.style.color = "blue"; | |
| elements.petStatus.textContent = "Endormi"; | |
| elements.petStatus.style.color = "blue"; | |
| } else if (state.food < 30) { | |
| elements.pet.style.color = "yellow"; | |
| elements.petStatus.textContent = "Affamé"; | |
| elements.petStatus.style.color = "yellow"; | |
| } else if (state.energy < 30) { | |
| elements.pet.style.color = "orange"; | |
| elements.petStatus.textContent = "Fatigué"; | |
| elements.petStatus.style.color = "orange"; | |
| } else if (state.happiness < 30) { | |
| elements.pet.style.color = "pink"; | |
| elements.petStatus.textContent = "Triste"; | |
| elements.petStatus.style.color = "pink"; | |
| } else { | |
| elements.pet.style.color = "white"; | |
| elements.petStatus.textContent = evolutionStages[state.evolutionStage].name; | |
| elements.petStatus.style.color = "cyan"; | |
| } | |
| // Désactiver les boutons si nécessaire | |
| buttons.play.disabled = state.isSleeping; | |
| buttons.code.disabled = state.isSleeping; | |
| buttons.feed.disabled = state.isSleeping; | |
| buttons.clean.disabled = state.isSleeping; | |
| buttons.heal.disabled = state.isSleeping; | |
| // Changer l'emoji en fonction du stade d'évolution | |
| elements.pet.textContent = evolutionStages[state.evolutionStage].emoji; | |
| } | |
| // Vérifier l'évolution | |
| function checkEvolution() { | |
| if (state.xp >= state.xpToNextLevel && state.evolutionStage < evolutionStages.length - 1) { | |
| state.level++; | |
| state.evolutionStage++; | |
| state.xp = 0; | |
| state.xpToNextLevel = evolutionStages[state.evolutionStage].xpRequired; | |
| // Animation d'évolution | |
| elements.evolution.classList.remove('hidden'); | |
| setTimeout(() => { | |
| elements.evolution.classList.add('hidden'); | |
| }, 2000); | |
| showMessage(`Je suis maintenant un ${evolutionStages[state.evolutionStage].name}!`); | |
| logToConsole(`Évolution! Nouveau niveau: ${state.level}`); | |
| } | |
| } | |
| // Afficher un message | |
| function showMessage(msg) { | |
| elements.message.textContent = msg; | |
| setTimeout(() => { | |
| if (elements.message.textContent === msg) { | |
| elements.message.textContent = ''; | |
| } | |
| }, 3000); | |
| } | |
| // Message aléatoire | |
| function setRandomMessage() { | |
| if (!state.lastAction || Date.now() - state.lastAction > 5000) { | |
| const randomMsg = state.messages[Math.floor(Math.random() * state.messages.length)]; | |
| showMessage(randomMsg); | |
| } | |
| } | |
| // Journalisation dans la console de debug | |
| function logToConsole(msg) { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString(); | |
| const entry = document.createElement('div'); | |
| entry.textContent = `[${timeString}] ${msg}`; | |
| elements.debugConsole.appendChild(entry); | |
| elements.debugConsole.scrollTop = elements.debugConsole.scrollHeight; | |
| } | |
| // Configuration des écouteurs d'événements | |
| function setupEventListeners() { | |
| // Nourrir | |
| buttons.feed.addEventListener('click', () => { | |
| state.food = Math.min(100, state.food + 30); | |
| state.lastAction = Date.now(); | |
| showMessage("Miam! C'est bon!"); | |
| logToConsole("Tamacodechi nourri"); | |
| updateUI(); | |
| }); | |
| // Jouer | |
| buttons.play.addEventListener('click', () => { | |
| state.happiness = Math.min(100, state.happiness + 25); | |
| state.energy = Math.max(0, state.energy - 10); | |
| state.lastAction = Date.now(); | |
| showMessage("Yeah! C'est amusant!"); | |
| logToConsole("Joué avec Tamacodechi"); | |
| updateUI(); | |
| }); | |
| // Dormir/Réveiller | |
| buttons.sleep.addEventListener('click', () => { | |
| state.isSleeping = !state.isSleeping; | |
| state.lastAction = Date.now(); | |
| if (state.isSleeping) { | |
| showMessage("Zzzzzz..."); | |
| logToConsole("Tamacodechi endormi"); | |
| } else { | |
| showMessage("Je me sens reposé!"); | |
| logToConsole("Tamacodechi réveillé"); | |
| } | |
| updateUI(); | |
| }); | |
| // Coder | |
| buttons.code.addEventListener('click', () => { | |
| state.xp = Math.min(state.xpToNextLevel, state.xp + 10); | |
| state.energy = Math.max(0, state.energy - 15); | |
| state.happiness = Math.min(100, state.happiness + 5); | |
| state.lastAction = Date.now(); | |
| showMessage("J'adore coder!"); | |
| logToConsole("Tamacodechi a codé"); | |
| updateUI(); | |
| }); | |
| // Nettoyer | |
| buttons.clean.addEventListener('click', () => { | |
| state.isDirty = false; | |
| state.happiness = Math.min(100, state.happiness + 10); | |
| state.lastAction = Date.now(); | |
| showMessage("Merci de m'avoir nettoyé!"); | |
| logToConsole("Tamacodechi nettoyé"); | |
| updateUI(); | |
| }); | |
| // Soigner | |
| buttons.heal.addEventListener('click', () => { | |
| state.isSick = false; | |
| state.health = Math.min(100, state.health + 30); | |
| state.lastAction = Date.now(); | |
| showMessage("Je me sens mieux!"); | |
| logToConsole("Tamacodechi soigné"); | |
| updateUI(); | |
| }); | |
| // Debug | |
| buttons.debug.addEventListener('click', () => { | |
| elements.debugConsole.classList.toggle('hidden'); | |
| }); | |
| // Sauvegarder | |
| buttons.save.addEventListener('click', () => { | |
| localStorage.setItem('tamacodechi_save', JSON.stringify(state)); | |
| showMessage("Progression sauvegardée!"); | |
| logToConsole("Jeu sauvegardé"); | |
| }); | |
| // Charger | |
| buttons.load.addEventListener('click', () => { | |
| const savedData = localStorage.getItem('tamacodechi_save'); | |
| if (savedData) { | |
| Object.assign(state, JSON.parse(savedData)); | |
| showMessage("Bienvenue de retour!"); | |
| logToConsole("Jeu chargé"); | |
| updateUI(); | |
| } else { | |
| showMessage("Aucune sauvegarde trouvée"); | |
| logToConsole("Aucune sauvegarde trouvée"); | |
| } | |
| }); | |
| } | |
| // Démarrer le jeu | |
| window.onload = init; | |
| </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=Alex59000/tamacodechi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |