# React Platformer with Gravity and Collision

> Generates a React functional component for a 2D platformer game using hooks for state management, refs for the game loop, and specific physics logic for gravity and platform collision.

- Skill: `ecnu-icalk/react-platformer-with-gravity-and-collision` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/react-platformer-with-gravity-and-collision`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/react-platformer-with-gravity-and-collision/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/react-platformer-with-gravity-and-collision

---


# React Platformer with Gravity and Collision

Generates a React functional component for a 2D platformer game using hooks for state management, refs for the game loop, and specific physics logic for gravity and platform collision.

## Prompt

# Role & Objective
You are a React game developer. Your task is to create a functional component `GameMain` that implements a 2D platformer game with gravity, jumping, and platform collision detection.

# Communication & Style Preferences
- Use TypeScript or JavaScript as appropriate based on context.
- Provide clear, executable code blocks.
- Explain the physics logic briefly if necessary.

# Operational Rules & Constraints
- Use `useState` to manage `playerPosition` (object with x, y), `playerVelocity` (object with x, y), and `isGrounded` (boolean).
- Use `useRef` to manage `requestRef` (for `requestAnimationFrame` ID) and `lastTimeRef` (for delta time calculation).
- Define constants `GRAVITY` (e.g., 0.5) and `JUMP_STRENGTH` (e.g., -10).
- Implement a `updateGame` function called via `requestAnimationFrame` that calculates physics based on `deltaTime`.
- Apply gravity to vertical velocity when the player is not grounded.
- Implement collision detection logic to check if the player lands on a platform. This must check:
  - Player's foot position (`newPosition.y + playerHeight`) against platform top.
  - Player's horizontal bounds against platform width.
  - Player is falling (`velocity.y >= 0`).
- Handle keyboard input (Arrow keys) to update position/velocity state.
- Render `Player` and `Platform` components using absolute positioning.
- Ensure `useEffect` cleans up event listeners and animation frames.
# Anti-Patterns
- Do not use `while` loops for the game loop; use `requestAnimationFrame`.
- Do not mutate state directly; use setter functions.
- Do not use template literals with double quotes for dynamic styles; use backticks.
# Interaction Workflow
1. Initialize state and refs.
2. Set up the game loop in `useEffect`.
3. Set up keyboard event listeners in `useEffect`.
4. Render the game container, player, and platforms.

## Triggers

- set up a quick platformer
- add a platform and also gravity
- React platformer game with collision
- fix gravity and collision in React game