# gfpeltier/ts-tanks architecture

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

- Interactive diagram: https://gitdiagram.com/gfpeltier/ts-tanks
- Repository: https://github.com/gfpeltier/ts-tanks

## Overview

TypeScript Tanks is a browser-based PixiJS tank game. The player uses keyboard controls to move and aim a tank, adjust firing power, and launch projectiles. Each frame, the game updates the tank and projectiles against generated terrain; projectile impacts remove terrain around an explosion. A status widget displays tank angle, health, and power. Terrain generation combines a cubic spline surface with a quadtree of grass sprites. Source samples establish these core runtime links; broader gameplay capabilities are not documented in the README.

Main entry points: [`src/index.ts`](https://github.com/gfpeltier/ts-tanks/blob/master/src/index.ts) (Game loop), [`src/models/tank.ts`](https://github.com/gfpeltier/ts-tanks/blob/master/src/models/tank.ts) (Tank movement), [`src/models/terrain.ts`](https://github.com/gfpeltier/ts-tanks/blob/master/src/models/terrain.ts) (Terrain model), [`src/models/projectile.ts`](https://github.com/gfpeltier/ts-tanks/blob/master/src/models/projectile.ts) (Projectile physics)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_game["Game runtime"]
  node_entry["Game loop<br/>[index.ts]"]
  node_controls["Keyboard controls<br/>[controls.ts]"]
end

subgraph group_combat["Tank combat"]
  node_tank["Tank movement<br/>[tank.ts]"]
  node_projectile["Projectile physics<br/>[projectile.ts]"]
end

subgraph group_terrain["Terrain system"]
  node_terrain["Terrain model<br/>[terrain.ts]"]
  node_spline["Surface spline<br/>[cspline.ts]"]
  node_quadtree["Terrain quadtree<br/>[quadtree.ts]"]
end

subgraph group_display["Rendering and UI"]
  node_sprites["Sprite assets<br/>[sprites.ts]"]
  node_sheet["Sprite sheet<br/>[spritesheet.json]"]
  node_status["Status widget<br/>[widgets.ts]"]
end

node_player(("Player"))

node_player -->|"presses keys"| node_controls
node_entry -->|"registers keys"| node_controls
node_controls -->|"dispatches callbacks"| node_entry
node_entry -->|"updates movement"| node_tank
node_entry -->|"creates terrain"| node_terrain
node_entry -->|"spawns tank"| node_tank
node_entry -->|"updates projectiles"| node_projectile
node_entry -->|"draws status"| node_status
node_entry -->|"loads assets"| node_sprites
node_tank -->|"checks collision"| node_terrain
node_tank -->|"creates projectile"| node_projectile
node_projectile -->|"checks impact"| node_terrain
node_projectile -->|"applies explosion"| node_terrain
node_terrain -->|"samples surface"| node_spline
node_terrain -->|"queries terrain"| node_quadtree
node_quadtree -->|"tests surface"| node_spline
node_quadtree -->|"creates grass"| node_sprites
node_tank -->|"gets tank sprites"| node_sprites
node_projectile -->|"gets projectile sprite"| node_sprites
node_sprites -->|"loads textures"| node_sheet
node_status -->|"reads tank state"| node_tank

click node_entry "https://github.com/gfpeltier/ts-tanks/blob/master/src/index.ts"
click node_controls "https://github.com/gfpeltier/ts-tanks/blob/master/src/controls.ts"
click node_tank "https://github.com/gfpeltier/ts-tanks/blob/master/src/models/tank.ts"
click node_projectile "https://github.com/gfpeltier/ts-tanks/blob/master/src/models/projectile.ts"
click node_terrain "https://github.com/gfpeltier/ts-tanks/blob/master/src/models/terrain.ts"
click node_spline "https://github.com/gfpeltier/ts-tanks/blob/master/src/cspline.ts"
click node_quadtree "https://github.com/gfpeltier/ts-tanks/blob/master/src/quadtree.ts"
click node_sprites "https://github.com/gfpeltier/ts-tanks/blob/master/src/sprites.ts"
click node_sheet "https://github.com/gfpeltier/ts-tanks/blob/master/img/spritesheet.json"
click node_status "https://github.com/gfpeltier/ts-tanks/blob/master/src/widgets.ts"

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_entry,node_controls toneBlue
class node_tank,node_projectile toneAmber
class node_terrain,node_spline,node_quadtree toneMint
class node_sprites,node_sheet,node_status toneRose
class node_player toneIndigo
```

## Components

### Game runtime

- [Game loop](https://github.com/gfpeltier/ts-tanks/blob/master/src/index.ts): `src/index.ts`
- [Keyboard controls](https://github.com/gfpeltier/ts-tanks/blob/master/src/controls.ts): `src/controls.ts`

### Tank combat

- [Tank movement](https://github.com/gfpeltier/ts-tanks/blob/master/src/models/tank.ts): `src/models/tank.ts`
- [Projectile physics](https://github.com/gfpeltier/ts-tanks/blob/master/src/models/projectile.ts): `src/models/projectile.ts`

### Terrain system

- [Terrain model](https://github.com/gfpeltier/ts-tanks/blob/master/src/models/terrain.ts): `src/models/terrain.ts`
- [Surface spline](https://github.com/gfpeltier/ts-tanks/blob/master/src/cspline.ts): `src/cspline.ts`
- [Terrain quadtree](https://github.com/gfpeltier/ts-tanks/blob/master/src/quadtree.ts): `src/quadtree.ts`

### Rendering and UI

- [Sprite assets](https://github.com/gfpeltier/ts-tanks/blob/master/src/sprites.ts): `src/sprites.ts`
- [Sprite sheet](https://github.com/gfpeltier/ts-tanks/blob/master/img/spritesheet.json): `img/spritesheet.json`
- [Status widget](https://github.com/gfpeltier/ts-tanks/blob/master/src/widgets.ts): `src/widgets.ts`

### Other components

- **Player**

## Connections

- Player → Keyboard controls: presses keys
- Game loop → Keyboard controls: registers keys
- Keyboard controls → Game loop: dispatches callbacks
- Game loop → Tank movement: updates movement
- Game loop → Terrain model: creates terrain
- Game loop → Tank movement: spawns tank
- Game loop → Projectile physics: updates projectiles
- Game loop → Status widget: draws status
- Game loop → Sprite assets: loads assets
- Tank movement → Terrain model: checks collision
- Tank movement → Projectile physics: creates projectile
- Projectile physics → Terrain model: checks impact
- Projectile physics → Terrain model: applies explosion
- Terrain model → Surface spline: samples surface
- Terrain model → Terrain quadtree: queries terrain
- Terrain quadtree → Surface spline: tests surface
- Terrain quadtree → Sprite assets: creates grass
- Tank movement → Sprite assets: gets tank sprites
- Projectile physics → Sprite assets: gets projectile sprite
- Sprite assets → Sprite sheet: loads textures
- Status widget → Tank movement: reads tank state