| Engine | Phaser 3.60 or newer |
|---|---|
| Language | TypeScript |
| Physics | Arcade |
| Time to run | ~3 minutes |
| Level | Beginner |
| Output | One Player class (~110 lines) |
| Dependencies | Phaser 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.
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
- Grounded check uses the arcade body. Look for
this.body.blocked.downoronFloor(). A homemade y-position check is fragile. - Timers are in milliseconds via delta. Coyote and buffer timers should decrement by the frame delta, not by 1 each frame. Frame-count timers are the tell of a fragile implementation.
- Variable jump cut on button release. Releasing jump while
body.velocity.y < 0should halve velocity.y. If every jump is full height, this is missing. - Update is called from the scene. The class should expose an update() that the scene's update() calls, not try to hook Phaser events internally.
How to wire it up
- Create an HTML file with a
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js">tag. - Paste the Player class and the minimal scene setup from Claude's comment block.
- In the scene, set arcade gravity, make a static platforms group, and add a collider between the player and platforms.
- Create the player in
create()and callplayer.update()from the scene'supdate(). - 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
- Animations. Add a sprite sheet and swap idle/run/jump frames based on velocity and grounded state.
- Wall jump. Check body.blocked.left/right and add a directional jump.
- 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.