A colorful match-3 puzzle game built with vanilla JavaScript, HTML5, and CSS3. Match fruits in lines or squares to score points, complete levels, and climb the leaderboards!
- Classic Mode: Score as many points as possible before running out of moves
- Adventure Mode: Progress through increasingly challenging levels with objectives
- Zen Mode: Relaxed gameplay with no time pressure or move limits
- Match 3+: Line up 3 or more identical fruits horizontally or vertically
- 2x2 Square Matches: Form a square of 4 matching fruits for bonus points
- Recursive Propagation: Adjacent matching fruits automatically join matches
- Special Power-ups: Earn and use power-ups to clear the board strategically
- Combo System: Chain matches for multiplied scores
- Multi-language Support: English and Spanish (auto-detects browser language)
- Global Leaderboards: Compete with players worldwide
- Customizable Themes: Unlock new visual themes as you progress
- Sound Effects & Music: Toggle audio on/off in settings
- Responsive Design: Works on desktop, tablet, and mobile devices
- Offline Support: Play without an internet connection
Coming soon
- Clone the repository:
git clone https://github.com/weiro2020/FruitMatch.git
cd FruitMatch- Serve the files using any static file server:
# Using Python
python -m http.server 8080
# Using Node.js (npx)
npx serve .
# Using PHP
php -S localhost:8080- Open your browser and navigate to
http://localhost:8080
The game includes an optional backend API for persistent scores and leaderboards.
- Clone the repository:
git clone https://github.com/weiro2020/FruitMatch.git
cd FruitMatch- Start the API server:
cd api
docker-compose up -d-
The API will be available at
http://localhost:3777 -
Serve the frontend files (see above) or configure your web server
The api/docker-compose.yml includes:
- Node.js Express server
- Persistent data storage in
./data/ - Health checks
- Auto-restart on failure
# Default configuration
Container name: fruitmatch_scores_api
Port: 3777
Data directory: ./data/| Endpoint | Method | Description |
|---|---|---|
/api/health |
GET | Health check |
/api/scores |
GET | Get all scores |
/api/scores |
POST | Submit a new score |
/api/scores/top |
GET | Get top scores |
Access the admin panel at /admin.html to:
- View and manage scores
- Monitor game statistics
- Configure game settings
Default credentials:
- Username:
admin - Password:
admin
Important: Change the default credentials in production!
FruitMatch/
├── api/
│ ├── data/ # Score data (JSON files)
│ ├── Dockerfile # Docker image definition
│ ├── docker-compose.yml
│ ├── package.json
│ └── server.js # Express API server
├── sounds/ # Audio files (MP3)
├── .gitignore
├── admin.html # Admin panel
├── api.js # Frontend API client
├── index.html # Main game page
├── lang.js # Internationalization (i18n)
├── script.js # Game logic
├── styles.css # Styling
├── CHANGELOG.md
├── LICENSE
└── README.md
- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+
- Mobile browsers (iOS Safari, Chrome for Android)
- Node.js 18+ (for API development)
- Docker & Docker Compose (for containerized deployment)
- Start the API in development mode:
cd api
npm install
npm run dev- Serve the frontend with live reload:
npx serve . -l 8080The frontend is static and requires no build step. Simply deploy all files to your web server.
For the API:
cd api
docker build -t fruitmatch-api .
docker run -d -p 3777:3777 -v $(pwd)/data:/app/data fruitmatch-api- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Developed by DevCatanzaro
- Sound effects from various royalty-free sources
- Inspired by classic match-3 puzzle games
- Built with love for casual gaming