# rcouldbe/web-game architecture

> Architecture diagram of the GitHub repository rcouldbe/web-game, 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/rcouldbe/web-game
- Repository: https://github.com/rcouldbe/web-game

## Overview

Sky Hopper is a small browser game: the player jumps to avoid obstacles and tries to maximize a score that increases during play. The main runtime flow is input, game update, obstacle/collision handling, and HUD feedback; the best score is persisted in browser storage. The source shows the game logic and its DOM interactions, but the HTML and CSS contents were not sampled, so their internal structure and loading details are not expanded.

Main entry points: [`script.js`](https://github.com/rcouldbe/web-game/blob/main/script.js) (Animation loop), [`index.html`](https://github.com/rcouldbe/web-game/blob/main/index.html) (Game page), [`style.css`](https://github.com/rcouldbe/web-game/blob/main/style.css) (Game styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Browser presentation"]
  node_page["Game page<br/>[index.html]"]
  node_styles["Game styling<br/>[style.css]"]
end

subgraph group_gameplay["Game runtime"]
  node_input["Game input<br/>[script.js]"]
  node_lifecycle["Game lifecycle<br/>[script.js]"]
  node_loop["Animation loop<br/>[script.js]"]
  node_player_motion["Player motion<br/>[script.js]"]
  node_obstacles["Obstacle handling<br/>[script.js]"]
  node_collision["Collision check<br/>[script.js]"]
  node_hud["Score and messages<br/>[script.js]"]
  node_storage[("Best score storage")]
end

node_player(("Player"))
node_browser["Browser APIs"]

node_player -->|"taps or keys"| node_input
node_page -->|"provides game elements"| node_input
node_styles -->|"styles"| node_page
node_input -->|"starts game"| node_lifecycle
node_input -->|"jumps"| node_player_motion
node_lifecycle -->|"requests frames"| node_loop
node_loop -->|"spawns and moves"| node_obstacles
node_loop -->|"updates"| node_player_motion
node_loop -->|"checks overlaps"| node_collision
node_loop -->|"updates score display"| node_hud
node_collision -->|"ends game"| node_lifecycle
node_lifecycle -->|"reads and saves best"| node_storage
node_lifecycle -->|"updates message"| node_hud
node_loop -->|"requests animation frames"| node_browser
node_lifecycle -->|"cancels animation frame"| node_browser

click node_page "https://github.com/rcouldbe/web-game/blob/main/index.html"
click node_styles "https://github.com/rcouldbe/web-game/blob/main/style.css"
click node_input "https://github.com/rcouldbe/web-game/blob/main/script.js"
click node_lifecycle "https://github.com/rcouldbe/web-game/blob/main/script.js"
click node_loop "https://github.com/rcouldbe/web-game/blob/main/script.js"
click node_player_motion "https://github.com/rcouldbe/web-game/blob/main/script.js"
click node_obstacles "https://github.com/rcouldbe/web-game/blob/main/script.js"
click node_collision "https://github.com/rcouldbe/web-game/blob/main/script.js"
click node_hud "https://github.com/rcouldbe/web-game/blob/main/script.js"

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_page,node_styles,node_browser toneBlue
class node_input,node_lifecycle,node_loop,node_player_motion,node_obstacles,node_collision,node_hud,node_storage toneAmber
class node_player toneIndigo
```

## Components

### Browser presentation

- [Game page](https://github.com/rcouldbe/web-game/blob/main/index.html): `index.html`
- [Game styling](https://github.com/rcouldbe/web-game/blob/main/style.css): `style.css`

### Game runtime

- [Game input](https://github.com/rcouldbe/web-game/blob/main/script.js): `script.js`
- [Game lifecycle](https://github.com/rcouldbe/web-game/blob/main/script.js): `script.js`
- [Animation loop](https://github.com/rcouldbe/web-game/blob/main/script.js): `script.js`
- [Player motion](https://github.com/rcouldbe/web-game/blob/main/script.js): `script.js`
- [Obstacle handling](https://github.com/rcouldbe/web-game/blob/main/script.js): `script.js`
- [Collision check](https://github.com/rcouldbe/web-game/blob/main/script.js): `script.js`
- [Score and messages](https://github.com/rcouldbe/web-game/blob/main/script.js): `script.js`
- **Best score storage**

### Other components

- **Player**
- **Browser APIs**

## Connections

- Player → Game input: taps or keys
- Game page → Game input: provides game elements
- Game styling → Game page: styles
- Game input → Game lifecycle: starts game
- Game input → Player motion: jumps
- Game lifecycle → Animation loop: requests frames
- Animation loop → Obstacle handling: spawns and moves
- Animation loop → Player motion: updates
- Animation loop → Collision check: checks overlaps
- Animation loop → Score and messages: updates score display
- Collision check → Game lifecycle: ends game
- Game lifecycle → Best score storage: reads and saves best
- Game lifecycle → Score and messages: updates message
- Animation loop → Browser APIs: requests animation frames
- Game lifecycle → Browser APIs: cancels animation frame