I built a classic puzzle game with an AI opponent. The rules take 30 seconds to learn. Most people can't beat it on their first try.
Try it yourself: collapsibles.web.app
The Rules
Click groups of 2+ matching adjacent pieces to remove them. Pieces fall down to fill gaps. Score points based on cluster size.
That's it. No power-ups, no time limits, no lives.
The scoring formula: n × (n-1) where n = cluster size.
| Cluster Size | Points |
|---|---|
| 2 pieces | 2 |
| 3 pieces | 6 |
| 5 pieces | 20 |
| 10 pieces | 90 |
| 15 pieces | 210 |
A 10-piece cluster is worth 45x a 2-piece cluster. That's the whole game - do you grab small clusters now, or wait for gravity to create bigger ones?
The Features
30 themes. All emoji-based: fruits, animals, fantasy creatures (wizards, unicorns, dragons), sea creatures, space, vehicles, sports, food, drinks, flowers, weather, zodiac signs, geometric shapes, and more. Pick whatever you like looking at - they're all mechanically identical.
Watch the AI play (22 sec video)
Multiple board sizes. Squares (10×10, 12×12, 14×14), tall boards (8×14, 10×16, 12×18), and wide boards (14×8, 16×10, 18×12). Larger boards mean longer games with more strategic depth.
Note: On phones, the wider boards (14+ columns) aren't available - they'd be too cramped to play comfortably. The game filters options based on your screen size.
AI opponent. Watch mode lets the AI play while you observe. Useful for learning, or just satisfying to watch.
Hint system. Turn on hints and the game highlights the cluster the AI thinks you should play next. It's a preview of what the AI would do in your position.
High scores. Here's the catch - if you use hints, you can't set a high score. Each board size tracks scores separately, and the leaderboard only counts games where you played without help. So you can use hints to learn, or you can compete for high scores. Not both.
9-step tutorial. First time playing, you'll get an interactive tutorial that walks through the mechanics. You can skip it or restart it anytime from the help button.
PWA. Install it on your phone or desktop with a proper app icon. Works offline. No app store needed - just click "Add to Home Screen" in your browser.
The Challenge
Beat the AI. Any board size.
High scores are tracked separately for you and the AI on every board configuration. Pick your favorite size, play a few rounds (starting positions are random), and see if you can outscore the machine.
The AI is hard to beat, but not impossible.
The Tech
Built with Vue 3 and Quasar. Sounds use Web Audio API - no audio files to download. High scores save to localStorage. The whole thing runs client-side with no backend.
It's a PWA, so you can install it on your phone and play offline.
105+ Playwright tests ensure the responsive design actually works across screen sizes. I built this partly as a testing ground for animation patterns we use in client projects.
What Would Make This Better?
This started as a side project, but if there's interest, I'd build more.
Some ideas I've considered:
- Difficulty levels for the AI
- Daily challenges (same starting board for everyone)
- Undo button (limited uses)
- Multiplayer mode
- Achievement system
What would you actually use? What's missing?
Drop a comment - I read them all.
Built by DCTSoft. Play the game: collapsibles.web.app
Originally published at codecrank.ai/blog
Top comments (0)