Let me build a Mario-style platformer using Phaser 3. Let me first check the working directory and the phaser.min.js version.

Phaser 3 is available. Let me build a complete platformer game. I'll write everything into index.html with all procedural graphics (textures created via Phaser graphics / canvas).

Let me design the game:

- Player: rectangular character with simple animation, can move left/right, jump, wall-free. Classic Mario platformer.
- Camera follows player.
- Platforms: ground and floating platforms.
- Pipes (decorative obstacles).
- Coins: collectible, bounce animation, collection sound via Web Audio (procedural).
- Enemies (goombas): walk back and forth, can be stomped (squish then die), player dies on side collision.
- Goal flag at end.
- Platform coordinates arranged in a generator.
- HUD: score, coins, lives, time.
- Game states: play, gameover, win.
- All graphics procedurally drawn as textures or Graphics objects.

Let me create textures using Phaser's texture generator methods (create graphics canvas). Since it's all procedural, I'll use Phaser.GameObjects.Graphics or canvas textures.

I'll use the approach of creating textures from a canvas via `this.make.text()`... no. Better: use `Phaser.GameObjects.Graphics` to draw, but for physics sprite with multiple, I'll generate textures using Graphics's generateTexture().

Let me build texture generation functions that draw on a Graphics object and call generateTexture.

Player texture: a red cap, face, body. Simple 16x16 style but I'll make 32x32 for visibility.

Let me write the code carefully. Phaser 3 Arcade Physics.

Plan config:
```
new Phaser.Game({
  type: Phaser.AUTO,
  width: 960, height: 540,
  physics: { default: 'arcade', arcade: { gravity: {y: 1200}, debug:false } },
  scene: { ... }
})
```

Textures:
- ground: grass-top block
- brick: brown
- pipe: green
- coin: gold
- goomba: brown
- flag: pole + flag
- player: multiple frames for run/walk

Let me generate player as a few frames. Easier to do animation by flipping/alternating legs. I'll create a few player frames.

Actually, to keep it manageable, I'll draw the player procedurally each frame using a canvas-drawn texture with several animation frames.

Let me generate textures:

ground texture (64x64): brown dirt with grass top.

For particle effects and sound, I can generate simple audio via Web Audio API oscillator.

Let me write it.

I'll structure the level horizontally with a series of predefined platform segments in an array, generate tiles and coins and enemies from it.

Let me code the level as a list of "chunks" or I'll just hardcode an array of platform definitions [x, y, width] and place coins/enemies relative.

Let me define the level:

Ground stretches with gaps. Floating platforms. Pipes. Enemies. Coins in arcs. Goal at about x=6000.

I'll programmatically build the level.

Let me write a generateLevel that creates a segmented ground with gaps every so often.

Let me just write a well-structured engine.

Detailed code:

```js
const W=960,H=540;

function makeTextures(scene){
  const g = scene.make.graphics({x:0,y:0,add:false});
  // player
  ...
  g.generateTexture('player_idle', 40, 44);
}
```

Actually generateTexture requires the graphics be part of scene. Using scene.make.graphics({add:false}) then generateTexture works in Phaser 3. Let me use `scene.add.graphics()`... generateTexture needs displayList? The method generateTexture works on Graphics regardless but requires it's added to scene. I'll add then destroy.

Let me use:
```
const g = scene.add.graphics();
g.fillStyle(...); g.fillRect(...);
g.generateTexture(key, w, h);
g.destroy();
```

Good.

Player frames — I'll create several textures: player_stand, player_run1, player_run2. Actually running with movement: I'll animate by toggling between 2 run frames. If no run textures, just use stand.

Let me create player size 40x40. Body, cap, face, arms, legs.

Let me keep pixel-art style but drawn with rects.

Let me write the code now.

I'll also add:
- jump sound, coin sound, stomp sound, death sound via Web Audio.
- Background: sky gradient (Graphics or use tileSprite), hills, clouds, bushes, mintue.

I'll create a parallax background using graphics drawn once — but camera moves. I'll make a large background image extending full level width, or use tileSprite with scroll. Simpler: draw background into a texture sized (levelWidth, H) once, add as an image, setScrollFactor(0) won't work since it's long. Actually for a side scroller, background should be static parallax. Let me make a giant background image spanning the whole level width placed at back with scrollFactor 0? scrollFactor 0 means it doesn't move at all regardless of camera — then it wouldn't span. Better scrollFactor(0.3) for parallax but that needs the image to be wide enough; with scrollFactor it scrolls slower so a single-screen image repeated won't show. 

Simplest: background as a single image of the full level width, scrollFactor 1 (moves with camera like the level). That's fine — procedural hills drawn across the whole level. So background image width = levelWidth. That works and gives proper parallax feel relative to platforms? Not real parallax but acceptable. 

Actually I can do simple parallax: draw background full-level image at scrollFactor(0.4). Then it scrolls slower. As camera moves 0..levelWidth-960, background with factor 0.4 moves 0..0.4*... but the image is full levelWidth so it's always partially covering? The image x offset is negative (camera) * 0.4. The image spans 0..levelWidth. Camera shows worldX..worldX+960. Background image world position at scrollFactor 0.4 means its screenX = worldX*0.4 - camX*0.4... hmm. With scrollFactor s, object screenX = objX - camX*s. So for object at worldX b, screenX = b - camX*s. As camX goes 0->levelWidth-960, screenX goes b -> b - (levelWidth-960)*s. For the image to always cover screen, we need for all camX, the on-screen world range covered. It's easier to just use a tileSprite sized to screen (960x540) with scrollFactor 0 and update tilePositionX = camX*parallax. tileSprite grid image. But tileSprite repeats a small texture. For hills/clouds that's fine if the pattern is subtle.

I'll do: sky gradient via Graphics texture drawn once and as static image (scrollFactor 0) behind. Then a tileSprite of clouds at scrollFactor near 0, and a tileSprite of hills/ground silhouettes at low scrollFactor. Then a tileSprite for far decor.

Actually simplest robust: Use a tileSprite the size of canvas screen, scrollFactor 0, update tilePositionX in update. The tile texture is a pattern. Let me create:
- cloudsTexture (a repeating pattern of a few clouds, seamless).
- hillsTexture (repeating hills row).
- Also add individual decorative GameObjects across level with scrollFactor for real parallax: stars, bushes.

I'll keep it clean: 
- Sky: solid color via scene background or gradient graphics on full screen scrollFactor 0.
- Parallax mountain layer: individual triangle graphics placed across the level, scrollFactor 0.5.
- Parallax trees layer: scrollFactor 0.7.
- Ground tiles: scrollFactor 1.

Good enough and visually rich.

Sound: use a small class with AudioContext created on first user gesture (pointerdown) since autoplay policies. I'll create AudioContext lazily.

Let me now write full code.

Enemy (goomba): walks, flips at edges/walls. Stomp: if player hits from above (player.body.touching.down && enemy.body.touching.up), kill enemy (squish anim), bounce player. Else player dies.

Player death: animation + lives--, respawn at checkpoint. I'll implement simple: on death, camera shake, freeze, then reset scene or reposition.

Goal flag: when player overlaps flag base, go to win state.

HUD: score top-left, coins, world/time. Lives maybe. Keep score, coins, time.

Let me code timers.

Let me write everything now.

Physics bodies: player is a rectangle. Platforms as staticGroup (ground). Use setCollideWorldBounds for player.

Let me define level data programmatically with gaps and patterns.

I'll write generateLevel to produce: array of ground rects [x,y,w,h], coins [x,y], enemies [x,y], pipes [x,y].

Level width ~ 100 * 64 = 6400... let me do around 6800 and place goal at end.

Let me just hardcode a nice level array to control it well. I'll build segments.

Let me code:

```
const TILES=64; // ground tile size
```

Ground blocks: 64 wide, 64 tall (a few stacked for ground depth = 3 tall). Let me make ground height 256 (4 tiles) but represents blocks; I'll render each tile.

Coins arranged in arches over gaps.

Let me build the level in code with helper functions.

I'll produce ground as list of (x,y,w) segments of solid ground. Then create a static physics group and for each segment create tiles of size TILES with grass on top.

To make it easier, instead of individual tiles, create big rectangles. But grass texture per tile looks nicer. I'll create big rectangle image ground exactly, and put grass-textured image strip on the surface. Simpler: staticGroup of tile sprites, generating them from segment loop.

I'll create tile sprite for each tile in segment (top row grass, below rows dirt). Use texture 'groundGrass' for top, 'groundDirt' for fill.

Coins: as image coin, physics static group overlapping (not colliding), collect on overlap.

Enemies: goomba sprite with gravity.

Pipes: green pipes as decorative obstacles you can stand on (collide). Place at intervals. Use pipe textures: pipeTop, pipeBody. Collider with them too.

Goal: pole + flag + base, trigger overlap.

Alright, writing now.

Let me define camera bounds to levelWidth.

I'll write the scene class with create that calls makeTextures, buildLevel, setup HUD, input.

Let me handle resize? Not necessary.

Let me write coordinates generation. I'll craft a hand-made level in an array for control. Let me define groundSegments = [[x,y,w],...]. Then coins/enemies in arrays with world coords.

Let me build with code loops to create variety but deterministic.

Ground pattern: alternating long flats and gaps.
- Start flat from 0 to 3200.
- Gap at 3200-3360 (jumpover).
- flat 3360-4000.
- etc.

Let me just hand-write a good set. I'll write segments:

Actually easier to procedurally generate: track cursorX. Create flats of random-ish length and occasional gaps, with decorations.

But I want deterministic interesting layout with arches of coins. Let me write generator that outputs arrays, and also decide decorations.

I'll combine: generator creates ground segments; separately I place pipes, enemies, coins manually at good coordinates based on segments. Because procedural layout from randomness might place things where I don't know. Better to fully hand-craft. Let me hand-craft the level explicitly; it's more reliable.

Let me design a level roughly 6800 wide.

I'll write segments:

Ground y base = H - 160 = 380 (top of ground). Ground thickness 160 (2.5 tiles). TILESIZE 64.

Let me set GROUND_TOP = H-160 = 380.

segments (x,w):
0: 0-3400 flat
gap: 3400-3480 (80 gap = need small jump; but gap over pits—falling kills? I won't kill on fall; I'll set world bounds bottom and respawn.) Let me make gaps fall to death -> respawn. I'll add kill plane.

Let me instead make gaps only over where there's rescue — complex. I'll let falling into a gap respawn player (not a death, just reposition to last safe). Simpler: world bounds with deep pit and on falling below H, respawn. Actually classic mario kills you. Let me respawn to respawn point (start or checkpoint) on fall, losing a life.

Respawn point: I'll store playerStartX; on fall below, call die().

Let me define respawn at a checkpoint that updates as you pass coins. Keep simple: respawn at beginning each death. That's fine.

Let me now set the segments and features. I'll write them concretely.

I'll keep it around 6200 px so camera ultimately stops.

Let me write final arrays. I'll generate in code.

Let me just write the generator producing a hand-tuned sequence using small helper arrays.

I'll now write the HTML.

For the run animation, I'll create 3 textures: player1, player2 (legs spread), and use flip X based on direction. On idle use player1. When airborne use player1. When running alternate player1/player2.

Let me draw player pixel art ~ 36x44:

- Body: red shirt 24 wide.
- Overalls blue.
- Cap red.
- Face/hand skin.

I'll draw with rects.

Let me now write code fully.

For graphics drawing I need fillStyle, fillRect, fillRoundedRect for coins (I'll draw circle via fillCircle).

Coin texture: gold circle 24x24 with inner detail, plus animation frames for spin (scaleX). I'll animate by toggling scaleX.

Let me include a spinning coin.

Enemy goomba 40x36: mushroom body brown, feet, angry eyes. Two frames for walking (feet alternate). Squished frame (flat).

Flag: pole (silver rect), flag triangle red/green on top, base.

Now let me write the whole file.

For sounds, create SFX object:
```
let AC=null;
function sfx(freq,dur,type,vol){ if(!AC) return; const o=AC.createOscillator(); const g=AC.createGain(); ...}
```
Called on jump (square short), coin (two tones), stomp (thud), death (down gliss), win (arpeggio), hit.

Initialize AC on first pointerdown/keydown.

Let me code it all now. I'll be careful with Phaser 3 API.

Camera follow: this.cameras.main.startFollow(player); setBounds(0,0,levelWidth,H); setDeadzone.

Colliders: 
- this.physics.add.collider(player, platforms)
- enemies vs platforms
- player vs enemies handled in overlap with collisionProcessCallback? Use this.physics.add.overlap(player, enemies, hitEnemy).

For stomp detection: in hitEnemy, check if player.body.touching.down and player.y < enemy.y and player.body.velocity.y > 0. Then enemy die, player bounce (setVelocityY(-400)). Else player.hurt().

Enemy movement: store direction, velocity.x. Flip at walls: collider with platforms and check enemy.body.blocked.left/right either switch or kill/wander. On blocked, reverse.

If enemy falls off edge? prevent by checking ahead? I'll let them walk and reverse on wall; if they fall off (goomba classic walks off), fine—could cause them to fall to death; but players might need them. I'll make enemies not walk off edges: check tile ahead. Let me just let them reverse on walls and also bounce; simpler to keep them on ground via gravity and reverse on blocked. If a gap, they fall—acceptable but they'd be lost. I'll add edge detection: compute ground tile ahead using a small test—complex. I'll instead group enemies only on long flats so they have room and reverse at pipes (colliders). Good enough.

Coins collect: shape overlap, score+=100, coins++, play sound, destroy. Float-up text.

Goal: when player overlaps base area x>goalX-20 and player grounded, win. Play win sound, show overlay "YOU WIN!" with score. Provide restart.

Lives: start 3. On death lives--, if 0 gameover overlay.

HUD text objects updated each frame.

Let me also add camera fade on death maybe. Keep simple.

Now let me write the file.

I'll define the level builder to produce platforms coins enemies pipes arrays.

Let me write concrete code:

```
function buildLevel(){
  const L=[];
  let x=0;
  // helper to add flat
  const flat=(w)=>{ L.push([x, GROUND_TOP, w]); x+=w; };
  const gap=(w)=>{ x+=w; };
  ...
}
```

But I want to specify coin/enemy positions relative. I'll just create them with explicit coordinates after computing segments. Let me generate platforms with segments list and then add features.

I'll create segments via explicit array:
```
const SEG=[
 [0,448],[...]
];
```
Each [startX, length]. I'll fill ground from GROUND_TOP.

Then features: arcs of coins over gaps, rows of coins, enemies on flat, pipes.

Let me hardcode SEG as list:

I'll define GROUND_TOP = 380. Each col tile 64 wide.

SEG (start,width):
[0,4800]  big first area
gap 4800-4896 (96)
[4896, 900]
gap 5796-5888 (92)
[5888, 900] -> ends 6788. Goal around 6500.

Hmm gaps of ~96 with 64 wide pipe jumps fine.

Within first 4800:
- pipes at 1600, 2400, 3600 (heights vary)
- enemies on flats: at 900, 1500, 2600, 4000
- coins: arches at 1400 (over pipe), 2300, row of coins above pipes
- floating platforms at 3000 area with coins.

Let me also add floating platforms as static collidable objects (not tiles). I'll create them as separate collider group.

Let me finalize coordinates. This is getting long; let me just write code directly with values and trust.

Let me write index.html.

I'll also draw floating platforms using ground texture or brick texture.

Let me define brick texture for floating platforms & ground maybe. Ground grass+grass top. Floating = brick.

Coins: positions.

Let me write the generateLevel function that does everything and returns groups.

I'll write it carefully.

One concern: using scene.make.graphics add:false then generateTexture — generateTexture works. Let me use scene.add.graphics() and destroy after. Confirmed pattern:
```
const g = scene.add.graphics();
... draw ...
g.generateTexture(key,w,h);
g.destroy();
```

Now player textures including face direction — I'll draw symmetric-ish and use flipX. My character facing right by default (setFlipX when moving left). The sprite frame drawn facing right: eye on right side. Good.

Let me now write everything.

Regarding camera stopping at level end: bounds 0..levelWidth. levelWidth = max width. Set camera bounds width = levelWidth.

Let me compute levelWidth = end of last segment = 6788. I'll set WIDTH=6788.

Pole at x=6600.

Now the tile physics: TILESIZE=64. Ground top segment y=380. Ground blocks: create static body at (tx, GROUND_TOP) for the tile, size 64, and additional rows below for depth. Static physics bodies get position centered: use image with origin default 0.5. I'll use tile sprites? Use this.physics.add.staticImage with texture. staticImage centers at position with origin 0.5. Set position to tx+32, ty+32.

For grass top row at ty=380, dirt rows below at 444, 508.

Let me generate each tile.

Player body origin 0.5.

Let me finalize and write.

Let me make sure Arcade physics gravity set.

Write now.

Additional: player jump with coyote maybe no. Basic.

Let me also add running acceleration.

Now writing the file.

I'll include a mute button maybe not necessary.

Let me write.

For the win overlay and gameover overlay, use DOM elements over canvas (position absolute) or Phaser text. I'll use Phaser UI as a Scene? Simpler: draw overlay using DOM via document.getElementById in index. But canvas cover. I'll create DOM overlay elements in HTML with absolute positioning, hidden, shown on events. JS can access them. Good, easier for buttons.

I'll add overlay divs for gameover and win with restart buttons styled in CSS.

Let me include restart via reloading scene: `game.scene.restart()` or call our init function. Easiest: window.location.reload() to fully restart. Acceptable. But sandbox reloading fine. I'll use scene restart: I'll structure initial game config and on restart call this.scene.restart which re-runs create. Need to reset HUD DOM values. Manageable. Simpler to reload page. I'll reload page on restart for cleanliness.

Now let me actually write code. I'll be thorough.

Let me also ensure collect coin floating text and enemy stomp animation (squish for 250ms then destroy).

Write it.

Phaser 3.80.1. Good. Let me write the full game.

Phaser 3.80.1. Good. Now let me write the full game.

Phaser 3.80.1. Good, modern Phaser 3. Let me write the game.