Pixel Pet - Virtual Pet Web App

A fun, nostalgic pixel-art style Tamagotchi-inspired virtual pet game built with React, TypeScript, Tailwind CSS, and Framer Motion.

live: https://pixel-pet-six.vercel.app/

Quick Start

Installation

# Install dependencies
npm install

# Start development server (opens on localhost:3000)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Features

✨ Core Gameplay

• Adopt one of 4 cute pixel pets (Cat, Dog, Dragon, Robot)
• Keep your pet alive by managing Hunger, Happiness, and Health stats
• Real-time stat decay every 30 seconds
• Stats persist in localStorage (survives page refresh)

🎮 Actions

• Feed: Reduce hunger, boost happiness
• Play: Fight mini-game to increase happiness
• Heal: Restore health when pet is sick
• Sleep: Pet rests and restores health

🌟 Features

• 5 pet states with unique animations (Happy, Hungry, Sick, etc.)
• Level up system based on care quality
• Evolution mechanic at level 3 (evolved pet form)
• Death screen with restart option
• Mini-game: Ball throwing challenge
• Smooth animations with Framer Motion
• Mobile-responsive design
• Dark mode by default with retro pixel aesthetic

Tech Stack

• Framework: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• State: React Hooks (useState, useEffect)
• Storage: Browser localStorage

Project Structure

src/
├── components/
│   ├── AdoptScreen.tsx      # Initial pet selection
│   ├── PetDisplay.tsx       # Animated pet display
│   ├── StatsBar.tsx         # Hunger, Happiness, Health, Level
│   ├── ActionButtons.tsx    # Feed, Play, Heal, Sleep actions
│   ├── MiniGame.tsx         # Ball throwing mini-game
│   └── DeathScreen.tsx      # Game over screen
├── hooks/
│   └── usePet.ts            # Core game logic + localStorage persistence
├── App.tsx                  # Main app component
├── main.tsx                 # React entry point
└── index.css                # Tailwind + custom animations

Config Files:
├── vite.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── postcss.config.js
└── index.html

How to Play

1. First Visit: Choose your pet and give it a name
2. Main Screen: Monitor stats and use action buttons
3. Keep Alive:
   • Act before hunger reaches 100 or health hits 0
   • Maintain happiness by playing often
   • Click "Sleep" to restore health
4. Level Up: With good care, reach level 3 for evolution
5. Game Over: Death screen appears if pet dies (can restart)

localStorage Data Structure

{
  id: "pet_id",
  name: "Pet Name",
  type: "cat" | "dog" | "dragon" | "robot",
  level: 1-5,
  hunger: 0-100,
  happiness: 0-100,
  health: 0-100,
  lastUpdated: timestamp,
  isSleeping: boolean,
  isPlayingGame: boolean,
  evolved: boolean
}

Deployment

See VERCEL_DEPLOYMENT.md for complete Vercel deployment instructions.

TL;DR:

1. Push to GitHub
2. Connect to Vercel
3. Deploy (automatic on every push)

Development Notes

• Stats decay every 30 seconds (configurable in usePet.ts)
• Mini-game duration: 10 seconds
• Level up requires well-balanced stats (low hunger + high happiness/health)
• All data is client-side only (no backend needed)
• Works offline after first load

Browser Support

• Chrome/Edge: ✅ Full support
• Firefox: ✅ Full support
• Safari: ✅ Full support
• Mobile browsers: ✅ Mobile-responsive

License

Free to use and modify!

---

Enjoy your Pixel Pet! 🎮✨