# cauecrb/jogosimplesfb architecture

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

- Interactive diagram: https://gitdiagram.com/cauecrb/jogosimplesfb
- Repository: https://github.com/cauecrb/jogosimplesfb

## Overview

Flappy is a small browser game: the player holds a key to make the bird rise, releases it to fall, and steers through pipe gaps to score points. The game controller creates the game entities and runs their animation and collision loop. The sampled JavaScript supports the runtime flow; HTML and CSS contents were not sampled, so their wiring and styling relationships are omitted.

Main entry points: [`js/flappy.js`](https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js) (Game controller), [`flappy.html`](https://github.com/cauecrb/jogosimplesfb/blob/master/flappy.html) (Game area)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Game runtime"]
  node_game["Game controller<br/>[flappy.js]"]
  node_bird["Bird movement<br/>[flappy.js]"]
  node_pipes["Pipe pairs<br/>[flappy.js]"]
  node_barriers["Pipe animation<br/>[flappy.js]"]
  node_collision["Collision check<br/>[flappy.js]"]
  node_progress["Score display<br/>[flappy.js]"]
  node_gamearea["Game area<br/>[flappy.html]"]
end

subgraph group_input["Player input"]
  node_player(("Player"))
end

node_game -->|"queries and renders"| node_gamearea
node_game -->|"creates"| node_bird
node_game -->|"creates"| node_barriers
node_game -->|"creates"| node_progress
node_game -->|"appends"| node_pipes
node_game -->|"animates"| node_bird
node_game -->|"animates"| node_barriers
node_game -->|"checks"| node_collision
node_game -->|"appends"| node_progress
node_player -->|"key input"| node_bird
node_barriers -->|"moves and recycles"| node_pipes
node_barriers -->|"reports point"| node_progress
node_collision -->|"checks overlap"| node_bird
node_collision -->|"checks overlap"| node_pipes

click node_game "https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js"
click node_bird "https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js"
click node_pipes "https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js"
click node_barriers "https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js"
click node_collision "https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js"
click node_progress "https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js"
click node_gamearea "https://github.com/cauecrb/jogosimplesfb/blob/master/flappy.html"

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_game,node_bird,node_pipes,node_barriers,node_collision,node_progress,node_gamearea toneBlue
class node_player toneAmber
```

## Components

### Game runtime

- [Game controller](https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js): `js/flappy.js`
- [Bird movement](https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js): `js/flappy.js`
- [Pipe pairs](https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js): `js/flappy.js`
- [Pipe animation](https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js): `js/flappy.js`
- [Collision check](https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js): `js/flappy.js`
- [Score display](https://github.com/cauecrb/jogosimplesfb/blob/master/js/flappy.js): `js/flappy.js`
- [Game area](https://github.com/cauecrb/jogosimplesfb/blob/master/flappy.html): `flappy.html`

### Player input

- **Player**

## Connections

- Game controller → Game area: queries and renders
- Game controller → Bird movement: creates
- Game controller → Pipe animation: creates
- Game controller → Score display: creates
- Game controller → Pipe pairs: appends
- Game controller → Bird movement: animates
- Game controller → Pipe animation: animates
- Game controller → Collision check: checks
- Game controller → Score display: appends
- Player → Bird movement: key input
- Pipe animation → Pipe pairs: moves and recycles
- Pipe animation → Score display: reports point
- Collision check → Bird movement: checks overlap
- Collision check → Pipe pairs: checks overlap