Virtual Pet Care

Virtual Pet Care

Choose Your Pet

body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; margin: 0; padding: 20px; } .container { max-width: 600px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1, h2 { color: #333; text-align: center; } .pet-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0; } .pet-btn { font-size: 20px; padding: 10px 20px; border: none; border-radius: 5px; background-color: #4CAF50; color: white; cursor: pointer; transition: background-color 0.3s; } .pet-btn:hover { background-color: #45a049; } .pet-display { margin-top: 20px; text-align: center; } .pet-image { font-size: 100px; margin: 20px 0; } .pet-stats { margin: 20px 0; } .stat { margin: 5px 0; padding: 5px; background-color: #f0f0f0; border-radius: 5px; } .pet-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .action-btn { padding: 10px 15px; border: none; border-radius: 5px; background-color: #2196F3; color: white; cursor: pointer; } .action-btn:hover { background-color: #0b7dda; } .hidden { display: none; } .custom-pet { text-align: center; margin-top: 20px; } .custom-pet input { padding: 8px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; } #create-pet { padding: 10px 20px; background-color: #ff9800; color: white; border: none; border-radius: 4px; cursor: pointer; } #create-pet:hover { background-color: #e68a00; } class VirtualPet { constructor(type, emoji) { this.type = type; this.emoji = emoji; this.hunger = 50; this.happiness = 50; this.energy = 50; this.cleanliness = 50; } feed() { this.hunger = Math.min(100, this.hunger + 20); this.cleanliness = Math.max(0, this.cleanliness - 10); this.updateStats(); } play() { this.happiness = Math.min(100, this.happiness + 15); this.energy = Math.max(0, this.energy - 10); this.hunger = Math.max(0, this.hunger - 5); this.updateStats(); } sleep() { this.energy = Math.min(100, this.energy + 30); this.hunger = Math.max(0, this.hunger - 10); this.updateStats(); } clean() { this.cleanliness = Math.min(100, this.cleanliness + 30); this.updateStats(); } updateStats() { document.querySelector('.hunger').textContent = `Hunger: ${this.hunger}%`; document.querySelector('.happiness').textContent = `Happiness: ${this.happiness}%`; document.querySelector('.energy').textContent = `Energy: ${this.energy}%`; } } document.addEventListener('DOMContentLoaded', () => { const petDisplay = document.querySelector('.pet-display'); const customPetSection = document.querySelector('.custom-pet'); let currentPet = null; document.querySelectorAll('.pet-btn').forEach(btn => { btn.addEventListener('click', () => { const petType = btn.dataset.type; if (petType === 'custom') { petDisplay.classList.add('hidden'); customPetSection.classList.remove('hidden'); } else { const emojis = { dog: '🐶', cat: '🐱', bird: '🐦', rabbit: '🐰' }; createPet(petType, emojis[petType]); customPetSection.classList.add('hidden'); petDisplay.classList.remove('hidden'); } }); }); document.getElementById('create-pet').addEventListener('click', () => { const name = document.getElementById('pet-name').value || 'Custom Pet'; const emoji = document.getElementById('pet-emoji').value || '🐾'; createPet(name, emoji); petDisplay.classList.remove('hidden'); customPetSection.classList.add('hidden'); }); function createPet(type, emoji) { currentPet = new VirtualPet(type, emoji); document.querySelector('.pet-image').textContent = emoji; currentPet.updateStats(); } document.querySelectorAll('.action-btn').forEach(btn => { btn.addEventListener('click', () => { if (!currentPet) return; const action = btn.dataset.action; currentPet[action](); }); }); // Pet needs decay over time setInterval(() => { if (!currentPet) return; currentPet.hunger = Math.max(0, currentPet.hunger - 1); currentPet.happiness = Math.max(0, currentPet.happiness - 1); currentPet.energy = Math.max(0, currentPet.energy - 1); currentPet.cleanliness = Math.max(0, currentPet.cleanliness - 1); currentPet.updateStats(); }, 5000); });