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, bundled with the game, for rendering and Web Audio API for procedurally synthesized sound effects. No npm installation is needed at runtime; use a static HTTP server to run it locally. The game is deployed on GitHub Pages, with an optional leaderboard powered by Supabase’s free tier. Total hosting cost: ¥0/month. The online leaderboard is currently unavailable; gameplay and locally saved progress still work.
↑ 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: Progressive Web App support makes the game installable to a phone’s home screen and playable offline after the initial online load and caching complete. The Service Worker uses a three-tier caching strategy: precached static assets, cache-first for other game resources, and Stale-While-Revalidate for previously loaded theme media. PixiJS ships with the site, so startup does not depend on a third-party CDN.
- Optional 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 that could not be uploaded remain queued locally for retry after the online service recovers; local progress is saved independently.
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.