Technology Stack
Relevant source files
The following files were used as context for generating this wiki page:
The Kilo Man project is built using a modern web development stack centered around the Next.js framework and React. The architecture focuses on high-performance 2D rendering using the HTML5 Canvas API, supplemented by React's declarative UI for state management and overlays. The project leverages TypeScript for type safety and Tailwind CSS for styling the surrounding application container and game interface.
Sources: architecture_plan.md:1-6, package.json:11-23, app/components/Game/GameCanvas.tsx:1-5
Core Frameworks and Languages
The application utilizes a specific combination of tools to handle both the administrative structure of a web app and the real-time requirements of a side-scrolling platformer.
| Technology | Version / Specifics | Role |
|---|---|---|
| Next.js | 15.0.3 | Framework for routing, build optimization, and hosting. |
| React | 19.0.0-rc | UI library for managing game state and components. |
| TypeScript | ^5 | Provides static typing for game entities and state. |
| Tailwind CSS | ^4 | Utility-first CSS for UI overlays and layout. |
| HTML5 Canvas | Native API | High-level 2D rendering engine for the game loop. |
Sources: package.json:11-23, architecture_plan.md:5
Component Architecture
The game is structured into a hierarchical tree where React manages high-level game status (start, playing, won, lost) while the Canvas handles the high-frequency game loop.
The GameContainer acts as the orchestrator, holding state variables like gameState and jumpModifier, which are passed down to the rendering and UI layers.
Sources: app/components/Game/GameContainer.tsx:7-14, architecture_plan.md:10-20
Game Engine & State Management
The core of the technology stack is the custom game engine implemented within GameCanvas.tsx. It utilizes useRef for mutable game state (player position, velocity, camera) to avoid unnecessary React re-renders during the high-frequency game loop.
Physics and Configuration
The engine uses a deterministic set of constants to control movement and world interaction.
const CONFIG: GameConfig = {
gravity: 0.6,
friction: 0.85,
moveSpeed: 0.8,
maxSpeed: 8.0,
baseJumpForce: -14,
levelWidth: 7000,
};
Sources: app/components/Game/GameCanvas.tsx:34-41, app/components/Game/types.ts:51-58
The Rendering Pipeline
The stack employs a "3D-seeming" visual style through procedural drawing on the Canvas 2D context.
- Parallax Background: Multiple layers (stars, mountains, hills) scroll at different speeds relative to the
camera.xposition. - Depth Simulation: Platforms are rendered with top and front faces using different gradients to simulate 2.5D depth.
- Humanoid Animation: Characters are drawn using geometric primitives, with movement calculated via sine waves for "bobbing" and leg oscillation.
Sources: architecture_plan.md:46-55, app/components/Game/GameCanvas.tsx:112-210
Data Modeling
TypeScript interfaces define the contract between the level design and the game engine, ensuring that all entities (platforms, hazards, monsters) adhere to expected structures.
Sources: app/components/Game/types.ts:3-50
Build and Configuration
The project configuration ensures compatibility with modern JavaScript features and Next.js optimizations.
- Next.js Config:
next.config.tshandles the framework's build-time settings. - TypeScript Config:
tsconfig.jsontargetsES2017and includes DOM libraries for Canvas API support. - Package Scripts: Standardized scripts for development (
next dev), building (next build), and linting (eslint).
Sources: next.config.ts:1-5, tsconfig.json:1-30, package.json:6-10
Conclusion
Kilo Man leverages a robust stack where React 19 handles the application lifecycle and user interface, while a specialized HTML5 Canvas engine manages the complex physics, camera tracking, and procedural 2.5D graphics required for a platformer. This separation of concerns allows for a responsive UI and high-performance gameplay within a single Next.js application.