CASE STUDY 15 / Independent product · Browser strategy game

Catch That Train! — A Journey Under Pressure

A portrait mobile browser strategy game about catching a high-speed train in China. Four travelers navigate six stations, balancing time, energy, directions and everyday interruptions. I built the React and TypeScript experience, including touch and keyboard controls, bilingual presentation, local achievements and shareable results.

Playable browser game · English & Chinese
CONTEXT

Personal project

MY ROLE

Independent developer

TOOLS & FOCUS

React / TypeScript · Game state / Shared clock · Touch / Spatial interaction · i18n / Verification

THE GAME IN PLAY

One journey. Three moments.

A portrait game made for phones. Choose a traveler, find your direction and make it to the train.

The English Catch That Train mobile start screen with swipeable traveler cards, station choices and a fixed start action.

01Choose a journey

Choose your traveler and station.

Open full image ↗
Two English metro direction choices in the phone layout of Catch That Train, beneath a live boarding countdown.

02Find your direction

Read the signs and catch the right metro.

Open full image ↗
The English Catch That Train station interface on a phone, with the student walking through Hongqiao, stamina, lane controls and a sprint button.

03Make the train

Change lanes, manage stamina and keep moving.

Open full image ↗

01 / THE PROBLEM

What needed to work.

Make rushing for a train feel tense but understandable. A route, a queue, a distraction or a burst of sprinting can change the outcome. Players need clear choices and feedback, while the game needs consistent time, movement and resource rules across different travelers and stations.

CONCEPT / 15
01Prepare + choose a route
02Navigate + manage resources
03Board + review the journey
Illustrative workflow · Not a product screenshot

A summary of my responsibilities and technical approach. This workflow illustration does not reproduce the product UI.

02 / MY CONTRIBUTION

Where I took ownership.

  • Built preparation, metro and station interfaces for four playable travelers across six station scenarios, with Normal and Extreme modes.
  • Implemented a shared game-state engine for deadlines, route costs, stamina, interruptions and result attribution.
  • Developed touch and keyboard controls, lane obstacles and collision-aware entrance scenes for the student at Shanghai Hongqiao.
  • Added English and Chinese display, local achievements and character unlocks, same-station challenge links and result-image exports.
  • Used automated tests and seeded simulations to verify transitions, resource boundaries and different journey strategies.

03 / TECHNICAL APPROACH

Decisions in context.

One clock, several kinds of time

Movement, handling, waiting and metro travel have different time rules. The engine separates actual input time from fixed task costs, then derives recovery from time already charged. Route forecasts and journey budgets reuse these rules to keep the interface and outcomes consistent.

04 / DELIVERY & REFLECTION

What I can share.

Delivery.

A playable English and Chinese browser game with four traveler chapters, six station scenarios, local achievements and shareable results. The student’s Hongqiao chapter adds walkable entrance scenes. Station layouts are gameplay abstractions; progress stays in the current browser, and family mode remains planned.

Have a similar challenge?

Let’s talk ↗