# rohanchacko/subway-surfers architecture

> Architecture diagram of the GitHub repository rohanchacko/subway-surfers, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rohanchacko/subway-surfers
- Repository: https://github.com/rohanchacko/subway-surfers
- Video tour (about a minute): https://gitdiagram.com/rohanchacko/subway-surfers/video

## Overview

Subway Surfers is a browser-based WebGL endless-runner. The player opens the game, steers or jumps between lanes, collects coins and boosts, and avoids obstacles while the world scrolls; coin score can trigger the finish-line sequence. The graph separates game orchestration, runner rules, world and pickups, and rendering support. Main-loop calls and several entity behaviors are evidenced by sampled source; additional documented features, including textured objects, lighting, and background music, are represented without asserting unsampled wiring.

Main entry points: [`src/main.js`](https://github.com/rohanchacko/subway-surfers/blob/master/src/main.js) (Game loop), [`src/player.js`](https://github.com/rohanchacko/subway-surfers/blob/master/src/player.js) (Player), [`src/draw.js`](https://github.com/rohanchacko/subway-surfers/blob/master/src/draw.js) (Scene renderer), [`game.html`](https://github.com/rohanchacko/subway-surfers/blob/master/game.html) (WebGL canvas)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Game runtime"]
  node_main["Game loop<br/>[main.js]"]
  node_utility["Game utilities<br/>[utility.js]"]
end

subgraph group_runner["Runner gameplay"]
  node_player["Player<br/>[player.js]"]
  node_police["Police pursuer<br/>[police.js]"]
  node_input["Keyboard input<br/>[keyhandler.js]"]
end

subgraph group_world["World and pickups"]
  node_obstacles["Train obstacles<br/>[obstacle.js]"]
  node_barriers["Barriers<br/>[barrier.js]"]
  node_coins["Coin scoring<br/>[coin.js]"]
  node_boosts["Power-ups<br/>[boost.js]"]
  node_tracks["Track segments<br/>[track.js]"]
  node_ground["Ground<br/>[ground.js]"]
  node_walls["Track walls<br/>[wall.js]"]
  node_finish["Finish line<br/>[finishline.js]"]
end

subgraph group_render["Rendering and assets"]
  node_draw["Scene renderer<br/>[draw.js]"]
  node_camera["Camera<br/>[camera.js]"]
  node_texture["Texture loading<br/>[texture.js]"]
  node_music["Background music<br/>[bgmusic.mp3]"]
end

node_webgl(("WebGL canvas<br/>[game.html]"))

node_webgl -->|"starts game"| node_main
node_input -->|"sets key state"| node_player
node_main -->|"updates"| node_player
node_main -->|"updates"| node_police
node_main -->|"ticks"| node_barriers
node_main -->|"ticks"| node_coins
node_main -->|"ticks"| node_boosts
node_main -->|"ticks"| node_tracks
node_main -->|"ticks"| node_ground
node_main -->|"spawns"| node_obstacles
node_main -->|"ticks at score"| node_finish
node_main -->|"draws scene"| node_draw
node_draw -->|"renders frames"| node_webgl
node_draw -.->|"uses view setup"| node_camera
node_player -->|"collects for score"| node_coins
node_player -->|"activates"| node_boosts
node_player -->|"collision ends run"| node_obstacles
node_barriers -->|"sets back"| node_police
node_finish -->|"checks score"| node_player
node_texture -->|"loads textures"| node_webgl

click node_player "https://github.com/rohanchacko/subway-surfers/blob/master/src/player.js"
click node_police "https://github.com/rohanchacko/subway-surfers/blob/master/src/police.js"
click node_input "https://github.com/rohanchacko/subway-surfers/blob/master/src/keyhandler.js"
click node_obstacles "https://github.com/rohanchacko/subway-surfers/blob/master/src/obstacle.js"
click node_barriers "https://github.com/rohanchacko/subway-surfers/blob/master/src/barrier.js"
click node_coins "https://github.com/rohanchacko/subway-surfers/blob/master/src/coin.js"
click node_boosts "https://github.com/rohanchacko/subway-surfers/blob/master/src/boost.js"
click node_tracks "https://github.com/rohanchacko/subway-surfers/blob/master/src/track.js"
click node_ground "https://github.com/rohanchacko/subway-surfers/blob/master/src/ground.js"
click node_walls "https://github.com/rohanchacko/subway-surfers/blob/master/src/wall.js"
click node_finish "https://github.com/rohanchacko/subway-surfers/blob/master/src/finishline.js"
click node_main "https://github.com/rohanchacko/subway-surfers/blob/master/src/main.js"
click node_draw "https://github.com/rohanchacko/subway-surfers/blob/master/src/draw.js"
click node_camera "https://github.com/rohanchacko/subway-surfers/blob/master/src/camera.js"
click node_texture "https://github.com/rohanchacko/subway-surfers/blob/master/src/texture.js"
click node_utility "https://github.com/rohanchacko/subway-surfers/blob/master/src/utility.js"
click node_webgl "https://github.com/rohanchacko/subway-surfers/blob/master/game.html"
click node_music "https://github.com/rohanchacko/subway-surfers/blob/master/assets/bgmusic.mp3"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_utility toneBlue
class node_player,node_police,node_input toneAmber
class node_obstacles,node_barriers,node_coins,node_boosts,node_tracks,node_ground,node_walls,node_finish toneMint
class node_draw,node_camera,node_texture,node_music toneRose
class node_webgl toneTeal
```

## Components

### Game runtime

- [Game loop](https://github.com/rohanchacko/subway-surfers/blob/master/src/main.js): `src/main.js`
- [Game utilities](https://github.com/rohanchacko/subway-surfers/blob/master/src/utility.js): `src/utility.js`

### Runner gameplay

- [Player](https://github.com/rohanchacko/subway-surfers/blob/master/src/player.js): `src/player.js`
- [Police pursuer](https://github.com/rohanchacko/subway-surfers/blob/master/src/police.js): `src/police.js`
- [Keyboard input](https://github.com/rohanchacko/subway-surfers/blob/master/src/keyhandler.js): `src/keyhandler.js`

### World and pickups

- [Train obstacles](https://github.com/rohanchacko/subway-surfers/blob/master/src/obstacle.js): `src/obstacle.js`
- [Barriers](https://github.com/rohanchacko/subway-surfers/blob/master/src/barrier.js): `src/barrier.js`
- [Coin scoring](https://github.com/rohanchacko/subway-surfers/blob/master/src/coin.js): `src/coin.js`
- [Power-ups](https://github.com/rohanchacko/subway-surfers/blob/master/src/boost.js): `src/boost.js`
- [Track segments](https://github.com/rohanchacko/subway-surfers/blob/master/src/track.js): `src/track.js`
- [Ground](https://github.com/rohanchacko/subway-surfers/blob/master/src/ground.js): `src/ground.js`
- [Track walls](https://github.com/rohanchacko/subway-surfers/blob/master/src/wall.js): `src/wall.js`
- [Finish line](https://github.com/rohanchacko/subway-surfers/blob/master/src/finishline.js): `src/finishline.js`

### Rendering and assets

- [Scene renderer](https://github.com/rohanchacko/subway-surfers/blob/master/src/draw.js): `src/draw.js`
- [Camera](https://github.com/rohanchacko/subway-surfers/blob/master/src/camera.js): `src/camera.js`
- [Texture loading](https://github.com/rohanchacko/subway-surfers/blob/master/src/texture.js): `src/texture.js`
- [Background music](https://github.com/rohanchacko/subway-surfers/blob/master/assets/bgmusic.mp3): `assets/bgmusic.mp3`

### Other components

- [WebGL canvas](https://github.com/rohanchacko/subway-surfers/blob/master/game.html): `game.html`

## Connections

- WebGL canvas → Game loop: starts game
- Keyboard input → Player: sets key state
- Game loop → Player: updates
- Game loop → Police pursuer: updates
- Game loop → Barriers: ticks
- Game loop → Coin scoring: ticks
- Game loop → Power-ups: ticks
- Game loop → Track segments: ticks
- Game loop → Ground: ticks
- Game loop → Train obstacles: spawns
- Game loop → Finish line: ticks at score
- Game loop → Scene renderer: draws scene
- Scene renderer → WebGL canvas: renders frames
- Scene renderer → Camera: uses view setup
- Player → Coin scoring: collects for score
- Player → Power-ups: activates
- Player → Train obstacles: collision ends run
- Barriers → Police pursuer: sets back
- Finish line → Player: checks score
- Texture loading → WebGL canvas: loads textures