Mario-style platformer · deepseek-v4.1-flash

Let me check the current directory and the Phaser library.

Let me build the game. I'll write a single self-contained index.html loading phaser.min.js.

Let me design:
- Canvas 1200x800 maybe, but game resolution 800x600 or 960x540. Use scale FIT.
- Level width ~4000px.
- Use arcade physics.
- Generate textures with Graphics: player, ground tile, brick, coin, enemy, flag.
- Player controls: cursor keys + WASD, space jump.
- Enemies patrol.
- Stomp mechanic.
- Coins count HUD via text.
- Win state, lose state, restart button and key R.

Let me write it.

I'll create textures via graphics.generateTexture.

Player: red/blue Mario-ish: 24x32. Let's make simple: body blue overalls, red shirt/hat, face. Draw with rectangles.

Enemy: brown mushroom/goomba 24x20.

Coin: yellow circle 16x16 with shine.

Ground: 32x32 dirt with grass top. Brick: 32x32.

Flag: pole with triangle flag.

Let me implement with static group platforms, dynamic enemies, coins static group (or group). Physics overlap for coins, collider for platforms, overlap for enemies with stomp logic.

Camera follows player with bounds.

Level layout: ground segments with gaps, floating platforms, coins, enemies, goal.

Let me write code.

Important: prevent repeated mid-air jumping — check body.blocked.down or touching.down.

Stomp: overlap player vs enemy. If player.body.velocity.y > 0 and player bottom above enemy center, kill enemy, bounce.

Actually with overlap, when player lands on enemy, player.body.touching.down may not be set. Use velocity and position check.

Loss: side contact -> lose. Falling into gap: if player.y > world height -> lose.

Let me implement state: 'playing','win','lose'. Overlay text + restart.

Restart resets everything: since we use Phaser physics groups, we can just restart the scene. Simplest: scene.restart() on R. But requirement says provide Restart button; can use a DOM button or in-game text button. I'll use a DOM overlay button and keyboard R. Actually simpler in-game: an HTML button positioned over canvas. Let's do HTML UI.

HUD: coin count, controls, state message, restart button.

Let me write index.html.

For the textures, I'll use a boot scene or create in create().

Let me carefully code.

Level data: I'll define platforms as arrays of [x,y,width] (in tiles) using ground blocks. Easier: define ground segments as x ranges and create tiled sprites.

Let me define helper addGround(x, y, tiles) using a static group with tileSprite? For static physics, use physics.add.staticGroup and create images at positions. Use 'ground' texture repeated.

I'll write:

function makeGround(x,y,cols){ for i in cols: platforms.create(x+i*32+16, y+16,'ground').refreshBody(); }

But that's many sprites; fine for 4000px.

Actually simpler: use a single scaled tileSprite with static body? Phaser static group image can be scaled; create a 'ground' image scaled to width, refreshBody. The texture is 32x32, scaling stretches. That's fine visually for ground. Let me use tileSprite via this.add.tileSprite but then add to physics? Could use staticGroup.create with setScale. Let's just create individual tiles for nicer look; level not huge.

Let me design level (world 4800 wide, 800 tall? use 960x540 canvas, world height 540). Ground top at y=460.

Ground segments (x start, number of tiles) with gaps:
- seg1: x=0, tiles 12 (0-384)
- gap
- seg2: x=480, tiles 8 (480-736)
- gap
- seg3: x=832, tiles 10 (832-1152)
- seg4: x=1216, tiles 6
- seg5: x=1408, tiles 8
- ... up to 4800.

Let me just lay out programmatically a decent level.

Let me define platform tiles at various heights too.

I'll craft explicit array.

Let me define TILE=32, worldWidth=4800, worldHeight=600 (canvas 960x600). Ground row y=520 (top of ground). Ground tile y center 520+16=536.

Ground segments: list of {x, w} in tiles:
[0,10],[12,7],[21,9],[33,6],[41,12],[56,5],[63,10],[76,8],[87,14],[104,6],[113,12],[128,10] ... total maybe 140 tiles = 4480. Good enough, world 4800.

Let me just compute positions.

I'll write level arrays explicitly in code.

Floating platforms: {x (tiles), y (tiles), w}.

Coins: place along.

Enemies: on ground segments.

Goal flag near end x=4600.

Let me write code now, and then test in browser.

For the player texture, let me draw:
- 28x36
- hat red top, face skin, shirt red, overalls blue, legs.
Simple pixel-ish.

Enemy: 28x24 brown dome with feet.

Coin: 16x16 gold circle.

Flag: 32x120 pole + flag.

Let me generate.

I'll make the graphics textures with a helper:

function makeTextures(){
  const g = this.make.graphics({x:0,y:0,add:false});
  ...
  g.generateTexture('player',28,36); g.clear();
}

Careful: make.graphics add:false works.

Player drawing:
g.fillStyle(0xd83a2e); g.fillRect(4,0,20,8); // hat
g.fillRect(0,8,28,4); // brim
g.fillStyle(0xffcc99); g.fillRect(6,8,16,10); // face
g.fillStyle(0x000000); g.fillRect(9,11,3,3); g.fillRect(16,11,3,3); // eyes
g.fillStyle(0xd83a2e); g.fillRect(4,18,20,8); // shirt
g.fillStyle(0x2a4bd7); g.fillRect(6,20,16,10); // overalls
g.fillStyle(0xffcc99); g.fillRect(0,18,4,8); g.fillRect(24,18,4,8); // hands
g.fillStyle(0x2a4bd7); g.fillRect(6,30,7,6); g.fillRect(15,30,7,6); // legs
g.fillStyle(0x4a2a10); g.fillRect(4,34,10,2); g.fillRect(15,34,10,2); // shoes

Good.

Enemy goomba:
g.fillStyle(0x8a4b1e); g.fillRect(4,0,20,12) dome; maybe rounded.
g.fillRect(0,8,28,8) body
g.fillStyle(0xf0d0a0); g.fillRect(4,4,8,6) eyes white? 
Let's do eyes: white rects with black pupils.
feet dark.

Coin: circle radius 8 gold, inner lighter.

Brick/platform: I'll use 'brick' texture 32x32 with brick lines. And 'ground' 32x32 grass top.

Let me write.

For platforms floating, use 'brick' static images; ground uses 'ground'.

Now collision: player collides with both.

Coins: physics group static? Use this.physics.add.group with allowGravity false and immovable, then overlap.

Actually use staticGroup for coins too, overlap works. On collect disable body + hide, increment.

Enemies: physics group with gravity, velocity set. Patrol: when blocked left/right or reaches edge, reverse. Detect edge: check if no ground ahead — simpler use collider with platforms and on worldbounds? Set collideWorldBounds true and bounce? Better: patrol between bounds manually. I'll give each enemy a patrol range [minX,maxX] and reverse when passing.

Simplest: each enemy has data 'dir'; in update, if enemy.x <= minX or >= maxX reverse. Also they collide with platforms so they stay on ground. But if walking off platform edge they'd fall. To avoid, set patrol ranges within their platform.

I'll assign each enemy a range based on its platform.

Let's just set enemy velocity x and check body.blocked.left/right to reverse (colliding with other tiles), plus a fixed range. I'll use range.

Enemy stomp detection: in overlap callback, check player.body.velocity.y > 0 (falling) and (player.body.bottom - enemy.body.top) < some threshold. Actually when overlapping, player.body.bottom could be below enemy top significantly. Use previous position? Simpler: if player.body.velocity.y > 0 && player.y < enemy.y (player center above enemy center) => stomp. That's reasonable.

On stomp: enemy.destroy() (or disable), player.setVelocityY(-420), score? no score required, just coins.

On side contact: lose.

But overlap may trigger during stomp too; check condition.

Falling into gap: update checks if player.y > worldHeight + 50 -> lose.

Win: overlap with flag -> win.

Camera: this.cameras.main.setBounds(0,0,worldWidth,worldHeight); startFollow(player, true, 0.1,0.1). Set deadzone maybe.

HUD via DOM: coin count, controls, message, restart button. Update via JS.

Let me use a top-left HTML div overlay.

State handling: when lose/win, stop player, show message overlay.

Restart: button calls restart() -> scene.restart(); also reset HUD. On scene restart, create runs again; need to reset coin count variable. I'll store state on scene via this.registry or just local let variables reset in create.

Use this.coins = 0 in create.

Restart button: document.getElementById('restart').onclick = ()=> gameScene.restart(); Need reference. I'll store window.__restart.

Also keyboard R in update.

Let me also pause physics on end: set this.physics.pause() and show overlay.

Overlay message: DOM #msg.

Let me write the file now.

Regarding Phaser version: phaser.min.js is likely Phaser 3. Let me check version quickly. Not necessary but API differs. I'll assume Phaser 3.

Let me write.

Level design details:

TILE=32. Canvas 960x600. worldWidth=4800, worldHeight=600.

Ground top row y=520. Ground tiles from y=520 to 600 -> 3 rows? 520+32=552, +32=584, +32=616. So 3 rows covers to 584. worldHeight 600. Fine, use 3 rows (520,552,584).

Actually just render ground tiles at rows 520,552 and it'll look fine; bottom gap hidden.

Ground segments (in tiles, x offset in tiles * 32):
segments = [
 [0, 11],
 [13, 8],
 [23, 10],
 [36, 7],
 [45, 11],
 [59, 6],
 [67, 12],
 [82, 8],
 [93, 10],
 [106, 7],
 [116, 12],
 [131, 9],
 [143, 7],
]
Compute total end: 143+7=150 tiles = 4800. Good.

Gaps: between 11 and13 = 1 tile gap (32px) - jumpable. 8->... etc. Gaps vary 1-2 tiles.

Floating platforms (tile x, tile y, width tiles):
{31, 15, 3} meaning top at y=15*32=480? Ground top 520, so platform at y=440 (row 13.75). Let me use y in pixels directly for clarity.

Let me define platforms as {x, y, w} pixels for top-left.

I'll place:
- {x: 352, y: 440, w: 96}  (before first gap)
- {x: 480, y: 380, w: 96}
- {x: 736, y: 420, w: 128}
- {x: 1000, y: 380, w: 96}
- {x: 1152, y: 440, w: 96}
- {x: 1408, y: 400, w: 128}
- {x: 1700, y: 360, w: 96}
- {x: 1920, y: 420, w: 128}
- {x: 2200, y: 380, w: 96}
- {x: 2400, y: 320, w: 128}
- {x: 2700, y: 400, w: 96}
- {x: 2900, y: 360, w: 128}
- {x: 3200, y: 420, w: 96}
- {x: 3400, y: 380, w: 128}
- {x: 3700, y: 340, w: 96}
- {x: 3950, y: 400, w: 128}
- {x: 4200, y: 440, w: 96}

These are reachable? Player jump velocity ~ -560 with gravity 1000 gives height ~ 157px. So vertical reach ~150px. Platform at 440 from ground 520 is 80px up, fine. At 380 is 140 up, fine. Chained from platforms.

Coins: place above platforms and along ground. I'll generate coin at (x+16, y-24) for platforms, and rows.

Enemies: place on ground segments and platforms. Give patrol ranges.

Goal flag at x=4680, on ground? Ground segment 131..138 tiles => 4192..4416, then 143..150 => 4576..4800. So ground exists at 4576+. Put flag at x=4700. Good.

Wait segment [143,7] => 4576 to 4800. Yes.

Player start x=64, y=480.

Let me code.

For coins I'll create a static group and place.

Let me write the whole file.

For win detection: overlap player with flag zone (a static image with body). I'll make flag a static sprite with body only around pole, or use zone. Use this.physics.add.staticImage(4700, 460, 'flag'). Actually texture flag 40x140, set origin bottom. Simpler: create a zone: this.add.zone(x,y,w,h); this.physics.add.existing(zone, true); overlap.

Let me use a static group 'goal'.

Alright, writing.

Enemy patrol: I'll pass minX/maxX. In update loop over enemies group children.

Let me implement enemy with sprite.setData.

Now code:

```js
const W=960,H=600, WORLD_W=4800, WORLD_H=600, TILE=32;
const GROUND_Y=520;

class MainScene extends Phaser.Scene {
  constructor(){ super('main'); }
  create(){
    this.gameOver=false;
    this.coins=0;
    makeTextures(this);
    ...
  }
}
```

Wait generateTexture must be done once; if scene restarts, calling generateTexture again with same key might warn/error. Use check: if(!this.textures.exists('player')) makeTextures(this).

Let me handle.

Physics config: arcade gravity y 1000.

Player: this.physics.add.sprite(64,460,'player'); setCollideWorldBounds(true); body size setSize(20,36). setBounce(0).

Platforms staticGroup.

addGround: for each segment, for tile x, for row 0..1: create ground image.

Actually let me create for rows 0..2.

Platform bricks: for each platform, tiles across w/32, create 'brick'.

Collider player vs platforms.

Coins static group: overlap.

Enemies group: physics.add.group with allowGravity true. setVelocityX.

Collider enemies vs platforms.

Overlap player vs enemies.

Camera bounds and follow.

HUD update.

Let me write draw functions.

I'll write the code now in full.

For texture generation:

```js
function makeTextures(scene){
  const g = scene.make.graphics({x:0,y:0,add:false});
  // player
  ...
  g.generateTexture('player',28,36);
  g.clear();
  ...
  g.destroy();
}
```

Ground texture: 32x32 grass. g.fillStyle(0x6b3f1d) fill full; top 8px green 0x4caf50; darker green line.

Brick: 32x32 base 0xb5651d? Classic mario brick is brownish orange with mortar. Use 0xc06030 with dark lines.

Coin: 18x18. circle gold.

Enemy: 28x24.

Flag: pole grey + red flag. Let's do texture 32x140: pole at x=14 width 4 full height grey; flag triangle red at top.

Let me write.

Player facing flip: setFlipX based on direction.

Now let me also add simple background: sky color via camera backgroundColor, plus some hills/clouds drawn with graphics as static images or just rectangles. I'll add a few clouds as generated texture and place. Keep simple: background color 0x5c94fc (classic sky). Add hills maybe. Optional but nice. I'll add cloud texture and place a few, plus green hill texture.

Let me not overdo; add clouds.

Let me now write the file.

HUD DOM: 
```
<div id="hud">
  <div id="coins">🪙 0</div>
  <div id="controls">← → / A D move &nbsp; Space jump &nbsp; R restart</div>
</div>
<div id="overlay" class="hidden">
  <div id="overlay-text"></div>
  <button id="restart">Restart</button>
</div>
```
Style fixed positions.

But canvas is centered; HUD fixed to viewport. Fine.

Actually to keep everything in one file and look good, position HUD top-left of the page, overlay centered.

The game canvas from Phaser scale FIT centered. HUD absolute top-left of window might be over the page background. Fine.

Let me make the game container centered with a max width. Simpler: use Phaser Scale.FIT with parent 'game', autoCenter. Page background dark. HUD fixed.

Let me write.

I'll write index.html.