# adamkjall/javascript-1-hop-top architecture

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

- Interactive diagram: https://gitdiagram.com/adamkjall/javascript-1-hop-top
- Repository: https://github.com/adamkjall/javascript-1-hop-top

## Overview

This is a browser-based p5 platform-jumping game: the player starts a run, navigates scrolling levels by bouncing on platforms, collects scoring and speed-boost items, and reaches a game-over screen with a local high-score list and replay options. The controller owns runtime orchestration; level generation, physics/collision, entities, and screens provide distinct domain responsibilities. The README is only a starter-template description, so additional capabilities and links here are based on sampled source; unsampled screens and helpers are represented only where the tree supports them.

Main entry points: [`sketch/gameController.ts`](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/gameController.ts) (Game controller), [`sketch/levelFactory.ts`](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/levelFactory.ts) (Level factory), [`sketch.ts`](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch.ts) (Sketch entry), [`sketch/collisionDetection.ts`](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/collisionDetection.ts) (Collision detection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Game runtime"]
  node_entry["Sketch entry<br/>[sketch.ts]"]
  node_controller["Game controller<br/>[gameController.ts]"]
end

subgraph group_world["Level world"]
  node_levels["Level factory<br/>[levelFactory.ts]"]
  node_level["Active level<br/>[level.ts]"]
  node_collision["Collision detection"]
end

subgraph group_entities["Player and objects"]
  node_playerlogic["Player movement<br/>[player.ts]"]
  node_blocks["Platform blocks<br/>[block.ts]"]
  node_fragile["Fragile blocks<br/>[fragileBlock.ts]"]
  node_items["Bonus items<br/>[item.ts]"]
  node_boost["Speed boost<br/>[speedBoost.ts]"]
  node_objects["Game objects<br/>[_gameObject.ts]"]
  node_position["Position model<br/>[position.ts]"]
end

subgraph group_screens["Game screens and score"]
  node_start["Start screen<br/>[startScreen.ts]"]
  node_instructions["How to play<br/>[HowToPlayScreen.ts]"]
  node_gameover["Game over<br/>[gameOverScreen.ts]"]
  node_scoreboard["Score display<br/>[scoreboard.ts]"]
  node_points["Points animation<br/>[pointsAnimation.ts]"]
end

node_player(("Player"))
node_p5(("p5 runtime"))
node_storage[("Browser storage")]
node_assets["Game assets"]

node_player -->|"plays"| node_entry
node_entry -->|"updates and draws"| node_controller
node_entry -->|"uses canvas"| node_p5
node_entry -->|"loads"| node_assets
node_controller -->|"creates levels"| node_levels
node_controller -->|"updates and draws"| node_level
node_controller -->|"moves and bounces"| node_playerlogic
node_controller -->|"checks contacts"| node_collision
node_controller -->|"shows"| node_start
node_controller -->|"shows"| node_instructions
node_controller -->|"shows"| node_gameover
node_controller -->|"draws"| node_scoreboard
node_controller -->|"reads and writes scores"| node_storage
node_levels -->|"constructs"| node_level
node_levels -->|"creates"| node_blocks
node_levels -->|"creates"| node_fragile
node_levels -->|"creates"| node_items
node_levels -->|"creates"| node_boost
node_blocks -->|"extends"| node_objects
node_fragile -->|"extends"| node_objects
node_items -->|"extends"| node_objects
node_boost -->|"extends"| node_items
node_playerlogic -->|"tracks position"| node_position
node_collision -->|"tests player"| node_playerlogic
node_collision -->|"tests platforms"| node_blocks
node_collision -->|"tests pickups"| node_items
node_controller -->|"applies effect"| node_boost
node_controller -->|"updates via level"| node_points
node_level -->|"moves and draws"| node_points
node_gameover -->|"reads scores"| node_storage
node_start -->|"reads and saves name"| node_storage
node_gameover -->|"restarts game"| node_controller

click node_entry "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch.ts"
click node_controller "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/gameController.ts"
click node_levels "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/levelFactory.ts"
click node_level "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/level.ts"
click node_collision "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/collisionDetection.ts"
click node_playerlogic "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/player.ts"
click node_blocks "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/block.ts"
click node_fragile "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/fragileBlock.ts"
click node_items "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/item.ts"
click node_boost "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/speedBoost.ts"
click node_objects "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/_gameObject.ts"
click node_position "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/position.ts"
click node_start "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/startScreen.ts"
click node_instructions "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/HowToPlayScreen.ts"
click node_gameover "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/gameOverScreen.ts"
click node_scoreboard "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/scoreboard.ts"
click node_points "https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/pointsAnimation.ts"
click node_assets "https://github.com/adamkjall/javascript-1-hop-top/tree/master/assets"

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_controller toneBlue
class node_levels,node_level,node_collision,node_storage toneAmber
class node_playerlogic,node_blocks,node_fragile,node_items,node_boost,node_objects,node_position toneMint
class node_start,node_instructions,node_gameover,node_scoreboard,node_points toneRose
class node_player,node_p5 toneIndigo
class node_assets toneTeal
```

## Components

### Game runtime

- [Sketch entry](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch.ts): `sketch.ts`
- [Game controller](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/gameController.ts): `sketch/gameController.ts`

### Level world

- [Level factory](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/levelFactory.ts): `sketch/levelFactory.ts`
- [Active level](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/level.ts): `sketch/level.ts`
- [Collision detection](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/collisionDetection.ts): `sketch/collisionDetection.ts`

### Player and objects

- [Player movement](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/player.ts): `sketch/player.ts`
- [Platform blocks](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/block.ts): `sketch/block.ts`
- [Fragile blocks](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/fragileBlock.ts): `sketch/fragileBlock.ts`
- [Bonus items](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/item.ts): `sketch/item.ts`
- [Speed boost](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/speedBoost.ts): `sketch/speedBoost.ts`
- [Game objects](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/_gameObject.ts): `sketch/_gameObject.ts`
- [Position model](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/position.ts): `sketch/position.ts`

### Game screens and score

- [Start screen](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/startScreen.ts): `sketch/startScreen.ts`
- [How to play](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/HowToPlayScreen.ts): `sketch/HowToPlayScreen.ts`
- [Game over](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/gameOverScreen.ts): `sketch/gameOverScreen.ts`
- [Score display](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/scoreboard.ts): `sketch/scoreboard.ts`
- [Points animation](https://github.com/adamkjall/javascript-1-hop-top/blob/master/sketch/pointsAnimation.ts): `sketch/pointsAnimation.ts`

### Other components

- **Player**
- **p5 runtime**
- **Browser storage**
- [Game assets](https://github.com/adamkjall/javascript-1-hop-top/tree/master/assets): `assets`

## Connections

- Player → Sketch entry: plays
- Sketch entry → Game controller: updates and draws
- Sketch entry → p5 runtime: uses canvas
- Sketch entry → Game assets: loads
- Game controller → Level factory: creates levels
- Game controller → Active level: updates and draws
- Game controller → Player movement: moves and bounces
- Game controller → Collision detection: checks contacts
- Game controller → Start screen: shows
- Game controller → How to play: shows
- Game controller → Game over: shows
- Game controller → Score display: draws
- Game controller → Browser storage: reads and writes scores
- Level factory → Active level: constructs
- Level factory → Platform blocks: creates
- Level factory → Fragile blocks: creates
- Level factory → Bonus items: creates
- Level factory → Speed boost: creates
- Platform blocks → Game objects: extends
- Fragile blocks → Game objects: extends
- Bonus items → Game objects: extends
- Speed boost → Bonus items: extends
- Player movement → Position model: tracks position
- Collision detection → Player movement: tests player
- Collision detection → Platform blocks: tests platforms
- Collision detection → Bonus items: tests pickups
- Game controller → Speed boost: applies effect
- Game controller → Points animation: updates via level
- Active level → Points animation: moves and draws
- Game over → Browser storage: reads scores
- Start screen → Browser storage: reads and saves name
- Game over → Game controller: restarts game