Tile Explorer is a browser-based tile-matching puzzle game I built in 24 hours. The entire project runs on a purely native web stack — PixiJS (loaded via CDN) for rendering, Web Audio API for procedurally synthesized sound effects, zero build tools, zero npm dependencies. Double-click index.html and it just runs. The game is deployed on GitHub Pages, with a live leaderboard powered by Supabase’s free tier. Total hosting cost: ¥0/month.
↑ Playable right here (requires an internet connection to load)
Core gameplay: Patterned tiles are stacked across the board. Tap an accessible tile to send it into a 7-slot collection tray at the bottom. Match 3 identical patterns and they clear automatically. Clear every tile from the board to complete the level.
Key highlights of the project:
- Mathematically guaranteed solvability: Level layouts are generated from a difficulty formula where total tile count =
patternTypes × setsPerType × 3, which structurally ensures every pattern appears in multiples of three. A backtracking solver runs inside a Web Worker to forward-validate each layout — only layouts with a confirmed solution path are accepted. The solver also records the optimal move count, which serves as the star-rating baseline. - Procedural audio synthesis: Every interactive sound effect — taps, clears, combos, power-ups, warnings — is synthesized in real time via the Web Audio API. Zero audio files, zero network requests. Combo sounds are built on a C-major chord progression system, progressively brightening from triangle waves to sawtooth waves to give players a satisfying sense of escalating momentum. When BGM is playing, sound effects auto-duck by 6dB and smoothly recover over 200ms.
- Data-driven architecture: Difficulty curves, power-up properties, and theme configurations are all declarative, editable config tables. A designer can tune difficulty curves and power-up parameters by editing JS config files directly — no touching game logic code. Six visual themes each have their own library of 32 emoji patterns, a background image, and a BGM track; themes rotate automatically every 3 levels.
- PWA + offline support: Full Progressive Web App support is implemented — installable to a phone’s home screen and fully playable offline. The Service Worker uses a three-tier caching strategy: precached static assets, cache-first for CDN resources, and Stale-While-Revalidate for theme media. Dual-CDN failover provides automatic fallback.
- Zero-cost online leaderboard: Built on Supabase’s free tier (PostgreSQL + REST API). A UUID is auto-generated on first visit and stored in localStorage — no account required. The database enforces row-level security (RLS); the client holds only the anon key. All input goes through dual regex validation plus XSS sanitization. Scores earned offline are queued locally and submitted automatically once connectivity is restored.
On the engineering side: tile occlusion uses spatial hashing (O(n) instead of O(n²)); clear particle effects use a pre-allocated object pool to avoid GC jitter; opacity calculations follow an exponential decay model based on the Weber–Fechner law; and the collection slots use a smart clustering insertion algorithm to help players quickly spot matching opportunities.
The entire project was completed within 24 hours. My own code spans 14 JS modules + 3 CSS files + 1 HTML file, covering 10,000 levels, 6 power-up types, and 6 themes. AI assistance generated the vast majority of the code, along with all audio synthesis parameters and BGM assets. My role focused on architecture design, requirements refinement, data structure design, and overall code quality.