Overview

This project uses a Modular state-driven architecture with a clear separation between logic, rendering, and input. The goal of this structure is to make features easy to add without breaking existing systems.

By separating update and draw phases, the code remains predictable, frame-rate independent, and easier to debug.

IMPORTANT NOTE:

The p5.js Web Editor does not support ES module imports → switch to local development!

The most up to date non-modular version of this project that will run on the web editor is v2.3 (SINGLE FILE): https://github.com/UoB-COMSM0166/2026-group-1/blob/496a6811c6db81a47fa46beab3b390756c9f7b2c/docs/georgia/platformer_dev_2.3/SINGLE FILE VERSION/sketch.js

🏁 Final architecture snapshot

InputSystem     → intent
PlayerSystem    → apply intent
PhysicsSystem   → resolve motion
TorchSystem     → resource +timing
RenderSystem    → draw state
Engine          → orchestrates

Game Project — Code Structure & Style Guide

1. Project Root

/project-root
│
├─ index.html             # HTML file that loads p5.js and sketch.js
├─ config.js              # Config file, for constants: gravity, jump power,
|                                                       canvas size
├─ sketch.js              # Main file: p5.js canvas, engine wiring,
|                                      darknessLayer, input bridge
├─ /gameEngine
│   └─ engine.js          # Engine class, runs update loop, registers systems
├─ /systems               # Modular game systems
│   ├─ inputSystem.js     # Handles input, sets player.intent
│   ├─ playerSystem.js    # Applies intent to player (movement/jump)
│   ├─ physicsSystem.js   # Gravity, collisions, landing checks
│   ├─ torchSystem.js     # Torch behaviour, flicker, power drain
│   └─ renderSystem.js    # Draws everything: background, platforms, player,
|                                             torch, UI
├─ /entities              # Optional: reusable classes
│   ├─ player.js          # Player class / data structure
│   └─ torch.js           # Torch class
|          
├─ /assets                # Images, sprites, sounds
│   ├─/images
|   | └─forrest.png
|   ├─/sprites
|   └─/sounds
| 	
└─ /utils                 # Optional: helper functions (e.g., constrain, lerp)

Config answers “what should exist?”

Instances ( eg. const torch = new Torch() )answer “what exists right now?”

Systems answer “what happens each frame?”

2. File Responsibilities

File	Responsibility
sketch.js	Main p5.js canvas; creates `darknessLayer`; initializes entities & systems; registers systems with `Engine`; forwards p5 input events.
gameEngine/engine.js	Engine class orchestrates game loop: calculates `deltaTime`, updates all systems, and calls draw phases.
systems/inputSystem.js	Sets player intent flags for movement/jump/torch; no direct side-effects on other systems.
systems/playerSystem.js	Applies movement and jump logic based on intent; updates player state.
systems/physicsSystem.js	Handles gravity and collision detection with ground and platforms; updates `player.onGround`.
systems/torchSystem.js	Manages torch on/off state, flicker timing, and drains player power.
systems/renderSystem.js	Draws background, platforms, player, torch light (via `darknessLayer`), and UI elements.
entities/player.js	Player class definition with default stats and resources.
entities/torch.js	Torch class definition with radius, flicker timer, and visibility logic.