Player Movement & Inputs
Relevant source files
The following files were used as context for generating this wiki page:
The Player Movement & Inputs system in Kilo Man governs how the user interacts with the player character through keyboard events and UI controls. This system handles the translation of raw input into physical forces—such as velocity, friction, and gravity—within a 2D platforming environment. It manages the state of the player's position, velocity, and orientation while ensuring movement is constrained by the game's physics constants and world boundaries.
Sources: architecture_plan.md:3-8, app/components/Game/GameCanvas.tsx:173-205
Input Handling Architecture
The input system utilizes a combination of browser-level event listeners and React state management to capture user intent. Keyboard inputs are tracked via a mutable reference to prevent re-renders, while a UI-based jump modifier allows for dynamic adjustment of movement mechanics.
Keyboard Input Detection
The system listens for keydown and keyup events globally. These events update a keysRef object, which stores the boolean state of specific keys. This allows for multi-key combinations (e.g., moving while jumping).
The game specifically monitors ArrowLeft, ArrowRight, ArrowUp, ArrowDown, and Space. To prevent browser scrolling during gameplay, the default behavior for these keys is disabled.
Sources: app/components/Game/GameCanvas.tsx:78-95
UI-Driven Modifiers
In addition to direct movement keys, the UIOverlay provides a "Jump Power" slider. This modifies the jumpModifier state in GameContainer, which is then passed to GameCanvas to scale the base jump force.
Sources: app/components/Game/GameContainer.tsx:11, app/components/Game/UIOverlay.tsx:28-42
Physics and Movement Logic
Movement is processed during the update phase of the game loop. The player's movement is calculated by applying acceleration (move speed), friction, and gravity to current velocity vectors.
Physics Constants
The engine uses a set of tuned constants to define the feel of the movement:
| Constant | Value | Description |
|---|---|---|
gravity | 0.6 | Downward acceleration applied every frame. |
friction | 0.85 | Horizontal velocity decay (simulates weight/traction). |
moveSpeed | 0.8 | Acceleration applied when pressing left/right. |
maxSpeed | 8.0 | Velocity cap for horizontal movement. |
baseJumpForce | -14 | Initial upward velocity applied during a jump. |
Sources: app/components/Game/GameCanvas.tsx:37-44, architecture_plan.md:104-109
Horizontal Movement and Friction
When the left or right arrow keys are pressed, the player's horizontal velocity (vx) is incremented or decremented by the moveSpeed. Friction is applied by multiplying the velocity by the friction coefficient (0.85) every frame, causing the player to slide to a stop when keys are released.
Sources: app/components/Game/GameCanvas.tsx:178-189
Vertical Movement and Jumping
Gravity is applied constantly to the player's vertical velocity (vy). A jump is only triggered if the Space key is pressed and the player's isGrounded state is true. The jump force is calculated as:
player.vy = baseJumpForce * jumpModifier
Sources: app/components/Game/GameCanvas.tsx:191-200
Movement State Management
The player's physical state is tracked in a PlayerState object, which is updated every frame before rendering.
Collision and Grounding
Movement is constrained by the environment. If the player's updated position overlaps with a platform entity, the system resolves the collision by snapping the player to the edge of the platform.
- Vertical Collision: If the player falls onto a platform,
vyis set to 0 andisGroundedbecomes true. - Horizontal Collision: If the player hits a wall,
vxis set to 0. - World Boundaries: The player's
xposition is clamped between 0 andlevelWidth(7000px).
Sources: app/components/Game/GameCanvas.tsx:238-270
Camera and Viewport Interaction
Player movement directly drives the camera system. The camera follows the player to keep them centered on the screen, though it includes logic to clamp the view to the world boundaries.
The camera uses a Linear Interpolation (Lerp) factor of 0.1 for horizontal movement and 0.05 for vertical movement to create a smooth following effect.
Sources: app/components/Game/GameCanvas.tsx:284-325, architecture_plan.md:21-27
Conclusion
The Player Movement & Inputs system provides the foundational mechanics for Kilo Man. By separating raw input capture from physics processing and utilizing a robust state-based tracking system, the game achieves responsive controls. The integration of a UI-based jump modifier further allows for real-time gameplay tuning, while the camera system ensures the player remains the focal point of the larger game world.