🐱 Mochi the Interactive Cat
A cute, single-file interactive virtual pet built with HTML, Tailwind CSS, Vanilla JavaScript, and SVG. Mochi lives in your browser and reacts to your interactions!
✨ Features
Interactive SVG Graphics: Mochi is drawn entirely using SVG code, making it scale perfectly without any external image assets to load.
Eye-Tracking: Mochi's eyes will dynamically follow your mouse cursor on desktop and your finger on touch devices.
Virtual Pet Mechanics: * Pet (👋): Increases happiness but uses a little energy. Triggers a purr animation and floating hearts.
Feed (🐟): Increases fullness and energy. Triggers eating particles.
Rest (🛏️): Replenishes energy quickly but burns a little food. Mochi closes its eyes to sleep.
Real-time Status Bars: Watch Mochi's Happiness, Fullness, and Energy levels change in real-time. Levels slowly decrease over time, requiring you to come back and take care of your pet!
Responsive Design: Styled with Tailwind CSS to look amazing on mobile phones, tablets, and desktop computers alike.
🛠️ Technologies Used
HTML5: For the core structure and inline SVG drawing.
Tailwind CSS (via CDN): For rapid, responsive, and modern UI styling.
Vanilla JavaScript: For DOM manipulation, game loop logic, particle generation, and mouse/touch event handling.
🚀 How to Run Locally
Because this project is entirely self-contained in a single file, running it locally is incredibly easy:
Clone or download this repository.
Double-click the index.html file to open it in your default web browser.
Enjoy playing with Mochi!
🌐 How to Deploy to GitHub Pages
This project is perfectly suited for free hosting on GitHub Pages.
Create a new repository on GitHub.
Upload the index.html file to the root of your new repository.
In your GitHub repository, go to Settings.
In the left sidebar, click on Pages.
Under Build and deployment, set the Source to Deploy from a branch.
Under Branch, select main (or master) and leave the folder as / (root). Click Save.
Wait a few minutes. GitHub will provide you with a live URL (usually https://yourusername.github.io/your-repo-name/) where your interactive cat is now live!
📝 License
This project is open-source. Feel free to use, modify, and share this code however you like!
