Project Overview

A fun and interactive web-based game where users can take care of a virtual pet by feeding it, cleaning it, and playing with it. The pet’s happiness, hunger, and cleanliness levels are displayed in real-time, and the game uses localStorage to save progress so the pet’s state persists across sessions.

Screenshots

Key Features

• Interactive buttons to Feed, Clean, and Play with the pet.
• Real-time stats tracking for hunger, cleanliness, and happiness.
• Mood animation for the pet when interacted with.
• Persistent state using localStorage to save pet stats.
• Gradual stat decrease over time to simulate pet needs.
• Conditional messages for pet’s mood (happy, full, or unhappy).
• Fully responsive and visually appealing UI with animations.

Functionality

1. Pet starts with initial stats (Hunger: 50, Cleanliness: 50, Happiness: 50).
2. Feed button increases hunger and happiness.
3. Clean button increases cleanliness and happiness.
4. Play button increases happiness.
5. Stats decrease gradually over time, simulating real pet needs.
6. Messages update dynamically based on pet’s mood (e.g., “Your pet is very happy!” or “Your pet is unhappy!”).
7. Pet image briefly animates when interacted with.
8. Pet stats are saved in localStorage, so progress persists after page reloads.

Technology Used

• HTML5 – Structure of the game.
• CSS3 – Styling, layout, and animations.
• JavaScript (ES6) – Interactivity, stat calculations, and localStorage.

Why This Project Is Useful

• Teaches JavaScript DOM manipulation and event handling.
• Introduces localStorage for persistent data.
• Demonstrates CSS animations and transitions.
• Provides a fun and engaging way to learn web development concepts.
• Encourages planning and managing resources through pet care simulation.

Download Source Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.