RailShift 3D

RailShift 3D is a complete, polished HTML5 railway puzzle game built with Phaser 3. Tap the glowing track switches to route trains to the stations that match their color and symbol, but think fast: every train keeps rolling. Deliver every train safely to earn 3 stars, climb through 60 handcrafted level layouts and beat your best scores.

100% procedurally generated graphics and WebAudio-synthesized sound. There are zero external image or audio files: the entire game ships as pure code, which makes it lightweight, fast-loading and endlessly customizable.

Highlights

• 60 levels built from 8 distinct junction layouts across 6 escalating difficulty tiers
• Tap/click track switching with animated glowing switch markers and route arrows
• Color plus colorblind-friendly symbol matching (square, circle, triangle, star, diamond, cross)
• Live route highlighting: the active switch path glows gold
• Trains with smoke particles, headlights, shadows and smooth rail movement
• Fail states with feedback: WRONG STATION, TRAIN COLLISION (camera shake and sparks), ROUTE BLOCKED
• 3-star scoring based on completion time and switch efficiency, with best-score tracking
• Level progression with unlock system and 5-page level select grid with star display
• Level complete modal with animated stars, score, best, time and switch count
• Pause / resume / restart flow with modal overlay
• How To Play tutorial screen with interactive switch diagram and station legend
• Settings modal: music, sound, vibration toggles plus quality selector (low/medium/high)
• Quality manager that scales particle counts and scenery density for slower devices
• Fully procedural WebAudio sound effects: horn, switch click, arrival chime, crash, success and fail stingers
• Generative procedural background music (no audio files)
• Ambient menu scene with animated train crossing the landscape
• localStorage save system: progress, stars, best scores and settings persist between sessions
• Vibration API feedback on supported devices (switch flips, arrivals, crashes)
• Responsive FIT scaling: letterboxed 16:9 canvas works on desktop, tablet and mobile
• Keyboard shortcuts: R to restart, ESC to pause
• Data-driven level format: add new levels by editing one plain object, no engine code changes

Technology

• Phaser 3.80 (single dependency)
• Vanilla JavaScript ES modules, zero frameworks
• Vite 5 build system (dev server and optimized production bundle)
• WebAudio API for all sound and music
• localStorage for persistence
• No third-party plugins, no external assets, no API keys: fully offline

What You Get

• Full, unminified ES-module source code with clear folder structure (scenes, game logic, managers, UI components)
• Documented, data-driven level builder: create 60+ levels from 8 layout generators
• Vite project with dev server and one-command production build
• Step-by-step documentation with screenshots: setup, renaming, re-theming, adding levels, building and publishing
• Ready-to-upload live preview build (index.html and bundled JS)

Please note: this is a source code template. Basic knowledge of JavaScript, npm and running terminal commands is required to customize and rebuild it. If you have questions, use the contact form on the site, I usually reply within 24 hours.