Switchyard Train Switch Puzzle Game – HTML, CSS & JS

Switchyard is a train routing puzzle built for a wide desktop screen. Coloured trains roll out of tunnels on the left of the yard and run to the right along branching tracks. Every station on the right edge has a colour, and your job is to flip the junctions so each train arrives at the station that matches it. Three misses end the run. It is plain HTML, CSS and JavaScript on one canvas, with no libraries, no images and no audio files.

A yard generated from data

Each of the 20 levels is a small object in the LEVELS array: how many stations, one or two entry tunnels, the train speed, how many trains, the average gap between them, how many track tunnels and whether the entry tunnel is long. tryLayout() turns that into a track network. It splits the stations into a random binary tree (each split is a junction), places junctions in columns across the width, and draws every track as a cubic Bezier curve with a lookup table for travelling along it. A seeded random generator (mulberry32) means a level always produces the same yard, and layouts that are cramped or confusing are rejected and rebuilt from the next seed.

Trains that follow the switches

A train keeps a short history of the track pieces it has travelled and its distance along the current one. When its head reaches a junction, it reads the switch at that moment and continues on the chosen branch, so flipping a switch after a train has passed has no effect on it. The engine and its two wagons are placed at fixed distances behind the head, which makes them bend naturally around curves. The engine throws a headlight cone ahead and puffs steam.

Readability: the live route glows

The route from each tunnel through the current switch positions glows in the colour of the station it ends at, and each junction's ring and arrow take the same colour. You can read at a glance where the next train will go. A "Next" chip at each tunnel shows the colours of the next two trains, and the first one pulses just before it appears.

Five groups of mechanics

Levels 1 to 8 add junctions, colours and speed. Levels 9 to 12 add tunnels that hide passing trains and a long entry tunnel, so you see each train's colour later and the "Next" chip shows a question mark. Levels 13 to 16 add a second entry tunnel whose tracks cross the first. Crossings are marked with yellow diamonds, and two trains that meet there crash. Levels 17 to 20 combine everything at higher speeds.

Reasons to come back

Every level awards one to three stars (three for no misses), the next level unlocks with one star, and the menu shows your total out of 60. The Daily Route builds a new yard from the date, so everyone gets the same puzzle that day. Clearing it keeps a day streak going, and a Copy result button gives a short line to share. Progress, best scores and the streak are saved in localStorage inside try/catch, so the game still runs in a sandboxed iframe.

Feel

Sound comes from a tiny Web Audio synth: a click when a switch flips, a whistle when a train leaves its tunnel, a chime whose pitch rises with your combo, a buzz on a wrong station and a crash. Deliveries in a row build a combo up to x5. Particles, a screen shake on crashes and an animated star reveal on the results screen finish it off. Behind the menu, a demo yard runs itself with an autopilot that sets each switch for the nearest train.