EnginePhaser 3.60 or newer
LanguageTypeScript
PhysicsArcade
Time to run~3 minutes
LevelBeginner
OutputOne Player class (~110 lines)
DependenciesPhaser from CDN. No build step.

The prompt

Open a fresh chat at claude.ai/new, paste, and send.

$ Build me a Phaser 3.60+ platformer player class in TypeScript, using arcade physics, that runs with no build step.

// shape
- A single Player class extending Phaser.Physics.Arcade.Sprite.
- Constructor takes (scene, x, y, texture). Adds itself to the scene and enables arcade physics.
- Assume the scene sets up gravity and a static platforms group and calls collider(player, platforms).
- Include an update() the scene calls each frame.

// movement
- Left/Right (arrow keys and A/D) set horizontal velocity, configurable speed (default 200).
- setFlipX based on facing.

// jump feel
- Jump on up/W/space.
- Coyote time: 100ms grace after leaving the ground (use scene.time or a delta accumulator, not a frame count).
- Jump buffer: 100ms. A jump pressed just before landing fires on landing.
- Variable jump height: releasing jump while moving up cuts vertical velocity by half.
- Jump velocity configurable (default -420).

// constraints
- Read body.blocked.down (or onFloor()) for grounded.
- Timers in milliseconds via the scene's delta, no magic frame numbers.
- Tunables as class fields so they can be tweaked in one place.

// return format
- One Player class plus a short comment block showing the minimal scene setup (gravity, platforms, collider) needed to use it.
- No prose before or after the code.
Open in Claude ▸ Run · 3 min

What this gets you

A browser platformer player that feels like a real one, not the floaty box most Phaser starters give you. Coyote time and jump buffer are in from the start, so jumps register when the player means them, and variable jump height makes tapping versus holding feel different.

Because it is Phaser and arcade physics from a CDN, there is no toolchain: one HTML file, open it, play. Perfect for a game jam or a first web game.

Why it matters

Coyote time and jump buffer

The two features that separate a platformer that feels fair from one that eats your inputs. Most Phaser tutorials skip them because a plain velocity change is shorter to write. They are the difference every player feels even if they cannot name it.

Milliseconds, not frames

Timing a grace window in frames breaks the moment your frame rate wobbles. Using the scene delta in milliseconds keeps the feel identical on a 60Hz laptop and a 144Hz monitor.

No build step

A single HTML file with Phaser from a CDN means anyone can run it instantly, no npm, no bundler. That is the fastest possible path from idea to something playable, which is the whole point of the web-game lane.

What good output looks like

How to wire it up

  1. Create an HTML file with a <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"> tag.
  2. Paste the Player class and the minimal scene setup from Claude's comment block.
  3. In the scene, set arcade gravity, make a static platforms group, and add a collider between the player and platforms.
  4. Create the player in create() and call player.update() from the scene's update().
  5. Open the HTML file in a browser. Walk off a ledge and press jump a hair late, it should still jump.

Common gotchas

The player falls through platforms

The collider between the player and the platforms group is missing, or the platforms are not a static physics group. Add scene.physics.add.collider(player, platforms).

Jump does nothing near ledges

Coyote time is not wired to the grounded transition. The timer should reset when grounded and count down after leaving the floor, and the jump should check the timer, not just onFloor().

Jump height is always the same

The variable-jump cut on release is missing. On jump-key-up, if velocity.y is negative, multiply it by 0.5.

Where to go next

  1. Animations. Add a sprite sheet and swap idle/run/jump frames based on velocity and grounded state.
  2. Wall jump. Check body.blocked.left/right and add a directional jump.
  3. Ship it. Follow the Phaser web game walkthrough to get it online.

Use it however you want

The prompt is CC0, paste it, modify it, ship a game with it. The output Claude gives you is yours. A link back to pixeldex.dev in your project's README helps the next solo dev find this stuff.