Game States (Win/Loss)
Relevant source files
The following files were used as context for generating this wiki page:
The Game State system in RemyMan (Kilo Man) governs the lifecycle of a play session, transition logic between gameplay and UI, and the evaluation of win/loss conditions. The system utilizes a centralized state management approach to synchronize the HTML5 Canvas rendering loop with React-based UI overlays.
State Definitions and Transitions
The game lifecycle is defined by four primary statuses that dictate the behavior of the physics engine and the visibility of UI components. These states are managed in GameContainer.tsx and passed to child components to synchronize the game loop and user interface.
| State | Description | Transition Trigger |
|---|---|---|
start | Initial landing state; physics loop is inactive. | User clicks "START GAME" button. |
playing | Active gameplay; player controls, physics, and monster AI are enabled. | Game initialization or "RETRY MISSION" click. |
won | Success state; triggered when player reaches the goal entity. | Collision with EntityType: 'goal'. |
lost | Failure state; triggered by hazards, monsters, or falling out of bounds. | Collision with hazard, monster, or y > 800. |
Sources: app/components/Game/types.ts:47, app/components/Game/GameContainer.tsx:10, app/components/Game/UIOverlay.tsx:77-104
State Flow Architecture
The following diagram illustrates the transitions between different game states:
The GameContainer component acts as the source of truth, managing the gameState via React's useState hook.
Sources: app/components/Game/GameContainer.tsx:10-14, app/components/Game/GameCanvas.tsx:219-270
Win Conditions and Scoring
A "Win" state (won) is achieved when the player's bounding box intersects with a LevelEntity of type goal. Upon winning, the system calculates performance metrics based on time elapsed.
Points Calculation Logic
When the state transitions to won, the GameContainer calculates a score based on the time difference between startTimeRef and the current timestamp.
- Base Points: 10,000
- Time Penalty: 100 points deducted per second.
- Minimum Score: 1,000 points.
Sources: app/components/Game/GameContainer.tsx:15-22, app/components/Game/GameCanvas.tsx:244-247
Win State Sequence
The following sequence diagram shows the interaction between the physics engine and the UI when a win condition is met:
Loss Conditions
A "Loss" state (lost) is triggered by three distinct environmental factors processed during the update cycle of the game loop in GameCanvas.tsx.
- Hazard Collision: Contact with entities defined as
hazardinlevelData.ts(e.g., floor spikes or pits). - Monster Collision: Intersection with a
MonsterStateobject's boundaries. - Out of Bounds: The player's vertical position (
y) exceeding 800, representing a fall into a bottomless pit.
Sources: app/components/Game/GameCanvas.tsx:232-235, app/components/Game/GameCanvas.tsx:241-243, app/components/Game/GameCanvas.tsx:273-282
Implementation of Collision Detection
// Hazard and Goal Check
if (entity.type === 'hazard') {
setGameState('lost');
return;
}
if (entity.type === 'goal') {
setGameState('won');
return;
}
// Monster Check
for (const m of monsters) {
if (
player.x < m.x + m.w &&
player.x + player.width > m.x &&
player.y < m.y + m.h &&
player.y + player.height > m.y
) {
setGameState('lost');
return;
}
}
Sources: app/components/Game/GameCanvas.tsx:241-282
UI Representation
The UIOverlay component conditionally renders screens based on the gameState. When the state is not playing or start, a modal backdrop is displayed to block gameplay interaction and show results.
- Win Screen: Displays "MISSION COMPLETE" in yellow, showing the points earned and total completion time.
- Loss Screen: Displays "GAME OVER" in red with a message indicating the mission is compromised.
- Common Elements: Both screens provide a "RETRY MISSION" button which invokes the
onRestarthandler, resetting thegameStatetoplaying.
Sources: app/components/Game/UIOverlay.tsx:47-75, app/components/Game/GameContainer.tsx:47-49
Summary
The Game State system provides a robust framework for handling play sessions in RemyMan. By separating the logic into a high-level state manager (GameContainer), a physics/collision engine (GameCanvas), and a reactive UI layer (UIOverlay), the project ensures that win and loss conditions are accurately detected and communicated to the player. The inclusion of a time-based scoring system adds a competitive layer to the "Win" state, while multiple "Loss" triggers provide environmental challenges.