GameCanvas Component
Relevant source files
The following files were used as context for generating this wiki page:
The GameCanvas component serves as the primary engine for the Kilo Man platformer. It is responsible for the game loop, physics calculations, collision detection, and rendering using the HTML5 Canvas API. It operates as a child of the GameContainer, receiving game status and jump modifiers to influence gameplay behavior.
The component encapsulates complex logic for a camera system that tracks the player, a parallax background system for depth, and an entity management system that handles platforms, hazards, monsters, and goals.
Sources: app/components/Game/GameCanvas.tsx, architecture_plan.md:14-22
Core Architecture and Data Flow
GameCanvas utilizes React refs to maintain high-frequency mutable state (player position, velocity, camera offsets, and monster states) outside of the standard React render cycle to ensure performance at 60 FPS.
The game loop is driven by requestAnimationFrame, which triggers the update and draw functions sequentially.
Sources: app/components/Game/GameCanvas.tsx:189-354, app/components/Game/GameContainer.tsx:48-52
Physics and Player Movement
The component implements a 2D physics system based on acceleration and friction. Player movement is influenced by CONFIG constants and external modifiers passed via props.
| Constant | Value | Description |
|---|---|---|
gravity | 0.6 | Downward acceleration applied every frame |
friction | 0.85 | Horizontal velocity decay |
moveSpeed | 0.8 | Acceleration when moving left/right |
maxSpeed | 8.0 | Velocity cap for the player |
baseJumpForce | -14 | Initial upward velocity for jumping |
levelWidth | 7000 | Total horizontal bounds of the world |
Sources: app/components/Game/GameCanvas.tsx:37-44, app/components/Game/types.ts:55-62
Jump Logic
Jumping is calculated by multiplying the baseJumpForce by a jumpModifier provided by the UIOverlay via the GameContainer. This allows for dynamic gameplay adjustments.
Sources: app/components/Game/GameCanvas.tsx:219-222, app/components/Game/UIOverlay.tsx:27-37
Camera and Viewport System
To handle levels larger than the screen (up to 7000px wide), GameCanvas implements a camera system that centers on the player while applying clamping to prevent showing out-of-bounds areas.
X-Axis:* The camera follows the player horizontally, centered at player.x - canvas.width / 2.
- Y-Axis: Includes a "deadzone" logic. The camera remains fixed at ground level unless the player climbs significantly high or falls into a pit.
- Smoothing: Uses a lerp factor of 0.1 for X and 0.05 for Y to prevent jitter.
Sources: app/components/Game/GameCanvas.tsx:288-323, architecture_plan.md:25-33
Visuals and Rendering
The rendering engine uses several specialized helper functions to create a "3D-seeming" aesthetic using 2D primitives.
Parallax Background
The drawBackground function renders four distinct layers moving at different speeds relative to the camera:
- Sky Gradient: A static linear gradient from
#0f172ato#3b0764. - Kilo Logo: A background image rendered with 0.05x parallax and 0.2 alpha.
- Stars: Procedural particles moving at 0.1x parallax.
- Distant Mountains: Rendered at 0.2x parallax using a sine wave for peaks.
- Near Hills: Rendered at 0.5x parallax using a higher frequency sine wave.
Sources: app/components/Game/GameCanvas.tsx:109-156
Entity Rendering
- Platforms: Rendered with a "Top Face" (
#fbbf24) and a "Front Face" gradient (#d97706to#92400e) to simulate 3D depth. - Humanoid Player: Composed of geometric primitives (torso, head, legs) with a bobbing animation and shadow ellipse.
- Monsters: Spiky red diamond shapes with an inner core and directional eyes.
Sources: app/components/Game/GameCanvas.tsx:158-187, architecture_plan.md:41-50
Collision Detection
The update loop performs AABB (Axis-Aligned Bounding Box) collision detection against entities defined in levelData.ts.
Level Integration
The component initializes game entities by filtering LEVEL_1 from levelData.ts. It maps monster entities to a mutable monstersRef to track their patrol states separately from static geometry.
| Entity Type | Functionality |
|---|---|
start | Defines player spawn coordinates |
platform | Solid objects for collision and jumping |
hazard | Triggers "lost" state on contact |
monster | Moving hazards with patrolStart, patrolEnd, and speed |
goal | Triggers "won" state on contact |
Sources: app/components/Game/levelData.ts, app/components/Game/types.ts:3-19
The GameCanvas component effectively bridges the gap between raw data structures in levelData.ts and the interactive visual experience, managing the high-performance requirements of a real-time platformer within a Next.js environment.