A fun and challenging circle-drawing game where players compete to draw the most perfect circle possible within a time limit. Test your precision and compete with others on the global leaderboard!
Circlify is an interactive web-based game that challenges players to draw a perfect circle using their mouse or touch input. The game uses advanced mathematical algorithms to calculate how close your drawing is to a perfect circle, providing instant feedback and scoring. Players can compete globally through the leaderboard system and track their personal best scores.
- Real-time Circle Drawing: Draw circles using mouse or touch input
- Perfection Scoring: Advanced algorithm calculates how close your drawing is to a perfect circle
- Time Challenge: 5-second time limit adds excitement and pressure
- Visual Feedback: Real-time visual indicators and scoring display
- Global Leaderboard: Compete with players worldwide using Supabase backend
- Personal Best Tracking: Save and track your highest scores locally
- Social Sharing: Share your achievements on Twitter with custom generated tweets
- Username System: Customize your leaderboard entries
- Beautiful UI: Modern gradient design with smooth animations
- Responsive Design: Works seamlessly on desktop and mobile devices
- Audio Feedback: Celebration sounds for high scores and timeout alerts
- Offline Support: Fallback to localStorage when offline
- Device ID System: Prevents duplicate entries while maintaining privacy
- Real-time Analytics: Vercel Analytics integration for performance monitoring
- Progressive Web App: Fast loading and smooth performance
- TypeScript: Full type safety and better development experience
- Modern Build System: Vite for lightning-fast development and builds
- React 18 - Modern React with hooks and functional components
- TypeScript - Type-safe JavaScript development
- Vite - Fast build tool and development server
- Tailwind CSS - Utility-first CSS framework for styling
- Lucide React - Beautiful and customizable icons
- Supabase - Backend-as-a-Service with PostgreSQL database
- Real-time Database - Live leaderboard updates
- Row Level Security - Secure data access
- ESLint - Code linting and quality assurance
- PostCSS - CSS processing and optimization
- Autoprefixer - Automatic CSS vendor prefixing
- Vercel Analytics - Performance and user analytics
- Error Handling - Comprehensive error handling with fallbacks
- Web Audio API - Custom sound effects for game feedback
- Node.js (v16 or higher)
- npm or yarn package manager
- Clone the repository:
git clone <repository-url>
cd Circlify- Install dependencies:
npm install- Set up environment variables:
Create a
.envfile in the root directory with your Supabase credentials:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key- Run the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run buildThe built files will be in the dist directory, ready for deployment.
- Wait for the countdown - The game starts with a 5-second timer
- Draw your circle - Use your mouse or finger to draw a circle
- Complete the circle - Try to close the circle by connecting the start and end points
- Get your score - The game calculates your perfection percentage
- Save your score - Enter a username to save to the leaderboard
- Try again - Challenge yourself to beat your personal best!
Contributions are welcome! Please feel free to submit a Pull Request.
Challenge yourself, compete globally, and draw the perfect circle! 🎯✨