Dangerous Dave platformer · minimax-m3

Let me build a Dangerous Dave-inspired tile-based platformer. I need to create a single index.html file with everything inlined. Let me plan this out:

1. **Game Structure**:
   - Tile-based level (e.g., 20x12 tiles)
   - Player with gravity, jumping, horizontal movement
   - Platforms (solid)
   - Trophy (collectible)
   - Exit (goal - needs trophy)
   - Fire hazard (static)
   - Water hazard (static)
   - Patrolling enemy
   - Restart functionality

2. **Visuals**: Procedurally drawn with canvas - tiles, player, trophy, exit, hazards, enemy

3. **Controls**: Left/Right arrows or A/D, Space to jump, display them

4. **Physics**:
   - Gravity
   - Collision with platforms (solid walls)
   - Only jump when grounded
   - Touching hazard/enemy = lose
   - Touching exit with trophy = win
   - Touching exit without trophy = feedback message

Let me design the level to ensure route is reachable:

Tile size: 32x32, canvas: 800x480 (25 cols x 15 rows)

Let me sketch a level layout (15 rows, 25 cols):
- Row 0-2: sky (empty)
- Row 13-14: ground floor (solid)
- Various platforms at different heights
- Trophy placed somewhere reachable
- Exit at end
- Fire and water hazards
- Patrolling enemy on a platform

Let me design:
```
Row 0: .........................
Row 1: .........................
Row 2: .........................
Row 3: .........................
Row 4: .........................
Row 5: ..........T..............
Row 6: ..####.......####........
Row 7: .........................
Row 8: .........................
Row 9: ######..............####.
Row 10:.........................
Row 11:........####..............
Row 12:...........E..............
Row 13:##########################
Row 14:##########################
```

Hmm, let me think more carefully. T=trophy, E=exit, #=solid, F=fire, W=water, P=patrolling enemy area

Let me design a level that's more interesting and definitely reachable:

```
Legend:
. = empty
# = solid block
T = trophy (replace with empty after collect)
E = exit
F = fire hazard
W = water hazard
P = patrol zone (just visual marker)
```

Layout (25 cols x 15 rows):
```
Row 0:  .......................   (player starts around col 2)
Row 1:  .......................
Row 2:  P..........T...........   (platform at top)
Row 3:  ####.........####......
Row 4:  .........................
Row 5:  .........................
Row 6:  ........#####...........
Row 7:  .........................
Row 8:  #####..........####.....
Row 9:  .........................
Row 10: .........F..............
Row 11: .........#####...........
Row 12: ............E...........
Row 13: ###########.W.##########
Row 14: ##########################
```

Let me code this up properly. I'll use a tile array.

Actually, let me think about the level design more carefully to ensure:
- Player can reach trophy
- Player can reach exit from trophy
- Hazards are dangerous but not blocking the only path
- Enemy patrol doesn't make level impossible

Here's my final level design:

Width: 25 tiles, Height: 15 tiles
Tile size: 32px
Canvas: 800x480

```
col:    0123456789012345678901234
row 0:  .........................  
row 1:  ......................T..  
row 2:  #####........#####.......
row 3:  ..........................
row 4:  ..........####...........
row 5:  ..........................
row 6:  ########.....##########..
row 7:  ..........................
row 8:  ..............F..........
row 9:  ..............####.......
row 10: ..........................
row 11: ########.......#####.....
row 12: .........E................
row 13: ####.#######.W..##########
row 14: ##########################
```

Hmm, this is getting complex. Let me simplify and design something cleaner:

```
col:    0123456789012345678901234
row 0:  ..........................
row 1:  .........T...............
row 2:  ....####......#####......  
row 3:  ..........................
row 4:  ......F..................
row 5:  .........................
row 6:  ########....############.
row 7:  ..........................
row 8:  ..........................
row 9:  ....W.........E..........
row 10: ....#####.....####........
row 11: ..........................
row 12: .........................
row 13: ####.############....####
row 14: ##########################
```

Player starts at row 13, col 1 (on ground).

Path: 
- Start at bottom left
- Jump up to mid platforms
- Avoid fire, collect trophy up top
- Come back down
- Avoid water
- Reach exit

Let me think about whether the player can physically reach everything. Actually let me write it as code and visualize.

I'll write the game now. Let me start:

```javascript
const TILE = 32;
const COLS = 25;
const ROWS = 15;
const W = COLS * TILE; // 800
const H = ROWS * TILE; // 480

// Tile types: 0=empty, 1=solid, 2=fire, 3=water, 4=trophy (empty after collect), 5=exit
const level = [
  ".........................".split(''),
  ".........T................".split(''),
  "....####......#####.......".split(''),
  ".........................".split(''),
  "......F..................".split(''),
  ".........................".split(''),
  "########....############.".split(''),
  ".........................".split(''),
  ".........................".split(''),
  "....W.........E..........".split(''),
  "....#####.....####........".split(''),
  ".........................".split(''),
  ".........................".split(''),
  "####.############....####".split(''),
  "#########################".split(''),
];
```

Wait, the player needs to reach the trophy at row 1, col 9. From start (row 13, col 1), they need to jump up. The closest platform at row 2 has solid blocks at cols 4-7 and 13-17. Player at col 1, ground at row 13.

Hmm, the gap from col 1 to col 4 is too big. Let me redesign:

Actually let me design with closer platforms. Player has jump height of about 4 tiles and run-jump distance of about 4-5 tiles.

```
col:    0123456789012345678901234
row 0:  ..........................
row 1:  .........T...............    (trophy on a platform)
row 2:  ..####....#####..........
row 3:  ..........................
row 4:  ......F..................    (fire hazard)
row 5:  ....###########...........
row 6:  ..........................
row 7:  ..........................
row 8:  ..........................
row 9:  .........W.........E.....    (water hazard and exit)
row 10: .........####.....####....
row 11: .........................
row 12: ....################.....
row 13: ####.############....####
row 14: ##########################
```

Let me check reachability:
- Player at (col 1, row 13) on ground
- Jump up: can reach row 11 col 3 (need to jump from col 1+0 to col 1+2 = col 3, height from row 13 to row 11 = 2 tiles, doable)
- Then row 12 platform from col 4 to col 19 - can walk across
- From row 12, can jump up to row 9 platforms at col 9-12 and col 17-20
- The col 9-12 platform has water on top at row 9 col 9 - need to avoid
- Wait, water should be on the platform

Let me redo - water and fire are at certain spots, but the path needs to be around them.

Actually, let me put hazards where they don't block the path:
- Fire at row 4 col 6 - in the air, but reachable from row 5 platform? Player would need to land on row 5 then jump up. Actually fire should be a hazard you can fall into from above.

Let me redesign more carefully. Final design:

```javascript
const levelStr = [
  ".........................",  // row 0
  ".........T...............",  // row 1: trophy at col 9
  "..####....#####..........",  // row 2: platforms
  "..........................",  // row 3
  "......F..................",  // row 4: fire at col 6
  "....################......",  // row 5: long platform
  "..........................",  // row 6
  "..........................",  // row 7
  "..........................",  // row 8
  "...........E.........W....",  // row 9: exit at col 11, water at col 21
  "....########.....####.....",  // row 10: platforms
  "..........................",  // row 11
  "..........................",  // row 12
  "####.#############...####.",  // row 13: ground with gaps
  "##########################",  // row 14: full ground
];
```

Hmm, this is 24 chars wide. Let me make it 25.

```javascript
const levelStr = [
  ".........................",  // 25
  ".........T...............",  // trophy col 9
  "..####....#####..........",  // platforms
  "..........................",  // 
  "......F...................",  // fire col 6
  "....################......",  // long platform
  "..........................",
  "..........................",
  "..........................",
  "...........E.........W....",  // exit col 11, water col 21
  "....########.....####.....",  // platforms
  "..........................",
  "..........................",
  "####.#############...####.",  // ground with gaps
  "##########################",  // full ground
];
```

Wait, the strings should all be 25 chars. Let me count:

"......................." = 25 (let me check: . . . . . . . . . . . . . . . . . . . . . . . . . = 25 ✓)

"..####....#####.........." - let me count: . . # # # # . . . . . # # # # # . . . . . . . . . . = 25 ✓

"....################......" - . . . . # # # # # # # # # # # # # # # # . . . . . . = let me count: 4 + 16 + 6 = 26. Too many. Let me adjust:
"....################......" 4 dots + 16 hashes + 6 dots = 26. Need 25.
"....################......" - actually let me count the dots: "...." = 4, then "################" = 16, then "......" = 6, total = 26. One too many.

Let me redo: "....###############......" - 4 + 15 + 6 = 25 ✓

"####.#############...####." = 4 + 1 + 13 + 3 + 4 + 1 = 26. Hmm.
"####.############...####." = 4 + 1 + 12 + 3 + 4 + 1 = 25 ✓

OK let me just write this all out properly when I code.

Now, for the enemy:
- Patrols a section of platform
- Simple AI: walk back and forth between bounds

Let me think about where the enemy goes. I'll put it on the long platform at row 5 (cols 4-19), patrolling. Or maybe on row 10 platforms.

Actually let me put the enemy on row 5 platform, patrolling left and right. Player needs to time the jump or just not touch it.

Let me write the code now. Here's my plan:

```javascript
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const TILE = 32;
const COLS = 25;
const ROWS = 15;

let level = [...]; // string array converted to tile array
let player = { x, y, vx, vy, w, h, onGround, hasTrophy };
let enemy = { x, y, vx, w, h, minX, maxX };
let camera = { x: 0 }; // for scrolling if needed
let gameState = 'playing'; // 'playing', 'won', 'lost'
let deathReason = '';
let message = '';
let messageTimer = 0;

function reset() {
  // rebuild level from string
  // reset player position
  // reset enemy
}

function update(dt) {
  if (gameState === 'playing') {
    // input
    // physics
    // collisions
    // hazards
    // enemy
    // trophy/exit
  }
}

function draw() {
  // background
  // level tiles
  // trophy
  // exit
  // enemy
  // player
  // HUD
}

function loop(t) {
  const dt = (t - last) / 1000;
  update(dt);
  draw();
  requestAnimationFrame(loop);
}
```

For physics:
- Gravity: 1500 px/s² (so on 32px tile, about 0.21s to fall one tile, terminal ~480px/s after 0.32s)
- Jump velocity: -550 px/s (jumps ~1.5 tiles high with gravity)
- Move speed: 180 px/s

Let me check: With g=1500, jump velocity v=550. Max height = v²/(2g) = 550²/3000 = 302500/3000 ≈ 100 px ≈ 3.1 tiles. Good.
Time to apex: v/g = 550/1500 ≈ 0.37s. Fall time from 3.1 tiles: sqrt(2*100/1500) ≈ 0.37s. Total air time ~0.74s.
Horizontal distance during jump: 180 * 0.74 ≈ 133 px ≈ 4.2 tiles. Good, can clear 3-tile gaps.

For collision:
- Use AABB collision
- Move on X axis, check for horizontal collisions (resolve by pushing out)
- Move on Y axis, check for vertical collisions (resolve by pushing out, set onGround if landing)

Hazard collision: if player intersects fire or water tile, lose.

Enemy collision: if player intersects enemy hitbox, lose.

Exit: if player intersects exit tile AND has trophy, win. Else, show feedback message ("Need trophy!").

Trophy: if player intersects trophy tile, hasTrophy = true, message = "Trophy collected!"

Enemy patrol:
- Enemy has minX and maxX bounds
- Move at speed, reverse at bounds
- Don't fall off platforms (just stay on platform)

For the enemy, I'll place it on a platform and give it bounds.

Let me write the code now. I'll keep it tight.

Actually, let me think about hazards more. The player shouldn't be able to walk through fire/water. So fire/water should be solid tiles? No, the prompt says they're hazards. Hazards are dangerous but not solid walls typically. But if not solid, player can just walk through and die. That makes them block movement but cost life.

Hmm, I think they should be solid (you can't walk through them safely). When you touch them, you lose. So collision with them = lose. They're effectively solid + deadly.

Actually wait, if they're solid, the player just can't move through. But that's fine for fire (instant death, no walking). For water, traditionally in Dave, water isn't solid but you die on touch. Let me make them all act as solid + deadly (collision = death).

OK let me write the code:

```javascript
const TILE = 32;
const COLS = 25;
const ROWS = 15;
const W = COLS * TILE;
const H = ROWS * TILE;

// Level layout
const LEVEL_STR = [
  ".........................",  // 0
  ".........T...............",  // 1: trophy
  "..####....#####..........",  // 2
  "..........................",  // 3
  "......F..................",  // 4: fire
  "....###############......",  // 5: long platform
  "..........................",  // 6
  "..........................",  // 7
  "..........................",  // 8
  "...........E.........W....",  // 9: exit, water
  "....########.....####.....",  // 10
  "..........................",  // 11
  "..........................",  // 12
  "####.############...####.",  // 13: ground with gaps
  "##########################",  // 14
];

const SOLID = 1;
const FIRE = 2;
const WATER = 3;
const TROPHY = 4;
const EXIT = 5;

let tiles = [];
let player, enemy;
let state = 'playing'; // 'playing', 'won', 'lost'
let message = '';
let messageTime = 0;
let keys = {};
let lastTime = 0;

function buildLevel() {
  tiles = [];
  for (let r = 0; r < ROWS; r++) {
    const row = [];
    for (let c = 0; c < COLS; c++) {
      const ch = LEVEL_STR[r][c];
      if (ch === '#') row.push(SOLID);
      else if (ch === 'F') row.push(FIRE);
      else if (ch === 'W') row.push(WATER);
      else if (ch === 'T') row.push(TROPHY);
      else if (ch === 'E') row.push(EXIT);
      else row.push(0);
    }
    tiles.push(row);
  }
  
  // Find starting position (first solid tile from bottom-left)
  // Player starts at row 13, col 1 (on the solid tile)
  player = {
    x: 1 * TILE,
    y: 12 * TILE, // standing on row 13 solid
    vx: 0,
    vy: 0,
    w: 22,
    h: 28,
    onGround: false,
    facing: 1,
    hasTrophy: false
  };
  
  // Enemy patrols on row 5 platform
  enemy = {
    x: 6 * TILE,
    y: 4 * TILE,
    vx: 60,
    w: 24,
    h: 24,
    minX: 5 * TILE,
    maxX: 18 * TILE
  };
  
  state = 'playing';
  message = '';
  messageTime = 0;
}
```

Wait, where should the enemy go? Let me think. If the enemy is on row 5 platform, patrolling from col 5 to col 18, the player needs to:
- Jump up from ground (row 13)
- Land on row 12 platform (cols 4-15)
- Jump to row 10 platform (cols 4-11)
- Jump to row 10 platform (cols 17-20)
- Jump to row 9 area
- Or jump from row 12 to row 5 platform directly? That's a big jump.

Hmm, let me check the heights:
- Row 13 ground
- Row 12 platform (1 above ground) 
- Row 10 platform (3 above ground)
- Row 9 (4 above ground)
- Row 5 platform (8 above ground)
- Row 2 platforms (11 above ground)
- Row 1 trophy (12 above ground)

Player can jump ~3 tiles high (about 100px = ~3 tiles). Hmm.

Let me redo with more reachable heights. Or make jump higher.

Actually, with TILE=32 and gravity 1500, jump vel 550:
- max height: 550²/(2*1500) = 100.8 px
- Tiles: 100.8/32 ≈ 3.15 tiles

So player can jump 3 tiles high. They need platforms within 3 tiles vertical of each other.

Restructure:
```
Row 0: sky
Row 1: trophy on platform (top)
Row 2: platform
Row 3: sky
Row 4: platform
Row 5: fire (no platform needed, just hazard in air? or platform?)
Row 6: sky
Row 7: platform
Row 8: sky
Row 9: platform with exit
Row 10: sky
Row 11: platform
Row 12: sky
Row 13: ground
Row 14: bottom
```

Player can jump from row 13 ground to row 11 platform (2 tiles up) ✓
From row 11 to row 9 (2 tiles up) ✓
From row 9 to row 7 (2 tiles up) ✓
From row 7 to row 5? need to check - 2 tiles up but row 5 is fire hazard. Hmm.
From row 7 to row 4 (3 tiles up) - at the limit
From row 4 to row 2 (2 tiles up) ✓
From row 2 to row 1 trophy (on top of platform, can walk on)

Let me redo:
```
Row 0:  .........................
Row 1:  .........T...............  (trophy on platform)
Row 2:  ..####....####...........  (platform)
Row 3:  .........................
Row 4:  ..........####...........  (platform)
Row 5:  ......F..................  (fire hazard in air)
Row 6:  .........................
Row 7:  ########......######.....  (long platforms)
Row 8:  .........................
Row 9:  ...........E.........W...  (exit and water)
Row 10: .........####.....####...  (platforms)
Row 11: .........................
Row 12: ....######....#####......  (platforms)
Row 13: ####.############...####.  (ground with gaps)
Row 14: #########################
```

Let me check column positions and widths:
Row 1: T at col 9 - this is on top of row 2 platform cols 9-12 (#### from col 9 to 12)
Row 2: "..####....####..........." - cols 2-5 and 10-13
Row 4: "..........####..........." - cols 10-13
Row 7: "########......######....." - cols 0-7 and 14-19
Row 9: "...........E.........W..." - exit col 11, water col 21
Row 10:".........####.....####..." - cols 9-12 and 18-21
Row 12:"....######....#####......" - cols 4-9 and 14-18
Row 13:"####.############...####." - cols 0-3, 5-16, 20-23
Row 14:"#########################" - all cols

Hmm, the trophy at row 1 col 9 is on top of row 2 platform. Player needs to reach row 2 platform from below, then jump up to grab trophy.

Actually wait, the trophy tile itself is on row 1, so the platform at row 2 is just below it. Player walks on row 2, then jumps up to row 1 (1 tile). But row 1 is just the trophy, no platform. Hmm.

Let me make the trophy at the surface of a platform. So trophy is at row 2, sitting on row 3 (empty), which means it's on top of row 3 which is empty... that's confusing.

Let me think differently. The trophy is a collectible item that sits on a platform. Visually, the trophy is on top of a solid tile. So if the trophy is at (row 2, col X), the tile at (row 2, col X) is a trophy (not solid), and the player walks on top of it (the trophy sits on the row 3 tile which is solid? Or it sits on its own row?).

Actually in classic platformers, collectibles are placed on solid tiles. The collectible sprite is drawn on top of the solid tile, and the player can walk through the tile but collects it.

Let me redesign with this in mind. Trophy sits on a platform:

```
Row 0:  .........................
Row 1:  .........................
Row 2:  .........................
Row 3:  .........T...............  (trophy sprite, on top of row 4 platform)
Row 4:  ..........####...........  (platform)
Row 5:  .........................
Row 6:  ......F..................  (fire hazard)
Row 7:  .........................
Row 8:  ########......######.....  (platforms)
Row 9:  .........................
Row 10: ...........E.........W...  (exit and water)
Row 11: .........####.....####...  (platforms)
Row 12: .........................
Row 13: ....######....#####......  (platforms)
Row 14: ####.############...####.  (ground with gaps)
Row 15: #########################
```

Wait, I should keep ROWS=15. Let me compress:

```
Row 0:  .........................
Row 1:  .........T...............  (trophy)
Row 2:  ..........####...........  (platform under trophy)
Row 3:  .........................
Row 4:  ......F..................  (fire)
Row 5:  .........................
Row 6:  ########......######.....  (platforms)
Row 7:  .........................
Row 8:  ...........E.........W...  (exit and water)
Row 9:  .........####.....####...  (platforms)
Row 10: .........................
Row 11: ....######....#####......  (platforms)
Row 12: .........................
Row 13: ####.############...####.  (ground with gaps)
Row 14: #########################
```

Player jump from row 13 ground to row 11 platform (2 tiles) ✓
Player from row 11 to row 9 (2 tiles) ✓
Player from row 9 to row 6 (3 tiles) - tight, might need to be standing run jump
Player from row 6 to row 4 (2 tiles) ✓ - but row 4 is fire
Player from row 4 to row 2 platform (2 tiles) ✓ - need to not touch fire
Player from row 2 platform grabs trophy

Hmm, the fire at row 4 is right above row 6 platform at col 6. That could be a hazard when jumping up. Actually if fire is in the air (not on a platform), the player could just jump around it.

Let me put fire and water hazards that don't block the main path. Maybe fire on row 6 platform (one of the platforms has fire on top):

Actually, let me put the fire/water ON TOP of platforms so they're like lakes/lava:

```
Row 0:  .........................
Row 1:  .........T...............  (trophy)
Row 2:  ..........####...........  (platform)
Row 3:  .........................
Row 4:  .........................
Row 5:  ###########F###########..  (long platform with fire section)
Row 6:  .........................
Row 7:  ...........E.............  (exit)
Row 8:  .........####.....####...  (platforms)
Row 9:  .........................
Row 10: ....######....#####......  (platforms)
Row 11: .........................
Row 12: ####.############...####.  (ground with gaps)
Row 13: #########################
```

Hmm, but the trophy is at row 1 col 9 on top of platform at row 2 cols 10-13. So player needs to reach row 2 platform, jump to grab trophy.

From ground row 12, jump up to row 10 (2 tiles). Walk across. Jump to row 8 platform (2 tiles). Walk. Jump up to row 5 platform (3 tiles - tight).

Wait, but row 5 has fire in the middle. Player must navigate around it. From row 8 to row 5 needs to jump over fire section. Let me put fire near the edges of row 5, not blocking path.

Or better: have multiple platforms:

Let me simplify and think about what makes a fun level:

```
Row 0:  .........................
Row 1:  .........T...............  (trophy on top)
Row 2:  ...........##............  (small platform under trophy)
Row 3:  .........................
Row 4:  .........................
Row 5:  ..####.......####........  (platforms)
Row 6:  .........................
Row 7:  ......F..................  (fire hazard - in air or on platform?)
Row 8:  ...........E.............  (exit)
Row 9:  .........####.....####...  (platforms with water on right)
Row 10: .........................
Row 11: ....######....#####......  (platforms)
Row 12: .........................
Row 13: ####.############...####.  (ground with gaps)
Row 14: #########################
```

Hmm, having a fire hazard in midair at row 7 is weird. Let me put it on a platform.

Actually, let me look at how classic Dave levels are designed. The fire is on top of solid blocks (lava), water is on top of solid blocks. They are like pits filled with hazard.

So hazards are on top of solid blocks, meaning the solid block underneath is solid AND the hazard tile on top is also collision (you die touching it).

For simplicity, let me make:
- Hazards are solid (can't pass through) AND deadly (touching = die)
- Player must navigate around them

Layout:
```
Row 0:  .........................
Row 1:  .........T...............  (trophy)
Row 2:  ............###..........  (small platform under trophy)
Row 3:  .........................
Row 4:  .........................
Row 5:  ######........#####.....  (platforms)
Row 6:  .........................
Row 7:  ........F................  (fire on platform)
Row 8:  ........####............  (platform with fire)
Row 9:  .........................
Row 10: ............E............  (exit)
Row 11: ...........##...........  (platform under exit)
Row 12: .........................
Row 13: ####.############...####.  (ground)
Row 14: #########################
```

Hmm, this is getting complex. Let me just write it and adjust.

Let me commit to this layout (final):

```
Row 0:  .........................  (25 dots)
Row 1:  .........T................  (trophy col 9)
Row 2:  ............####..........  (platform cols 12-15)
Row 3:  .........................
Row 4:  .........................
Row 5:  ######........#####.....  (cols 0-5 and 14-18)
Row 6:  .........................
Row 7:  .........F...............  (fire col 9)
Row 8:  .........####............  (platform cols 9-12, holds fire)
Row 9:  .........................
Row 10: ............E............  (exit col 12)
Row 11: ...........####..........  (platform cols 11-14)
Row 12: .........................
Row 13: ####.############...####.  (cols 0-3, 5-16, 20-23)
Row 14: #########################
```

Hmm wait, let me think about what's at row 14. That's the bottom. Player falls off the bottom = lose? Or it's the floor.

Let me make row 14 the floor (no holes). Player starts on row 13 (or row 14 surface).

Actually let me redesign with 16 rows to have more room:

No, let's stick with 15 rows. Let me think:
- Top of screen: row 0
- Bottom: row 14

Player jumps from row 13 ground up. Max jump height = 3 tiles (about 100px). So can reach row 10 directly.

Actually let me reduce jump height to 2-3 tiles and have lots of stepping stones.

Let me just write the code and test. I'll iterate.

Let me write a simple, complete game:

```javascript
const TILE = 32;
const COLS = 25;
const ROWS = 15;
const W = COLS * TILE; // 800
const H = ROWS * TILE; // 480

const SOLID = 1;
const HAZARD = 2; // fire or water
const TROPHY_TILE = 3;
const EXIT_TILE = 4;
const PLAYER_START = { col: 1, row: 12 }; // top-left of player
const ENEMY_START = { col: 5, row: 4 }; // on platform at row 5

const LEVEL = [
  // 0         1         2
  // 0123456789012345678901234
  ".........................", // 0
  ".........T...............", // 1: trophy col 9
  "............####..........", // 2: platform cols 12-15
  ".........................", // 3
  ".........................", // 4
  "######........#####......", // 5: platforms cols 0-5, 14-18
  ".........................", // 6
  ".........F...............", // 7: fire col 9 (in air)
  ".........####............", // 8: platform cols 9-12
  ".........................", // 9
  "............E............", // 10: exit col 12
  "...........####..........", // 11: platform cols 11-14
  ".........................", // 12
  "####.############...####.", // 13: ground cols 0-3, 5-16, 20-23
  ".........................", // 14: NOT bottom, empty so player falls = lose
];
```

Wait, if row 14 is empty, player can fall off the bottom. That's a death. Good for falling off platforms.

Actually, let me make row 14 the bottom too. No wait, I want a single row of ground (row 13/14). Let me have the ground be row 13 with the row 14 being bottom edge (player falls off = die).

Hmm, or just have a solid bottom. Let me think:

The "level" is 15 rows tall. The "ground" is at the bottom. Below the ground is out of bounds.

Simple approach: row 14 is solid ground, player stands on top of row 14 solid tiles. If row 14 has gaps, player falls into them (and dies).

```
Row 14: "####.############...####."  // gaps where player can fall and die
```

Wait but row 14 should be drawn too. Let me put ground at row 14 and above is gameplay area:

Actually, looking at this more carefully:
- "Ground" platforms are at row 13
- Below them is "out of bounds" (player falls = die)
- Top of row 14 platform is where player walks

Let me just have row 14 be all solid (so player can't fall through), with row 13 being partially solid (forming the "floor" of the play area).

OK let me think about this concretely:

If row 14 is solid everywhere, the player has a flat ground floor.
If row 13 has gaps, those gaps are interesting features (or they show what the player can fall through if they walk off platforms above).

Hmm wait, in tile-based games, gaps are usually pits you can fall into. Let me have:
- Row 14: solid ground (everywhere)
- Row 13: empty (sky above the ground) - or also solid for thicker ground

Standard:
- The "ground" is 1-2 tiles of solid at the bottom
- Above the ground is empty
- Platforms are placed in the empty area

Let me just do:
- Row 13 and 14: solid ground everywhere (the floor of the level)
- Row 0-12: above-ground space with platforms and hazards

But I want gaps/pits for visual interest. Let me put row 14 mostly solid, with row 13 having some gaps (like floor pieces that go up 1 tile but not continuously).

Hmm, this is getting too complex. Let me simplify:

The level is 15 rows. Bottom 1-2 rows are "ground". Player starts on top of the ground. Platforms exist above.

Let me use this approach:
- Row 14: solid all across (bottom of level, kills player if falls past)
- Row 13: empty (open space above ground)
- Player stands on top of row 14 (so player y = 13 * TILE)

But then there's no pits. Pits would require gaps in row 14. Let me add some pits in row 14 for visual interest and a way to die from falling:

```
Row 14: "####.############...####."  // gaps where player can fall and die
```

Actually no, if row 14 has gaps, then row 14 doesn't kill player. The player just falls off screen. Let me handle "fell off screen" as a death.

OK here's my final design:

```javascript
const LEVEL = [
  ".........................", // 0
  ".........T...............", // 1: trophy
  "............####..........", // 2: platform under trophy
  ".........................", // 3
  ".........................", // 4
  "######........#####......", // 5: patrol platform
  ".........................", // 6
  ".........F...............", // 7: fire in air
  ".........####............", // 8: platform with fire on top
  ".........................", // 9
  "............E............", // 10: exit
  "...........####..........", // 11: platform under exit
  ".........................", // 12
  "####.############...####.", // 13: ground with gaps
  "####.############...####.", // 14: same as 13 (deeper ground)
];
```

Hmm wait, if row 14 has gaps, player can fall through. They die from "fell out of world". Let me handle that.

But actually, having row 13 AND row 14 both as ground is fine - it's just a 2-tile thick floor. The gaps are pits.

Let me trace path:
- Player starts at row 12, col 1 (standing on row 13 ground at col 1)
- Row 13 has solid at cols 0-3, 5-16, 20-23. Gaps at cols 4 and 17-19.
- Player at col 1 is safe (on solid ground).
- Move right along row 13. Need to jump over the gap at col 4. Jump from col 3 to col 5 is 2 tiles - possible.
- Continue on row 13 ground. At col 16, next is col 17 (gap). Need to jump from col 16 to col 20 - that's 4 tiles. Too far.

Let me fix the gap:
```
Row 13: "####.############...####."
```
Cols: 0,1,2,3 solid; 4 gap; 5-16 solid (12 cols); 17,18,19 gap (3 cols); 20-23 solid.

Gap from col 16 to col 20 is 4 tiles. Need to be 3 or fewer for jump.

Let me adjust:
```
Row 13: "####.###########..#####."
```
4 + 1 + 11 + 2 + 5 + 1 = 24. Hmm.

Let me just be careful:
"####.###########..####...."  = 4 + 1 + 11 + 2 + 4 + 4 = 26. Too many.

"####.##########..#####..."  = 4 + 1 + 10 + 2 + 5 + 3 = 25 ✓
Cols: 0-3 solid, 4 gap, 5-14 solid (10), 15-16 gap (2), 17-21 solid (5), 22-24 gap (3).

Gap from col 14 to col 17 is 3 tiles. Hard but possible.
Gap from col 21 to col 22 is just 1 tile... wait no. After 17-21 solid, col 22-24 is gap (3 cols of gap). So gap from col 21 to "out of bounds" is 3 cols.

Hmm let me redo:
"####.###########..######.."  = 4 + 1 + 11 + 2 + 6 + 2 = 26. Too many.

"####.###########..#####..."  = 4 + 1 + 11 + 2 + 5 + 3 = 26. Too many.

"####.##########..#####...."  = 4 + 1 + 10 + 2 + 5 + 4 = 26. Too many.

OK let me carefully count:
"####" = 4
"." = 1
"##########" = 10
".." = 2
"#####" = 5
"." = 1
"." = 1
"." = 1
Total: 4+1+10+2+5+1+1+1 = 25 ✓

So: "####.##########..#####..."
Cols: 0-3 solid, 4 gap, 5-14 solid, 15-16 gap, 17-21 solid, 22-24 gap.

Gap at col 4 is 1 tile wide (col 4). Jump from col 3 to col 5 = 2 tile jump. Easy.
Gap at cols 15-16 is 2 tiles wide. Jump from col 14 to col 17 = 3 tile jump. Doable.
Gap at cols 22-24 is 3 tiles wide. Player would fall off the right edge if they walk to col 21. Hmm, but they probably won't go that way since exit is on the left.

OK let me set up the full level:

```
Row 0:  "......................."  (25)
Row 1:  ".........T............."  (T at col 9)
Row 2:  "............####........." (platform cols 12-15)
```

Wait, "............####........."  = 12 + 4 + 9 = 25 ✓
Cols 12,13,14,15 solid.

Row 3:  "......................."  (25)
Row 4:  "......................."  (25)
Row 5:  "######........#####....." = 6 + 8 + 5 + 6 = 25 ✓ (cols 0-5, 14-18)

Row 6:  "......................."  (25)
Row 7:  ".........F.............." = 9 + 1 + 15 = 25 ✓ (F at col 9)
Row 8:  ".........####..........." = 9 + 4 + 12 = 25 ✓ (cols 9-12 solid)

Wait, the fire at col 9 row 7 sits on top of solid at col 9 row 8. So when player jumps over the row 8 platform, they hit the fire at the top. Good.

Row 9:  "......................."  (25)
Row 10: "............E..........." = 12 + 1 + 12 = 25 ✓ (E at col 12)

Hmm wait, "............" is 12 dots. Then "E" then "..........." is 12 dots. Total 25. ✓

Row 11: "...........####........." = 11 + 4 + 10 = 25 ✓ (cols 11-14 solid)
Row 12: "......................."  (25)
Row 13: "####.##########..#####..." = 4 + 1 + 10 + 2 + 5 + 3 = 25 ✓
  Cols 0-3 solid, 4 gap, 5-14 solid, 15-16 gap, 17-21 solid, 22-24 gap
Row 14: "####.##########..#####..." (same as 13)

Actually wait, having same as 13 means the gaps align. The pit at col 4 is just a 2-tile deep pit. Player can fall into it (rows 13, 14 both empty at col 4). They die.

Let me check path reachability:

Player starts at row 12, col 1 (standing on row 13 ground at col 1, top of player at y = 12*32).

Goal 1: Reach trophy at row 1, col 9.
Path:
- Start: col 1, row 12-13 ground
- Jump up to row 11 platform (cols 11-14)? Player at col 1, platform at col 11. That's 10 tiles horizontal, can't jump that far.
- Need intermediate platform. Row 5 has cols 0-5. Player can jump from col 1 (on ground at row 13) to row 11 platform at col... wait, row 5 is high.

Let me check vertical distances:
- Row 13 ground → row 11 platform: 2 tiles up ✓
- Row 11 platform cols 11-14 → row 5 cols 0-5: 6 tiles horizontal, 6 tiles up. Both too far.

Hmm. Let me add intermediate platforms.

Restructure:

```
Row 0:  "......................."  // 25
Row 1:  ".........T............."  // trophy col 9
Row 2:  "............####........"  // cols 12-15
Row 3:  "......................."
Row 4:  "######....#####........"  // cols 0-5, 10-14
Row 5:  "......................."
Row 6:  "......######.....#####.."  // cols 6-11, 17-21
Row 7:  ".........F.............."  // fire col 9
Row 8:  "......................."
Row 9:  "...........E............"  // exit col 11
Row 10: "...........####........."  // cols 11-14
Row 11: "......................."
Row 12: "......######....######..."  // cols 6-11, 16-21
Row 13: "####.##########..#####..."  // ground with gaps
Row 14: "####.##########..#####..."  // same
```

Let me check:
Row 4: "######....#####........" = 6 + 4 + 5 + 10 = 25 ✓
Row 6: "......######.....#####.." = 6 + 6 + 5 + 5 + 3 = 25 ✓
Row 12: "......######....######..." = 6 + 6 + 4 + 6 + 3 = 25 ✓
Row 10: "...........####........." = 11 + 4 + 10 = 25 ✓

Path from ground row 13 (col 1) to trophy at row 1 col 9:
1. Start at col 1, row 13
2. Walk right to col 6 area
3. Jump up to row 12 platform (cols 6-11) - 1 tile up ✓
4. Walk right on row 12 platform to col 11
5. Jump up to row 10 platform (cols 11-14) - 2 tiles up ✓
6. Walk to col 14
7. Jump up to row 8? No platform at row 8. Need to go higher.
   
Hmm, the row 10 platform doesn't help reach trophy. Trophy is at row 1 col 9.

Let me redesign with a more direct path:

```
Row 0:  "......................."
Row 1:  ".........T............."  // trophy
Row 2:  "............####........"  // platform cols 12-15 (under trophy)
Row 3:  "......................."
Row 4:  "######.........#####..."  // cols 0-5, 15-19
Row 5:  "......................."
Row 6:  "......................."
Row 7:  ".........F.............."  // fire col 9 (in air, you jump over)
Row 8:  "......................."
Row 9:  "...........E............"  // exit col 11
Row 10: "......................."
Row 11: "......................."
Row 12: "........................"
Row 13: "####.##########..#####..."  // ground with gaps
Row 14: "####.##########..#####..."
```

But this doesn't have platforms between ground and trophy. Player can jump ~3 tiles up. From row 13 to row 1 is 12 tiles. Impossible.

OK I need stepping stones. Let me redesign properly:

```
Row 0:  "......................."
Row 1:  ".........T............."  // trophy col 9
Row 2:  "............####........"  // platform cols 12-15 (sits under trophy - actually trophy at col 9 so this is offset)

Hmm wait, trophy at col 9 and platform at cols 12-15 doesn't have trophy on top. Let me put trophy on top of platform:

If trophy is at row 1 col 9, then platform should be at row 2 col 9 (directly below). Let me redesign.

Actually, "sitting on a platform" means the trophy sprite is at row R, and the tile at row R+1 col C is solid. So player walks on row R+1 platform, and the trophy sprite is at row R col C (above the platform).

Let me redo:

```
Row 0:  "......................."  // empty
Row 1:  ".........T............."  // trophy at col 9, sits on row 2 platform
Row 2:  ".........####.........."  // platform cols 9-12
Row 3:  "......................."  // empty
Row 4:  "######.........#####..."  // cols 0-5, 15-19
Row 5:  "......................."  // empty
Row 6:  "......................."  // empty
Row 7:  ".........F.............."  // fire col 9, sits on row 8 platform
Row 8:  ".........####.........."  // platform cols 9-12 (under fire)
Row 9:  "......................."  // empty
Row 10: "...........E............"  // exit col 11
Row 11: "...........####........."  // platform cols 11-14 (under exit)
Row 12: "........................"  // empty
Row 13: "####.##########..#####..."  // ground
Row 14: "####.##########..#####..."  // ground
```

Hmm but where does the player go from row 11 to reach trophy at row 2?

Path attempt:
1. Player at col 1, row 12 (on row 13 ground)
2. Walk right to col 4
3. Jump gap at col 4 (1 tile gap, easy)
4. Continue to col 6 on row 13 ground
5. Jump up to row 11 platform? Platform at row 11 cols 11-14. Player at col 6, need to reach col 11. That's 5 tiles horizontal and 2 tiles vertical. Too far.

OK need more platforms. Let me add:

```
Row 0:  "......................."
Row 1:  ".........T............."
Row 2:  ".........####.........."
Row 3:  "......................."
Row 4:  "######....#####........"  // cols 0-5, 10-14
Row 5:  "......................."
Row 6:  "......................."
Row 7:  ".........F.............."
Row 8:  ".........####.........."
Row 9:  "......................."
Row 10: "...........E............"
Row 11: "...........####........."
Row 12: "......######....######..."  // cols 6-11, 16-21
Row 13: "####.##########..#####..."
Row 14: "####.##########..#####..."
```

Now path:
1. Start at col 1, row 12 (on row 13 ground)
2. Walk to col 5 on row 13 ground (between gaps at col 4 and col 15-16)
3. Jump up to row 12 platform (cols 6-11) - 1 tile up, 1 tile horizontal ✓
4. Walk right on row 12 platform to col 11
5. Jump up to row 11 platform (cols 11-14) - 1 tile up ✓
6. Walk to col 11 on row 11
7. Exit is at row 10 col 11. Jump up to grab it? Actually exit is just standing on row 11 platform at col 11 means exit is right above. If player walks into exit tile (col 11, row 10), trigger.

Hmm but exit is at row 10, which is empty. Player needs to jump up to reach exit at col 11 row 10. Actually no, the player just needs to overlap with exit tile. If player walks into row 10 col 11, the exit triggers. But to walk into row 10, player needs to be airborne (since row 11 is solid under player). Or jumping.

Let me make the exit a sprite on top of the platform, so player can walk under it and touch it.

Actually let me think: the exit tile is at (row 10, col 11). The player walks on top of the row 11 platform. Player's bounding box: y from (11*32 - 28) to (11*32). Player top at row 10 area. So player already overlaps row 10. If exit tile is at row 10, player overlaps it just by standing.

But the tile at row 11 col 11 is solid (part of the platform). Player stands on top. Player's bounding box overlaps row 10 col 11. Exit is at row 10 col 11. So they're overlapping. The exit triggers when player has trophy.

OK so player just stands on row 11 platform at col 11 with trophy = win.

Let me check path to trophy:
- Player at col 11 on row 11 platform
- Need to reach row 2 platform at cols 9-12
- Row 8 platform is at cols 9-12 (has fire on top)
- Row 4 platform is at cols 0-5 and 10-14
- Row 2 platform is at cols 9-12 (trophy on top)

From row 11 (col 11), jump up to row 8 platform (col 11). That's 3 tiles up ✓
But fire at row 7 col 9 is right above row 8 platform at col 9. So when jumping up at col 11, the player passes through col 11 row 7 which is empty. OK no fire issue.

Wait, the player jumps up through col 11. The fire is at col 9. Player passes through col 11. So player at col 11 doesn't touch fire at col 9.

But after landing on row 8 platform, to reach trophy, player walks left to col 9 (where fire is above). Player walking under fire at col 9. Player needs to jump up to grab trophy. While jumping up from col 9, player passes through fire at row 7 col 9. DIES.

Hmm. Let me adjust the layout so fire doesn't block the path to trophy.

Option 1: Move fire elsewhere.
Option 2: Player can grab trophy from the right side (col 10-12) instead of jumping up at col 9.

Actually, the player just needs to touch the trophy tile. Trophy at row 1 col 9. Player jumping from row 8 platform at col 11 reaches row 1 (3 tiles up at col 11). Player's bounding box overlaps row 1 col 9... wait, player is at col 11, trophy is at col 9. 2 tiles apart horizontally. Not overlapping.

Hmm. Player needs to be directly below or at trophy to grab it.

Let me move trophy to col 11 (above row 8 platform):
- Trophy at row 1 col 11, platform at row 2 col 11
- Player jumps from row 8 platform at col 11 straight up to grab trophy ✓

But fire is at row 7 col 9, doesn't block this path.

Actually wait, let me redesign more cleanly. The trophy sits on a platform. The path to the trophy: player approaches from below, jumps up.

Let me put the trophy on the left side and have a clear path to it:

```
Row 0:  "......................."
Row 1:  "....T..................."  // trophy col 4
Row 2:  "....####................"  // platform cols 4-7 (under trophy)
Row 3:  "......................."
Row 4:  "######....#####........"  // cols 0-5, 10-14
Row 5:  "......................."
Row 6:  "......................."
Row 7:  ".........F.............."  // fire col 9
Row 8:  ".........####.........."  // platform cols 9-12
Row 9:  "......................."
Row 10: "...........E............"  // exit col 11
Row 11: "...........####........."  // cols 11-14
Row 12: "......######....######..."  // cols 6-11, 16-21
Row 13: "####.##########..#####..."
Row 14: "####.##########..#####..."
```

Path to trophy:
1. Start at col 1, row 12 (on ground)
2. Walk to col 5 on ground
3. Jump up to row 12 platform (cols 6-11) - 1 tile up, 1 tile horizontal ✓
4. Walk left on row 12 to col 6
5. Jump up to row 4 platform (cols 0-5)? That's 8 tiles up. Too far.

Need more platforms on left side.

Hmm, let me redo:

```
Row 0:  "......................."
Row 1:  "....T..................."  // trophy col 4
Row 2:  "....####................"  // platform cols 4-7 (under trophy)
Row 3:  "......................."
Row 4:  "######....#####........"  // cols 0-5, 10-14 (stepping stones)
Row 5:  "......................."
Row 6:  "......................."
Row 7:  ".........F.............."  // fire col 9
Row 8:  ".........####.........."  // platform cols 9-12 (under fire)
Row 9:  "......................."
Row 10: "...........E............"  // exit col 11
Row 11: "...........####........."  // cols 11-14 (under exit)
Row 12: "......######....######..."  // cols 6-11, 16-21 (under exit platform)
Row 13: "####.##########..#####..."  // ground
Row 14: "####.##########..#####..."  // ground
```

Hmm, I keep struggling. Let me think differently.

For a working platformer, I need a chain of platforms that the player can step up. Each platform reachable from the previous with a jump of ~3 tiles high and ~4 tiles horizontal.

Simplest path: a staircase going up.

```
Row 0:  "......................."
Row 1:  ".........T............."  // trophy on top
Row 2:  "..........####........."  // platform under trophy
Row 3:  "......................."
Row 4:  ".........####.........."  // platform 1 step below
Row 5:  "......................."
Row 6:  "........####..........."  // platform 1 step below
Row 7:  "....F.................."  // fire on left side
Row 8:  "####..................."  // platform 1 step below
Row 9:  "......................."
Row 10: "......................."
Row 11: "......................."
Row 12: "......................."
Row 13: "####.##########..#####..."  // ground
Row 14: "####.##########..#####..."
```

Wait, fire at row 7 col 4 with no platform below it... fire is in air. Weird.

Let me put fire on a platform. Actually fire can be in midair like a fireball. But for simplicity, let me put fire on top of a platform.

Hmm let me think differently. The "Dangerous Dave" style has rooms with floating platforms, fire pits, water pits, and an exit door.

Let me just make a simpler level:

```
Row 0:  "......................."
Row 1:  "......................."
Row 2:  "............####........"  // cols 12-15
Row 3:  "......................."
Row 4:  "......................."
Row 5:  "######....######......."  // cols 0-5, 10-15
Row 6:  "......................."
Row 7:  "............####........"  // cols 12-15 (under trophy area)
Row 8:  "......................."
Row 9:  "...........E............"  // exit col 11
Row 10: "......................."
Row 11: ".........####.........."  // cols 9-12
Row 12: "......######....######..."  // cols 6-11, 16-21
Row 13: "####.##########..#####..."
Row 14: "####.##########..#####..."
```

Hmm, where's the trophy?

Let me try yet another layout:

```
Row 0:  "......................."
Row 1:  "......................."
Row 2:  ".........T............."  // trophy col 9
Row 3:  "......................."
Row 4:  "............####........"  // cols 12-15
Row 5:  "......................."
Row 6:  "######.........#####..."  // cols 0-5, 15-19
Row 7:  ".........F.............."  // fire col 9
Row 8:  "......................."
Row 9:  "######.........#####..."  // cols 0-5, 15-19 (patrol here)
Row 10: "...........E............"  // exit col 11
Row 11: "......................."
Row 12: "......######....######..."  // cols 6-11, 16-21
Row 13: "####.##########..#####..."
Row 14: "####.##########..#####..."
```

Wait, I had fire at row 7 col 9 with no platform. That's weird. Let me put fire on row 7 col 9 with the platform at row 7 (combined): no wait, can't combine.

Let me put fire on a platform:

```
Row 0:  "......................."
Row 1:  "......................."
Row 2:  ".........T............."  // trophy
Row 3:  "............####........"  // cols 12-15 (platform under trophy)
Row 4:  "......................."
Row 5:  "######.........#####..."  // cols 0-5, 15-19
Row 6:  "......................."
Row 7:  "..........F............."  // fire col 10 (in air)
Row 8:  "......######.....######.."  // cols 6-11, 17-22
Row 9:  "......................."
Row 10: "...........E............"  // exit col 11
Row 11: "......................."
Row 12: "...........####........."  // cols 11-14
Row 13: "####.##########..#####..."  // ground
Row 14: "####.##########..#####..."
```

Hmm fire in midair at row 7 col 10 is weird. Let me just put fire on a solid tile (like a lava tile):

```
Row 0:  "......................."
Row 1:  "......................."
Row 2:  ".........T............."  // trophy col 9
Row 3:  "............####........"  // cols 12-15
Row 4:  "......................."
Row 5:  "######.........#####..."  // cols 0-5, 15-19
Row 6:  "......................."
Row 7:  "......................."
Row 8:  "........F..####........."  // fire col 8, platform cols 11-14
Row 9:  "......................."
Row 10: "...........E............"  // exit col 11
Row 11: "......................."
Row 12: "...........####........."  // cols 11-14
Row 13: "####.##########..#####..."  // ground
Row 14: "####.##########..#####..."
```

OK this is too much iteration. Let me just commit to a design and run with it.

Final design:

```javascript
const LEVEL = [
  ".........................",  // 0
  ".........................",  // 1
  ".........T...............",  // 2: trophy
  "............####.........",  // 3: platform cols 12-15
  ".........................",  // 4
  "######.........#####.....",  // 5: cols 0-5, 15-19
  ".........................",  // 6
  "......F..................",  // 7: fire col 6 (on row 8 platform)
  "......######.....######..",  // 8: cols 6-11, 17-22
  ".........................",  // 9
  "...........E.............",  // 10: exit col 11
  ".........................",  // 11
  "...........####..........",  // 12: cols 11-14
  "####.##########..#####...",  // 13: ground
  "####.##########..#####...",  // 14: ground
];
```

Hmm, fire at row 7 col 6 is in air. Let me put it on top of row 8 platform:

If row 8 platform is at cols 6-11, then fire could be at row 7 col 6-11. Let me put it at col 6 (left edge of platform) so it's not blocking the whole thing.

Actually you know what, let me just put fire AT row 8 col 6 (replace a solid with fire). The "fire" is a hazard tile on the ground (player walks into it = die). It's solid + deadly.

Hmm but if it's solid, the player can't walk through. Then it's just an obstacle. That's OK.

Let me redo with hazards as solid + deadly:

```javascript
const LEVEL = [
  ".........................",  // 0
  ".........................",  // 1
  ".........T...............",  // 2: trophy
  "............####.........",  // 3: platform cols 12-15
  ".........................",  // 4
  "######.........#####.....",  // 5: cols 0-5, 15-19
  ".........................",  // 6
  ".........................",  // 7
  "......######.....######..",  // 8: cols 6-11, 17-22
  ".........................",  // 9
  ".....F.......E......W....",  // 10: fire col 5, exit col 13, water col 21
  "...........####..........",  // 11: cols 11-14
  ".........................",  // 12
  "####.##########..#####...",  // 13: ground
  "####.##########..#####...",  // 14: ground
];
```

Hmm let me check this design for reachability.

Player starts at row 12, col 1 (standing on row 13 solid at col 1). 

Goal 1: Reach trophy at row 2 col 9.

Path attempt:
1. Player at col 1, row 13 ground (top of player at row 12)
2. Walk right to col 5 on ground
3. Jump up to row 8 platform at col 6? Player at col 5, jumps to col 6-11 row 8. That's 2 tiles up, 1 tile horizontal. Easy.
4. Walk right on row 8 platform to col 11
5. Jump up to row 5 platform at col 15-19? Player at col 11, needs to reach col 15. 4 tiles horizontal, 3 tiles up. Tight.
6. Walk right to col 19 on row 5
7. Jump up to row 3 platform at col 12-15? Player at col 19, needs col 12-15. 4-7 tiles horizontal, 2 tiles up. Hard.

Hmm, getting from row 5 right side to row 3 platform is tricky.

Let me try left side:
1. Player at col 1
2. Walk right to col 5
3. Jump up to row 5 platform at cols 0-5? Player at col 5 on ground. Jump up to col 5 on row 5. That's 8 tiles up. Way too far.

Hmm, no easy way up.

OK let me redo with platforms on left side too:

```javascript
const LEVEL = [
  ".........................",  // 0
  ".........................",  // 1
  "....T....................",  // 2: trophy col 4
  "....####..................",  // 3: cols 4-7
  ".........................",  // 4
  "######.........#####.....",  // 5: cols 0-5, 15-19
  ".........................",  // 6
  ".........................",  // 7
  "......######.....######..",  // 8: cols 6-11, 17-22
  ".........................",  // 9
  ".....F.......E......W....",  // 10: fire col 5, exit col 13, water col 21
  "...........####..........",  // 11: cols 11-14
  ".........................",  // 12
  "####.##########..#####...",  // 13: ground
  "####.##########..#####...",  // 14: ground
];
```

Path to trophy (col 4):
1. Player at col 1, row 12 (on ground)
2. Walk right to col 5 on ground
3. Jump up to row 5 platform (cols 0-5) - 8 tiles up. No way.

Hmm. The row 5 platform on the left is too high.

Let me put platforms on left side lower:

```javascript
const LEVEL = [
  ".........................",  // 0
  ".........................",  // 1
  "....T....................",  // 2: trophy col 4
  "....####..................",  // 3: cols 4-7
  ".........................",  // 4
  "######.........#####.....",  // 5: cols 0-5, 15-19
  ".........................",  // 6
  ".........................",  // 7
  "......######.....######..",  // 8: cols 6-11, 17-22
  ".........................",  // 9
  ".....F.......E......W....",  // 10: fire col 5, exit col 13, water col 21
  "...........####..........",  // 11: cols 11-14
  ".........................",  // 12
  "####.##########..#####...",  // 13: ground
  "####.##########..#####...",  // 14: ground
];
```

Wait, I'm at the same design. Let me actually add platforms at intermediate heights on the left:

```javascript
const LEVEL = [
  ".........................",  // 0
  "....T....................",  // 1: trophy col 4
  "....####..................",  // 2: cols 4-7 (under trophy)
  ".........................",  // 3
  ".........................",  // 4
  "######.........#####.....",  // 5: cols 0-5, 15-19
  ".........................",  // 6
  ".........................",  // 7
  "......######.....######..",  // 8: cols 6-11, 17-22
  ".........................",  // 9
  ".....F.......E......W....",  // 10: fire col 5, exit col 13, water col 21
  "...........####..........",  // 11: cols 11-14
  ".........................",  // 12
  "####.##########..#####...",  // 13: ground
  "####.##########..#####...",  // 14: ground
];
```

From row 13 (player start), can player reach row 2 (trophy)?

Vertical: 13 - 2 = 11 tiles. Each jump goes up ~3 tiles. So need ~4 jumps up with stepping stones.

Stepping stones needed at rows 10, 7, 4 (approx).

I have platforms at:
- Row 5 (cols 0-5, 15-19)
- Row 8 (cols 6-11, 17-22)
- Row 11 (cols 11-14)

Hmm, no platform on left at rows 11, 8. Player on left side has nowhere to step.

Let me add platforms:

```javascript
const LEVEL = [
  ".........................",  // 0
  "....T....................",  // 1: trophy col 4
  "....####..................",  // 2: cols 4-7 (under trophy)
  ".........................",  // 3
  "######.........#####.....",  // 4: cols 0-5, 15-19
  ".........................",  // 5
  "......######.....######..",  // 6: cols 6-11, 17-22
  ".........................",  // 7
  ".........................",  // 8
  ".....F.......E......W....",  // 9: fire col 5, exit col 13, water col 21
  "...........####..........",  // 10: cols 11-14
  ".........................",  // 11
  "######....######....#####.",  // 12: cols 0-5, 10-15, 20-24
  "####.##########..#####...",  // 13: ground
  "####.##########..#####...",  // 14: ground
];
```

Hmm, wait this has 15 rows but I labeled them 0-14. Let me use consistent labels. The first row in the array is row 0 (top of screen).

Path to trophy:
1. Player at col 1, row 12 (top of player at y = 12*32)
2. Walk right on row 12 platforms? Wait, row 12 has solid at cols 0-5, 10-15, 20-24. But player is on row 13 ground, not row 12. Row 12 is up 1 tile.
3. Player at row 13. Jump up to row 12 platform at cols 0-5 (player at col 1, target col 1-5). 1 tile up, 0 horizontal. Easy.
4. Walk right on row 12 from col 1 to col 5
5. Jump up to row 4 platform at cols 0-5? Player at col 5, target row 4. 8 tiles up. Way too far.
6. Jump right to row 12 platform at cols 10-15? Player at col 5, target col 10. 5 tiles horizontal, 0 vertical. Too far horizontally.

Need a step in between. Let me add row 6 or 8 platforms:

Actually the row 6 platform at cols 6-11 is the step. Player on row 12 cols 0-5, jumps right to row 12 cols 10-15? Still 5 tiles. Too far.

Wait, what about the row 8 platforms (cols 6-11, 17-22)? Player jumps from row 12 col 5 to row 8 col 6-11. That's 4 tiles up, 1-6 horizontal. 4 tiles vertical is too far (max is ~3).

Hmm. Let me reduce jump heights or add more platforms.

OK let me try this approach: a "staircase" of platforms going from ground to trophy.

```
Row 0:  "......................."
Row 1:  "....T.................."  // trophy
Row 2:  "....####..............."  // platform
Row 3:  "......................."
Row 4:  ".........####.........."  // platform (mid)
Row 5:  "....####..............."  // platform (mid)
Row 6:  "......................."
Row 7:  ".........####.........."  // platform (mid)
Row 8:  "....####..............."  // platform (mid)
Row 9:  "......................."
Row 10: "....####..............."  // platform (low)
Row 11: "....####..............."  // platform (low)
Row 12: "......................."
Row 13: "####.##########..#####..."
Row 14: "####.##########..#####..."
```

But this is only on left side. Need fire, water, exit, enemy.

OK let me really think about layout. The level is 25 wide x 15 tall. Player jump: 3 tiles vertical, 4 tiles horizontal.

Let me design a level with multiple areas:
- Left area: stairs going up to trophy
- Right area: exit, fire, water, enemy

```
Row 0:  "......................."
Row 1:  "....T..................."  // trophy col 4
Row 2:  "....####................"  // platform cols 4-7
Row 3:  "......................."
Row 4:  ".........####..........."  // mid platform cols 9-12
Row 5:  "......................."
Row 6:  "....####........######."  // cols 4-7, 17-22
Row 7:  "......................."
Row 8:  ".........####..........."  // cols 9-12
Row 9:  "......................."
Row 10: "....F......E......W...."  // fire col 4, exit col 11, water col 19 (mid air hazards?)
Row 11: ".........####..........."  // cols 9-12
Row 12: "####....######....####."  // cols 0-3, 8-13, 18-21
Row 13: "####.##########..#####..."  // ground
Row 14: "####.##########..#####..."
```

Wait, fire and water at row 10 in air without platforms? Let me put them on platforms:

Actually, fire/water can be tiles on the ground or in the air. If in the air, they're like fireballs (touching them = die). If on the ground, they're like lava pools.

Let me put fire as a fireball in midair, water as a pool at the bottom (row 13 area).

Actually, you know what, let me put hazards on solid tiles (replacing solid tiles). So they're ground hazards:

```
Row 0:  "......................."
Row 1:  "....T..................."  // trophy
Row 2:  "....####................"  // platform
Row 3:  "......................."
Row 4:  ".........####..........."  // mid
Row 5:  "......................."
Row 6:  "....####........######."  // cols 4-7, 17-22
Row 7:  "......................."
Row 8:  ".........####..........."  // cols 9-12
Row 9:  "......................."
Row 10: "....F......E......W...."  // hazards and exit at row 10
Row 11: ".........####..........."  // cols 9-12
Row 12: "####....######....####."  // cols 0-3, 8-13, 18-21
Row 13: "####.##########..#####..."  // ground
Row 14: "####.##########..#####..."
```

Hmm, fire at row 10 col 4 has no platform above or below. Weird.

Let me restructure. Hazards go on platforms:

Actually I realize hazards don't need platforms - they can be tiles that the player can collide with. If the hazard is at (row R, col C) and there's a solid tile at (row R, col C), then the hazard replaces the solid. The player can walk on it (touching = die).

Or, hazards are at (row R, col C) where there's empty space - they're like floating fireballs.

Let me just have hazards be obstacles (replacing solid tiles). So they block movement AND kill on touch.

Final design (committing):

```javascript
const LEVEL = [
  ".........................",  // 0
  "....T....................",  // 1: trophy col 4
  "....####................",  // 2: cols 4-7
  ".........................",  // 3
  "........####.............",  // 4: cols 8-11
  ".........................",  // 5
  "....####.....######......",  // 6: cols 4-7, 13-18
  ".........................",  // 7
  "........####.............",  // 8: cols 8-11
  ".........................",  // 9
  ".....F.......E...........",  // 10: fire col 5 (floating), exit col 13 (floating)
  "...........####..........",  // 11: cols 11-14
  ".........................",  // 12
  "####.##########..#####...",  // 13: ground
  "####.##########..#####...",  // 14: ground
];
```

Hmm, fire at row 10 col 5 is floating (no platform above or below). That's weird but OK.

Actually let me just put fire on row 6 platform:

```
Row 0:  "......................."  // 0
Row 1:  "....T.................."  // 1: trophy col 4
Row 2:  "....####..............."  // 2: cols 4-7
Row 3:  "......................."  // 3
Row 4:  "........####..........."  // 4: cols 8-11
Row 5:  "......................."  // 5
Row 6:  "....F##.....######....."  // 6: fire col 4, platform cols 5-6 and 13-18
Row 7:  "......................."  // 7
Row 8:  "........####..........."  // 8: cols 8-11
Row 9:  "......................."  // 9
Row 10: "................E......"  // 10: exit col 16 (floating)
Row 11: "...........####........."  // 11: cols 11-14
Row 12: "......................."  // 12
Row 13: "####.##########..#####..."  // 13: ground
Row 14: "####.##########..#####..."  // 14: ground
```

Let me check this. Fire at row 6 col 4 sits on the platform cols 4-7? Hmm, "....F##" has F at col 4, ## at cols 5-6. But what about col 7? Let me fix.

"....F###.....######....." - F at col 4, ### at cols 5-7. That's 9 chars, then "....." 5 dots, then "######" 6 hashes, then "....." 5 dots = 9 + 5 + 6 + 5 = 25 ✓

Cols: F at 4, ### at 5-7, ###### at 13-18.

Hmm but if fire is at col 4 and platform cols 5-7, fire is on the left edge. Player walking on the platform could avoid it.

Actually let me think about what hazards should look like:
- Fire: red/orange animated flames
- Water: blue animated water

Both block movement and kill on touch.

Let me redo the level with all hazards as solid tiles (replacing some solid platform tiles):

```
Row 0:  "......................."  // 0
Row 1:  "....T.................."  // 1: trophy col 4
Row 2:  "....####..............."  // 2: cols 4-7
Row 3:  "......................."  // 3
Row 4:  "........####..........."  // 4: cols 8-11
Row 5:  "......................."  // 5
Row 6:  "....####.....######...."  // 6: cols 4-7, 13-18
Row 7:  "......................."  // 7
Row 8:  "........####..........."  // 8: cols 8-11
Row 9:  "......................."  // 9
Row 10: "......................."  // 10
Row 11: "...........####........."  // 11: cols 11-14
Row 12: "......................."  // 12
Row 13: "###W.##########W####..."  // 13: ground with water at col 3 and col 16
Row 14: "###W.##########W####..."  // 14: same
```

Hmm, having water at row 13 col 3 means the player starts at col 1 and there's water at col 3. Player can walk on cols 0-2 ground, then water blocks at col 3. Jump over.

Actually let me just keep water as a separate entity and put it floating like a pool:

OK enough iteration. Let me just commit:

```javascript
const LEVEL = [
  ".........................",  // 0
  "....T....................",  // 1: trophy
  "....####................",  // 2
  ".........................",  // 3
  "........####.............",  // 4
  ".........................",  // 5
  "....####.....F#####......",  // 6: fire on right platform
  ".........................",  // 7
  "........####.............",  // 8
  ".........................",  // 9
  "................E........",  // 10: exit
  "...........####..........",  // 11
  ".........................",  // 12
  "####.##########..#####...",  // 13: ground
  "####.##########..#####...",  // 14: ground
];
```

Wait, fire at row 6 col 13 sits on top of platform cols 13-17 ("F#####" cols 13-17). Fire is on the left edge of that platform.

Path to trophy:
1. Player at col 1, row 13 ground (top at row 12).
2. Walk right to col 5.
3. Jump up to row 12 platform... no row 12 is empty. Jump up to row 6 platform at cols 4-7. Player at col 5 row 13, jump up 7 tiles. Impossible.

Need intermediate platforms. Let me put stepping stones:

```
Row 0:  "......................."  // 0
Row 1:  "....T.................."  // 1
Row 2:  "....####..............."  // 2
Row 3:  "......................."  // 3
Row 4:  "......................."  // 4
Row 5:  "....####..............."  // 5
Row 6:  "......................."  // 6
Row 7:  "........####...........",  // 7
Row 8:  "......................."  // 8
Row 9:  "....####.....F#####....",  // 9: cols 4-7, fire col 13, platform 14-18
Row 10: "................E......",  // 10: exit col 16
Row 11: "...........####.........",  // 11
Row 12: ".......................",  // 12
Row 13: "####.##########..#####...",  // 13
Row 14: "####.##########..#####..."   // 14
```

Path to trophy:
1. Player at col 1, row 13 ground (top at row 12).
2. Walk right to col 5.
3. Jump up to row 11 platform at cols 11-14. Player at col 5, target col 11-14. 6-9 horizontal, 2 vertical. Too far.
4. Jump up to row 9 platform at cols 4-7. Player at col 5, target col 4-7. 2 vertical, -1 to 2 horizontal. Easy.
5. From row 9 col 5, jump up to row 7 platform at cols 8-11. 2 vertical, 3-6 horizontal. 6 is too far.
6. From row 9 col 7, jump up to row 7 platform at cols 8-11. 2 vertical, 1-4 horizontal. Easy.
7. From row 7 col 8, jump up to row 5 platform at cols 4-7. 2 vertical, -4 to -1 horizontal. -1 is left.
8. From row 7 col 8, jump up to row 2 platform at cols 4-7. 5 vertical, too far.
9. From row 5 col 5, jump up to row 2 platform at cols 4-7. 3 vertical, -1 to 2 horizontal. 3 is the limit. Possible.

OK this works. Let me verify the complete path:

1. Player at col 1, row 13 ground (y = 12 * TILE).
2. Walk right on ground to col 5.
3. Jump to row 11 platform cols 11-14? No, that's still too far. Let me re-check.

Actually, player at col 5 on ground row 13. Jump up to row 11 platform at cols 11-14. Player needs to be at col 11 at row 11. From col 5 row 13, jump 2 up and 6 right. Max horizontal jump: ~4 tiles. Too far.

Need to go to row 9 first. From col 5 row 13, jump 4 up and X right. 4 vertical is too far.

OK let me add platforms at row 11 on the left:

```
Row 0:  "......................."  // 0
Row 1:  "....T.................."  // 1
Row 2:  "....####..............."  // 2
Row 3:  "......................."  // 3
Row 4:  "......................."  // 4
Row 5:  "....####..............."  // 5
Row 6:  "......................."  // 6
Row 7:  "........####...........",  // 7
Row 8:  "......................."  // 8
Row 9:  "....####.....F#####....",  // 9: cols 4-7, fire col 13, platform 14-18
Row 10: "................E......",  // 10: exit col 16
Row 11: "....####....####.......",  // 11: cols 4-7, 12-15
Row 12: ".......................",  // 12
Row 13: "####.##########..#####...",  // 13
Row 14: "####.##########..#####..."   // 14
```

Path to trophy:
1. Player at col 1, row 13 ground.
2. Walk to col 5 on ground.
3. Jump to row 11 platform at cols 4-7. 2 up, -1 to 2 right. Easy.
4. Walk to col 7 on row 11.
5. Jump to row 9 platform at cols 4-7. 2 up, -3 to 0 right. From col 7 to col 4-7. Max horizontal: 3 left. Possible with running jump.
6. Walk to col 7 on row 9.
7. Jump to row 7 platform at cols 8-11. 2 up, 1-4 right. From col 7 to col 8. Easy.
8. Walk to col 8 on row 7.
9. Jump to row 5 platform at cols 4-7. 2 up, -4 to -1 right. From col 8 to col 4. 4 left, possible.
10. Walk to col 5 on row 5.
11. Jump to row 2 platform at cols 4-7. 3 up, -1 to 2 right. Possible.
12. Walk to col 4 (under trophy).
13. Jump up to grab trophy at row 1 col 4. 1 up, 0 right. Easy.

OK that works!

Path to exit:
From trophy, jump down. Walk to right side of map.

Hmm let me trace from trophy back:
1. After grabbing trophy at col 4 row 1.
2. Drop down (or jump down) to row 5 platform at col 4-7. Just walk off row 2 platform, fall.
3. Walk right to col 7 on row 5.
4. Jump down to row 7 platform at cols 8-11. From col 7 row 5, drop down 2 to row 7. Land on col 8-11.
5. Walk to col 11 on row 7.
6. Jump down to row 9 platform cols 4-7? No, that's left. Drop down to row 9 fire platform cols 14-18 (avoid fire at col 13).
7. Wait, fire at col 13. Player on row 7 col 11. Jump right-down to row 9 col 14 (avoid fire at 13). 2 down, 3 right. Easy.
8. Walk to col 18 on row 9 (avoid fire at col 13).
9. Jump up to row 6? No platform at row 6. Drop to row 11 platform cols 12-15. From col 18 row 9, jump down 2 to row 11, with horizontal. From col 18 to col 12-15. 3-6 left. Possible.
10. Walk to col 12 on row 11.
11. Jump up to exit at row 10 col 16? Player at col 12 row 11. Jump up 1, right 4. Easy.

Hmm wait, exit is at row 10 col 16. Player on row 11 platform cols 12-15. To touch exit at row 10 col 16, player needs to jump up and to the right. 1 up, 1-4 right. Easy.

But wait, what's between row 11 and row 10? Row 10 is empty (except for exit). Player jumps up from row 11 to row 10. Player's bounding box overlaps row 10 col 16 = exit. Win.

OK this design works! Let me also add water and an enemy.

Water: let me put water at row 13 ground at a gap location. Like row 13 col 17 has water instead of solid. Player falls into it.

Actually I want water and fire both. Let me put:
- Fire at row 9 platform col 13 (already planned)
- Water at row 13 col 17 or similar

Wait, the level has a gap at row 13 col 4 (where I put "."). If player falls into that gap, they fall to row 14. Row 14 col 4 is also empty. Player keeps falling off screen. Death.

Let me put water at the bottom of that gap. Actually, let me make the gap at col 4 a water pool instead.

Hmm, the gap at row 13 col 4 means row 13 col 4 is empty. If player falls in, they continue to row 14 col 4 (empty too). Off screen = death.

Let me change row 14 to have water at col 4 instead of empty. So if player falls into gap at row 13 col 4, they land in water at row 14 col 4 and die.

But row 14 is the "bottom". Having water there is weird (player can't walk on it).

Let me just put water somewhere visible and reachable as a hazard. Maybe row 11 platform has a water tile:

```
Row 11: "....###W.####......."  // cols 4-7, water col 8, cols 10-13
```

Hmm wait, "....###W.####......." = 4 + 3 + 1 + 1 + 4 + 7 = 20. Too few.

Let me redo: "....####W####......" = 4 + 4 + 1 + 4 + 6 = 19. Hmm.

OK let me just put water at row 13 ground at a position where player might step on it:

Actually you know what, let me put water as a pool somewhere. Like a pool of water at row 13 cols 17-18 (replacing solid ground). Player walks off platform and into water = die.

```
Row 13: "####.##########W.#####."  // water at col 16
```

That's 4 + 1 + 10 + 1 + 1 + 5 + 1 = 23. Hmm.

Let me just count: "####.##########W.#####." 
# # # # . # # # # # # # # # # # W . # # # # # .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

= 23 chars. Need 25.

OK let me just put water at a specific place. How about row 11 platform cols 4-7 has water at col 6:

```
Row 11: "....#W##....####......."  // cols 4-7 with water at col 5
```

Hmm let me simplify and just put water somewhere and trust that it's reachable.

Final design (really committing now):

```javascript
const LEVEL = [
  ".........................",  // 0
  "....T....................",  // 1: trophy
  "....####................",  // 2: cols 4-7
  ".........................",  // 3
  ".........................",  // 4
  "....####.................",  // 5: cols 4-7
  ".........................",  // 6
  "........####.............",  // 7: cols 8-11
  ".........................",  // 8
  "....####.....F#####......",  // 9: cols 4-7, fire col 13, cols 14-18
  "................E........",  // 10: exit col 16
  "....####....####.........",  // 11: cols 4-7, 12-15
  ".........................",  // 12
  "####.##########..#####...",  // 13: ground cols 0-3, 5-16, 20-23
  "####.##########..#####...",  // 14: ground (same)
];
```

Let me check counts:
Row 1: "....T...................." = 4 + 1 + 20 = 25 ✓
Row 2: "....####................" = 4 + 4 + 17 = 25 ✓
Row 5: "....####................." = 4 + 4 + 17 = 25 ✓
Row 7: "........####............." = 8 + 4 + 13 = 25 ✓
Row 9: "....####.....F#####......" = 4 + 4 + 5 + 1 + 5 + 6 = 25 ✓
Row 10: "................E........" = 16 + 1 + 8 = 25 ✓
Row 11: "....####....####........." = 4 + 4 + 4 + 4 + 9 = 25 ✓
Row 13: "####.##########..#####..." = 4 + 1 + 10 + 2 + 5 + 3 = 25 ✓

OK these all check out.

Now water: let me add water at row 9 col 5 (where cols 4-7 are solid, replace col 5 with water):

Row 9: "....#W##.....F#####......"
Hmm that breaks my path (col 5 has water instead of solid). Let me put water elsewhere.

Actually let me put water in a place where it's visible but doesn't block the main path. Like row 13 has a gap that I can fill with water:

Row 13: "####W##########..#####..."
Replace col 4 with W: "####W##########..#####..." = 4 + 1 + 10 + 2 + 5 + 3 = 25 ✓

So water at row 13 col 4. Player at col 1, walking right. At col 4, there's water instead of solid. Player can't walk through (it's solid + deadly).

OK player at col 1 walks to col 3 (ground at cols 0-3). Can't walk to col 4 (water). Must jump over.

Hmm that's a small jump, easy. But the water needs to be visible somewhere.

Alternative: put water at the end of the level (row 13 col 17-19 area):

Row 13: "####.##########W####...."  // water at col 15
Hmm.

Let me put water at row 13 col 4 and have player jump over it. That's a 1-tile gap (water). Player jumps from col 3 to col 5. Easy.

Path to trophy:
1. Player at col 1, row 13 ground.
2. Walk right to col 3 (water blocks at col 4).
3. Jump over water from col 3 to col 5. 2 tiles horizontal, 0 vertical. Easy.
4. Land on col 5 (solid ground).
5. Continue to col 11 or so on ground.
6. Jump up to row 11 platform cols 4-7 (left side) or cols 12-15 (right side).
   - To left: from col 5 to col 4-7, 2 up, -1 to 2 right. Easy.
   - To right: from col 5 to col 12-15, 2 up, 7-10 right. Too far.

7. Go to left side first. Player on row 11 cols 4-7.
8. Walk to col 7.
9. Jump to row 9 platform cols 4-7. From col 7, 2 up, -3 to 0 right. From col 7 to col 7, 0 right. Just straight up. Easy.
10. Walk to col 7 on row 9.
11. Jump to row 7 platform cols 8-11. From col 7, 2 up, 1-4 right. Easy.
12. Walk to col 11 on row 7.
13. Jump to row 5 platform cols 4-7. From col 11, 2 up, -7 to -4 right. Too far left.
14. Drop down to row 9 right side? Fire at col 13 blocks. Land on row 9 cols 14-18. From col 11, 2 down, 3-7 right. Possible (3 right is easy).
15. Walk to col 18 on row 9 (avoiding fire at 13).
16. Jump up... no platform above. Drop down to row 11 cols 12-15. From col 18, 2 down, -6 to -3 left. Doable.
17. Walk to col 12 on row 11.
18. Jump up to row 10 col 16 (exit). 1 up, 4 right. Easy.

Hmm, this path skips the trophy. Let me redo to include trophy:

After step 11 (on row 7 col 11), instead of dropping to row 9 right:
11b. Walk to col 11 on row 7.
12b. Jump left to row 5 platform cols 4-7. From col 11, 2 up, -7 to -4 right. Too far.

Hmm, need to drop down to row 9 first to reach row 5 left side:
11b. Walk to col 11 on row 7.
12b. Drop down to row 9 cols 4-7 (left side, no fire). From col 11, 2 down, -7 to -4 left. Doable.
13b. Walk to col 7 on row 9.
14b. Jump to row 7 cols 8-11. (already at row 7 area, but going up to row 5 instead)
   Actually jump to row 5 cols 4-7 from row 9 col 7. 4 up, -3 to 0 right. Too far.
   Hmm.

Need platforms in between. Let me add row 6 platforms:

```
Row 5:  "....####................."  // 5: cols 4-7
Row 6:  "........####............."  // 6: cols 8-11
Row 7:  "......................."  // 7: empty
```

Wait I had row 7 with platform. Let me redo:

```
Row 5:  "....####................."  // 5: cols 4-7
Row 6:  "......................."  // 6: empty
Row 7:  "........####............."  // 7: cols 8-11
Row 8:  "......................."  // 8: empty
Row 9:  "....####.....F#####......"  // 9: cols 4-7, fire col 13, cols 14-18
```

Player at row 7 col 11. Want to reach row 5 col 5 (or anywhere on row 5 cols 4-7).
- Jump up-left from col 11 row 7 to col 7 row 5. 2 up, 4 left. Possible.
- Jump up from col 11 row 7 to col 11 row 5. 2 up, 0 right. Easy but row 5 col 11 is empty.

Hmm, row 5 only has cols 4-7. Player at row 7 col 11 jumps to row 5 col 7. 2 up, 4 left. Possible.

Let me trace:
11c. Player on row 7 col 11.
12c. Jump to row 5 col 7. 2 up, 4 left. Possible.
13c. Walk to col 5 on row 5.
14c. Jump to row 2 col 5. 3 up, 0 right. Possible.
15c. Walk to col 4 on row 2 (under trophy).
16c. Jump up to grab trophy at row 1 col 4. 1 up, 0 right. Easy.

OK then go back down to exit:
17c. Drop down to row 5 from row 2 (just walk off).
18c. Walk to col 7 on row 5.
19c. Jump down to row 7 col 11 (or wherever). 2 down, 4 right. Easy.
20c. Walk to col 11 on row 7.
21c. Jump to row 9 right side (cols 14-18). From col 11, 2 down, 3-7 right. Easy to col 14.
22c. Walk to col 18 on row 9 (avoid fire at 13).
23c. Jump down to row 11 cols 12-15. From col 18, 2 down, -6 to -3 left. Doable.
24c. Walk to col 12 on row 11.
25c. Jump up to row 10 col 16 (exit). 1 up, 4 right. Easy.

OK this works.

Now enemy. Let me put an enemy on row 9 platform. Patrols between cols 4-7 and 14-18 (skipping fire at 13).

Hmm, enemy can't patrol across fire. Let me have enemy patrol on a single section. Put enemy on row 5 platform cols 4-7, patrolling back and forth.

Or on row 11 cols 12-15 (near exit), patrolling.

Let me put enemy on row 7 cols 8-11, patrolling.

Or row 9 right side cols 14-18. Player will encounter it on the way to exit.

Let me put enemy on row 9 cols 14-18, patrolling between cols 14 and 18.

OK final design:

```javascript
const LEVEL = [
  ".........................",  // 0
  "....T....................",  // 1: trophy
  "....####................",  // 2: cols 4-7
  ".........................",  // 3
  ".........................",  // 4
  "....####.................",  // 5: cols 4-7
  ".........................",  // 6
  "........####.............",  // 7: cols 8-11
  ".........................",  // 8
  "....####.....F#####......",  // 9: cols 4-7, fire col 13, cols 14-18
  "................E........",  // 10: exit col 16
  "....####....####.........",  // 11: cols 4-7, 12-15
  ".........................",  // 12
  "####W##########..#####...",  // 13: water at col 4, ground cols 0-3, 5-16, 20-23
  "####W##########..#####...",  // 14: same
];

const ENEMY = {
  x: 14 * TILE,  // start at col 14
  y: 8 * TILE,   // on row 9 platform
  vx: 40,
  w: 22,
  h: 22,
  minX: 14 * TILE,
  maxX: 18 * TILE,
  onGround: true,
};
```

Hmm wait, row 9 platform top is at y = 9*32. Player/enemy standing on it has y = 9*32 - h. Let me put enemy y = 9*32 - 22 = 9*32 - 22 = 266.

Actually let me think about coordinates. Tile at row R has top y = R*32, bottom y = (R+1)*32. A player standing on top of row R tile has bottom y = R*32 (touching tile top). Player top y = R*32 - player height.

So player standing on row 9 platform has bottom y = 9*32 = 288. Player top y = 288 - 28 = 260.

For enemy: bottom y = 288, top y = 288 - 24 = 264. So enemy y = 264.

Let me code this:

```javascript
const enemy = {
  x: 14 * 32,  // start at col 14
  y: 9 * 32 - 24, // standing on row 9 platform
  vx: 40,
  w: 22,
  h: 24,
  minX: 14 * 32,
  maxX: 18 * 32,
};
```

OK let me write the full code now.

Actually wait, the fire at row 9 col 13. If enemy is on row 9 cols 14-18, it might walk into fire at col 13. Need to limit enemy patrol to avoid fire.

Min X for enemy: just after fire. Col 14 = x = 14*32 = 448. Patrol max: col 18 = 576. So min=448, max=576. 

Hmm let me also double check: "....####.....F#####......" - cols:
. . . . # # # # . . . . . F # # # # # . . . . .
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Col 13 = F, col 14-18 = #. ✓

Enemy patrols cols 14-18. Min x = 14*32 = 448. Max x = 18*32 = 576 (or 18*32 - 22 = 554 for right edge of enemy).

Let me set enemy x bounds as [14*32, 18*32 - 22] = [448, 554]. Enemy walks back and forth.

Now let me write the full code.

Actually wait, I realize I should put water somewhere that's reachable as a hazard but not blocking the path. Let me put water at row 11 cols 4-7, replacing some solid:

Row 11: "....####....####........."
Cols: 0,1,2,3 . . . . # # # # . . . . # # # # . . . . . . . .
So row 11 has cols 4-7 solid and cols 12-15 solid.

If I change col 5 to water: "....#W##....####........."
That's cols 4-7 with water at col 5.

Player path uses row 11 cols 4-7. With water at col 5, player must walk around water. Or jump over.

Hmm, let me just leave row 11 cols 4-7 as solid. Player walks across.

Water is at row 13 col 4. Player jumps over (1 tile).

OK let me finalize. Let me write the code now.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dangerous Dave - Tile Platformer</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: #0a0a14;
    color: #ddd;
    font-family: 'Courier New', monospace;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
  }
  h1 {
    font-size: 22px;
    letter-spacing: 3px;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #000;
    margin-bottom: 8px;
  }
  #wrap {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  #game {
    background: #1a1a2e;
    border: 4px solid #444;
    image-rendering: pixelated;
    display: block;
  }
  #panel {
    background: #1a1a2e;
    border: 4px solid #444;
    padding: 12px;
    width: 220px;
    font-size: 13px;
    line-height: 1.6;
  }
  #panel h2 {
    color: #ffcc00;
    font-size: 14px;
    margin-bottom: 6px;
    letter-spacing: 1px;
  }
  #panel .row { margin-bottom: 8px; }
  .key {
    display: inline-block;
    background: #333;
    border: 1px solid #666;
    padding: 2px 6px;
    margin: 0 2px;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
  }
  #msg {
    color: #ffcc00;
    font-size: 13px;
    margin-top: 6px;
    min-height: 18px;
  }
  #status {
    margin-top: 8px;
    padding: 6px;
    background: #111;
    border: 1px solid #444;
    text-align: center;
    font-size: 14px;
    letter-spacing: 2px;
    min-height: 24px;
  }
  #status.win { color: #00ff66; }
  #status.lose { color: #ff4444; }
  #status.play { color: #ffcc00; }
  button {
    margin-top: 8px;
    width: 100%;
    padding: 8px;
    background: #444;
    color: #ffcc00;
    border: 2px solid #888;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 2px;
  }
  button:hover { background: #666; }
  button:active { background: #333; }
</style>
</head>
<body>
<h1>DANGEROUS DAVE</h1>
<div id="wrap">
  <canvas id="game" width="800" height="480"></canvas>
  <div id="panel">
    <div class="row"><h2>CONTROLS</h2></div>
    <div class="row">
      <div><span class="key">&larr;</span> <span class="key">&rarr;</span> Move</div>
      <div><span class="key">A</span> <span class="key">D</span> Move</div>
      <div><span class="key">SPACE</span> Jump</div>
      <div><span class="key">R</span> Restart</div>
    </div>
    <div class="row"><h2>OBJECTIVE</h2></div>
    <div class="row">
      Grab the <span style="color:#ffd700">TROPHY</span>, then reach the <span style="color:#88ff88">EXIT</span>.
      Avoid <span style="color:#ff6633">FIRE</span>, <span style="color:#3399ff">WATER</span>, and the <span style="color:#ff44ff">ENEMY</span>.
    </div>
    <div id="msg">Use arrow keys to move. Space to jump.</div>
    <div id="status" class="play">PLAYING</div>
    <button id="restartBtn">RESTART (R)</button>
  </div>
</div>

<script>
(() => {
  const TILE = 32;
  const COLS = 25;
  const ROWS = 15;
  const W = COLS * TILE;
  const H = ROWS * TILE;

  const SOLID = 1, FIRE = 2, WATER = 3, TROPHY = 4, EXIT = 5;
  const tileMap = { '#': SOLID, 'F': FIRE, 'W': WATER, 'T': TROPHY, 'E': EXIT };

  const LEVEL_STR = [
    ".......................",
    "....T..................",
    "....####...............",
    "........................",
    "........................",
    "....####................",
    "........................",
    "........####............",
    "........................",
    "....####.....F#####.....",
    "................E.......",
    "....####....####........",
    "........................",
    "####W##########..#####..",
    "####W##########..#####..",
  ];

  // Pad rows to COLS width
  for (let i = 0; i < LEVEL_STR.length; i++) {
    while (LEVEL_STR[i].length < COLS) LEVEL_STR[i] += '.';
    if (LEVEL_STR[i].length > COLS) LEVEL_STR[i] = LEVEL_STR[i].slice(0, COLS);
  }

  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  const statusEl = document.getElementById('status');
  const msgEl = document.getElementById('msg');

  let tiles, player, enemy, state, message, messageTimer, animFrame;
  const keys = {};

  function buildLevel() {
    tiles = [];
    for (let r = 0; r < ROWS; r++) {
      const row = [];
      for (let c = 0; c < COLS; c++) {
        const ch = LEVEL_STR[r][c];
        row.push(tileMap[ch] || 0);
      }
      tiles.push(row);
    }

    player = {
      x: 1 * TILE + 4,
      y: 12 * TILE,
      vx: 0,
      vy: 0,
      w: 20,
      h: 28,
      onGround: false,
      facing: 1,
      hasTrophy: false,
    };

    enemy = {
      x: 14 * TILE,
      y: 9 * TILE - 24,
      vx: 50,
      w: 22,
      h: 24,
      minX: 14 * TILE,
      maxX: 18 * TILE + 32 - 22,
      alive: true,
    };

    state = 'playing';
    message = '';
    messageTimer = 0;
    setStatus('playing');
  }

  function setStatus(s) {
    state = s;
    statusEl.className = s === 'won' ? 'win' : s === 'lost' ? 'lose' : 'play';
    statusEl.textContent = s === 'won' ? 'LEVEL COMPLETE!' : s === 'lost' ? 'YOU DIED' : 'PLAYING';
  }

  function showMessage(text, duration = 2) {
    message = text;
    messageTimer = duration;
    msgEl.textContent = text;
  }

  function isSolidAt(px, py) {
    const c = Math.floor(px / TILE);
    const r = Math.floor(py / TILE);
    if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return false;
    return tiles[r][c] === SOLID;
  }

  function tileAt(px, py) {
    const c = Math.floor(px / TILE);
    const r = Math.floor(py / TILE);
    if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return 0;
    return tiles[r][c];
  }

  function tryMoveX(entity, dx) {
    entity.x += dx;
    // Check collisions with solid tiles
    const left = entity.x;
    const right = entity.x + entity.w;
    const top = entity.y;
    const bottom = entity.y + entity.h;
    
    // Get tile range overlapping entity
    const cMin = Math.floor(left / TILE);
    const cMax = Math.floor(right / TILE);
    const rMin = Math.floor(top / TILE);
    const rMax = Math.floor(bottom / TILE);
    
    for (let r = rMin; r <= rMax; r++) {
      for (let c = cMin; c <= cMax; c++) {
        if (r < 0 || r >= ROWS || c < 0 || c >= COLS) continue;
        if (tiles[r][c] !== SOLID) continue;
        // AABB collision
        const tileLeft = c * TILE;
        const tileRight = tileLeft + TILE;
        const tileTop = r * TILE;
        const tileBottom = tileTop + TILE;
        if (right > tileLeft && left < tileRight && bottom > tileTop && top < tileBottom) {
          if (dx > 0) {
            entity.x = tileLeft - entity.w;
          } else {
            entity.x = tileRight;
          }
          return true; // collided
        }
      }
    }
    return false;
  }

  function tryMoveY(entity, dy) {
    entity.y += dy;
    const left = entity.x;
    const right = entity.x + entity.w;
    const top = entity.y;
    const bottom = entity.y + entity.h;
    
    const cMin = Math.floor(left / TILE);
    const cMax = Math.floor(right / TILE);
    const rMin = Math.floor(top / TILE);
    const rMax = Math.floor(bottom / TILE);
    
    entity.onGround = false;
    for (let r = rMin; r <= rMax; r++) {
      for (let c = cMin; c <= cMax; c++) {
        if (r < 0 || r >= ROWS || c < 0 || c >= COLS) continue;
        if (tiles[r][c] !== SOLID) continue;
        const tileLeft = c * TILE;
        const tileRight = tileLeft + TILE;
        const tileTop = r * TILE;
        const tileBottom = tileTop + TILE;
        if (right > tileLeft && left < tileRight && bottom > tileTop && top < tileBottom) {
          if (dy > 0) {
            entity.y = tileTop - entity.h;
            entity.onGround = true;
          } else {
            entity.y = tileBottom;
          }
          entity.vy = 0;
          return true;
        }
      }
    }
    return false;
  }

  function rectsOverlap(a, b) {
    return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
  }

  function update(dt) {
    if (messageTimer > 0) {
      messageTimer -= dt;
      if (messageTimer <= 0) {
        message = '';
        msgEl.textContent = '';
      }
    }

    if (state !== 'playing') return;

    // Player input
    const moveLeft = keys['ArrowLeft'] || keys['a'] || keys['A'];
    const moveRight = keys['ArrowRight'] || keys['d'] || keys['D'];
    const jump = keys[' '] || keys['ArrowUp'] || keys['w'] || keys['W'];

    const MOVE_SPEED = 180;
    const GRAVITY = 1600;
    const JUMP_VEL = -560;
    const MAX_FALL = 600;

    if (moveLeft) {
      player.vx = -MOVE_SPEED;
      player.facing = -1;
    } else if (moveRight) {
      player.vx = MOVE_SPEED;
      player.facing = 1;
    } else {
      player.vx = 0;
    }

    if (jump && player.onGround) {
      player.vy = JUMP_VEL;
      player.onGround = false;
    }

    // Apply gravity
    player.vy += GRAVITY * dt;
    if (player.vy > MAX_FALL) player.vy = MAX_FALL;

    // Move X then Y
    tryMoveX(player, player.vx * dt);
    tryMoveY(player, player.vy * dt);

    // Check if player fell off bottom
    if (player.y > H) {
      setStatus('lost');
      showMessage('You fell to your death! Press R to restart.', 999);
      return;
    }

    // Hazard check (check player's bounding box vs hazard tiles)
    const pLeft = player.x + 2;
    const pRight = player.x + player.w - 2;
    const pTop = player.y + 2;
    const pBottom = player.y + player.h - 2;
    const cMin = Math.floor(pLeft / TILE);
    const cMax = Math.floor(pRight / TILE);
    const rMin = Math.floor(pTop / TILE);
    const rMax = Math.floor(pBottom / TILE);
    
    let hitHazard = null;
    for (let r = rMin; r <= rMax; r++) {
      for (let c = cMin; c <= cMax; c++) {
        if (r < 0 || r >= ROWS || c < 0 || c >= COLS) continue;
        const t = tiles[r][c];
        if (t === FIRE) hitHazard = 'fire';
        else if (t === WATER) hitHazard = 'water';
      }
    }
    if (hitHazard) {
      setStatus('lost');
      showMessage(`Touched ${hitHazard}! Press R to restart.`, 999);
      return;
    }

    // Trophy check
    if (!player.hasTrophy) {
      const cMin = Math.floor(player.x / TILE);
      const cMax = Math.floor((player.x + player.w - 1) / TILE);
      const rMin = Math.floor(player.y / TILE);
      const rMax = Math.floor((player.y + player.h - 1) / TILE);
      for (let r = rMin; r <= rMax; r++) {
        for (let c = cMin; c <= cMax; c++) {
          if (r >= 0 && r < ROWS && c >= 0 && c < COLS && tiles[r][c] === TROPHY) {
            tiles[r][c] = 0;
            player.hasTrophy = true;
            showMessage('Trophy collected! Now find the exit.', 3);
          }
        }
      }
    }

    // Exit check
    const exitTileC = Math.floor((player.x + player.w / 2) / TILE);
    const exitTileR = Math.floor((player.y + player.h / 2) / TILE);
    const playerTile = tileAt(player.x + player.w / 2, player.y + player.h / 2);
    if (playerTile === EXIT) {
      if (player.hasTrophy) {
        setStatus('won');
        showMessage('You escaped with the trophy!', 999);
      } else if (!message) {
        showMessage('The exit is locked. Find the trophy first!', 2);
      }
    }

    // Enemy update
    enemy.x += enemy.vx * dt;
    if (enemy.x <= enemy.minX || enemy.x + enemy.w >= enemy.maxX) {
      enemy.vx = -enemy.vx;
    }
    // Keep enemy on platform (simple - just clamp)
    enemy.x = Math.max(enemy.minX, Math.min(enemy.maxX - enemy.w, enemy.x));

    // Enemy-player collision
    if (rectsOverlap(player, enemy)) {
      setStatus('lost');
      showMessage('Caught by the enemy! Press R to restart.', 999);
      return;
    }
  }

  function drawTile(r, c, type, t) {
    const x = c * TILE;
    const y = r * TILE;
    if (type === SOLID) {
      // Brick pattern
      ctx.fillStyle = '#7a4a2a';
      ctx.fillRect(x, y, TILE, TILE);
      ctx.fillStyle = '#5a3a1a';
      ctx.fillRect(x, y, TILE, 4);
      ctx.fillRect(x, y + TILE - 4, TILE, 4);
      // Mortar lines
      ctx.fillStyle = '#3a2410';
      ctx.fillRect(x + TILE/2 - 1, y, 2, TILE);
      ctx.fillRect(x, y + TILE/2 - 1, TILE, 2);
      // Highlight
      ctx.fillStyle = 'rgba(255,200,100,0.15)';
      ctx.fillRect(x + 1, y + 1, TILE - 2, 4);
    } else if (type === FIRE) {
      // Animated fire
      const flicker = Math.sin(t * 8 + c + r) * 0.2 + 0.8;
      ctx.fillStyle = '#3a1810';
      ctx.fillRect(x, y, TILE, TILE);
      ctx.fillStyle = '#ff4422';
      ctx.beginPath();
      ctx.moveTo(x + 4, y + TILE);
      ctx.lineTo(x + 8, y + TILE - 8 - 4 * flicker);
      ctx.lineTo(x + TILE/2, y + 6);
      ctx.lineTo(x + TILE - 8, y + TILE - 12 - 4 * flicker);
      ctx.lineTo(x + TILE - 4, y + TILE);
      ctx.closePath();
      ctx.fill();
      ctx.fillStyle = '#ffaa33';
      ctx.beginPath();
      ctx.moveTo(x + 8, y + TILE);
      ctx.lineTo(x + 12, y + TILE - 12 - 2 * flicker);
      ctx.lineTo(x + TILE/2, y + 12);
      ctx.lineTo(x + TILE - 12, y + TILE - 16 - 2 * flicker);
      ctx.lineTo(x + TILE - 8, y + TILE);
      ctx.closePath();
      ctx.fill();
    } else if (type === WATER) {
      const wave = Math.sin(t * 3 + c * 0.7 + r * 0.3);
      ctx.fillStyle = '#0a2a4a';
      ctx.fillRect(x, y, TILE, TILE);
      ctx.fillStyle = '#1a4a8a';
      ctx.fillRect(x, y + 4 + wave * 2, TILE, TILE - 4);
      ctx.fillStyle = '#3399ff';
      ctx.fillRect(x, y + 6 + wave * 2, TILE, 4);
      ctx.fillStyle = '#88ccff';
      ctx.fillRect(x + 2, y + 8 + wave * 2, TILE - 8, 2);
    } else if (type === TROPHY) {
      // Trophy sprite
      const cx = x + TILE/2;
      const cy = y + TILE/2;
      ctx.fillStyle = '#ffd700';
      // Cup
      ctx.beginPath();
      ctx.moveTo(cx - 8, cy - 10);
      ctx.lineTo(cx + 8, cy - 10);
      ctx.lineTo(cx + 6, cy + 2);
      ctx.lineTo(cx - 6, cy + 2);
      ctx.closePath();
      ctx.fill();
      // Handles
      ctx.beginPath();
      ctx.arc(cx - 8, cy - 6, 3, 0, Math.PI * 2);
      ctx.arc(cx + 8, cy - 6, 3, 0, Math.PI * 2);
      ctx.fillStyle = '#cc9900';
      ctx.fill();
      // Stem
      ctx.fillStyle = '#ffd700';
      ctx.fillRect(cx - 2, cy + 2, 4, 4);
      // Base
      ctx.fillStyle = '#cc9900';
      ctx.fillRect(cx - 6, cy + 6, 12, 3);
      // Sparkle
      const sp = (Math.sin(t * 4 + c + r) + 1) * 0.5;
      ctx.fillStyle = `rgba(255,255,200,${sp})`;
      ctx.fillRect(cx - 12, cy - 14, 2, 2);
      ctx.fillRect(cx + 10, cy - 8, 2, 2);
    } else if (type === EXIT) {
      // Exit door
      ctx.fillStyle = '#222';
      ctx.fillRect(x, y, TILE, TILE);
      // Door frame
      ctx.fillStyle = player.hasTrophy ? '#00ff66' : '#886622';
      ctx.fillRect(x + 2, y + 2, TILE - 4, TILE - 4);
      ctx.fillStyle = player.hasTrophy ? '#003322' : '#332211';
      ctx.fillRect(x + 6, y + 4, TILE - 12, TILE - 8);
      // Glow if has trophy
      if (player.hasTrophy) {
        ctx.fillStyle = `rgba(0,255,100,${0.3 + 0.2 * Math.sin(t * 3)})`;
        ctx.fillRect(x, y, TILE, TILE);
      }
    }
  }

  function drawEntity(entity, color, isPlayer) {
    const x = entity.x;
    const y = entity.y;
    const w = entity.w;
    const h = entity.h;
    
    if (isPlayer) {
      // Player body
      ctx.fillStyle = '#2244aa';
      ctx.fillRect(x + 2, y + 6, w - 4, h - 12);
      ctx.fillStyle = '#3366cc';
      ctx.fillRect(x + 4, y + 8, w - 8, h - 16);
      // Head
      ctx.fillStyle = '#ffcc99';
      ctx.fillRect(x + 4, y, w - 8, 10);
      // Eyes
      ctx.fillStyle = '#000';
      const eyeX = entity.facing > 0 ? x + w - 8 : x + 4;
      ctx.fillRect(eyeX, y + 3, 2, 3);
      // Legs
      ctx.fillStyle = '#113366';
      ctx.fillRect(x + 3, y + h - 6, 5, 6);
      ctx.fillRect(x + w - 8, y + h - 6, 5, 6);
    } else {
      // Enemy
      ctx.fillStyle = '#aa22aa';
      ctx.fillRect(x + 2, y + 4, w - 4, h - 4);
      ctx.fillStyle = '#cc44cc';
      ctx.fillRect(x + 4, y + 6, w - 8, h - 8);
      // Eye
      ctx.fillStyle = '#fff';
      ctx.fillRect(x + w/2 - 4, y + 6, 3, 3);
      ctx.fillStyle = '#000';
      ctx.fillRect(x + w/2 - 3, y + 7, 2, 2);
    }
  }

  function draw(t) {
    // Sky background
    ctx.fillStyle = '#1a1a2e';
    ctx.fillRect(0, 0, W, H);
    
    // Stars
    for (let i = 0; i < 30; i++) {
      const sx = (i * 137) % W;
      const sy = (i * 89) % (H - TILE * 4);
      const brightness = 0.3 + 0.3 * Math.sin(t * 2 + i);
      ctx.fillStyle = `rgba(255,255,255,${brightness})`;
      ctx.fillRect(sx, sy, 2, 2);
    }
    
    // Draw tiles
    for (let r = 0; r < ROWS; r++) {
      for (let c = 0; c < COLS; c++) {
        const t = tiles[r][c];
        if (t !== 0) drawTile(r, c, t, performance.now() / 1000);
      }
    }
    
    // Draw enemy
    drawEntity(enemy, null, false);
    
    // Draw player
    drawEntity(player, null, true);
    
    // Trophy indicator if collected
    if (player.hasTrophy) {
      ctx.fillStyle = '#ffd700';
      ctx.fillText('★', 10, 30);
    }
  }

  function loop(t) {
    const dt = Math.min(0.033, (t - lastTime) / 1000);
    lastTime = t;
    update(dt);
    draw(t / 1000);
    requestAnimationFrame(loop);
  }

  let lastTime = 0;

  function restart() {
    buildLevel();
  }

  // Input handling
  window.addEventListener('keydown', (e) => {
    const k = e.key;
    keys[k] = true;
    if (k === 'r' || k === 'R') {
      restart();
    }
    if ([' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(k)) {
      e.preventDefault();
    }
  });
  window.addEventListener('keyup', (e) => {
    keys[e.key] = false;
  });
  document.getElementById('restartBtn').addEventListener('click', restart);

  buildLevel();
  lastTime = performance.now();
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>
```

Wait, I have a problem with the level strings. Let me check row counts again.

"....####....####........" - let me count: 4 + 4 + 4 + 4 + 9 = 25 ✓
"....####....####........" → length is 25

"....####....####........" = 4 dots + 4 hashes + 4 dots + 4 hashes + 9 dots = 25

But wait I had 9 dots at the end. Let me check:
"....####....####........" 
Positions:
0: .
1: .
2: .
3: .
4: #
5: #
6: #
7: #
8: .
9: .
10: .
11: .
12: #
13: #
14: #
15: #
16: .
17: .
18: .
19: .
20: .
21: .
22: .
23: .
24: .

That's 25. ✓ Cols 4-7 solid, cols 12-15 solid.

"####W##########..#####.."
Positions:
0: #
1: #
2: #
3: #
4: W
5: #
6: #
7: #
8: #
9: #
10: #
11: #
12: #
13: #
14: #
15: .
16: .
17: #
18: #
19: #
20: #
21: #
22: .
23: .
24: .

Wait, that's cols 0-3 #, col 4 W, cols 5-14 # (10), cols 15-16 ., cols 17-21 #, cols 22-24 .
= 4 + 1 + 10 + 2 + 5 + 3 = 25 ✓

So ground has solid at cols 0-3, 5-16, 20-23. Water at col 4 (cols 17-19 are gap, player can fall in and die).

Wait, cols 17-19 are empty in row 13. That's a 3-tile gap. Player can fall in and die. OK that's fine - falling = death.

But cols 22-24 are also empty. That's also a gap. Player can fall off the right edge of the right platform.

Hmm, having water at col 4 (just 1 tile) is small. Let me make it bigger:

"####WW#########..#####.."
= 4 + 2 + 9 + 2 + 5 + 3 = 25 ✓
Cols 0-3 #, cols 4-5 W, cols 6-14 #, cols 15-16 gap, cols 17-21 #, cols 22-24 gap.

Hmm, water at cols 4-5 is a 2-tile pool. Player can jump from col 3 to col 6 = 3 tile jump. Tight but possible.

Or maybe water at col 4-5 then gap at col 6? No, let me keep it simple.

Actually let me change to:
"####W.##########..#####.."
= 4 + 1 + 1 + 10 + 2 + 5 + 3 = 26. Too many.

"####W##########..#####.."
= 4 + 1 + 10 + 2 + 5 + 3 = 25 ✓
Col 4 = W, cols 5-14 #, cols 15-16 gap, cols 17-21 #, cols 22-24 gap.

Player at col 1 on ground. Walk right to col 3 (just before water). Jump to col 5 (skip water). 2 tile horizontal jump. Easy.

OK keep this.

Let me also verify the trophy position. Trophy at row 1 col 4. Player needs to grab it.

Row 2 cols 4-7 is the platform under trophy. Player on row 2 col 4-7 can jump up to grab trophy at row 1 col 4.

Player y when on row 2: top = 2*32 - 28 = 36. Player top overlaps row 1 (y 32-64). So player's bounding box covers row 1 when standing on row 2 platform.

Wait, player y = 2*32 - 28 = 64 - 28 = 36. Player bottom = 36 + 28 = 64 = top of row 2 tile. Player top = 36. Row 1 tile is y=32-64. Player overlaps row 1 from y=36 to y=64. Player x at col 4 = 4*32 = 128. Player x range = 128 to 128+20 = 148.

Trophy at row 1 col 4 = (128, 32, 32, 32). Player bounding box = (128, 36, 20, 28) = (128, 36) to (148, 64).

Overlap: x: 128-148 vs 128-160. Overlap. y: 36-64 vs 32-64. Overlap. ✓

So just standing on row 2 col 4 (under trophy) triggers collect.

But wait, in my logic I only check trophy when player is at certain tile. Let me make sure the trophy check works.

Trophy check:
```
const cMin = Math.floor(player.x / TILE);
const cMax = Math.floor((player.x + player.w - 1) / TILE);
const rMin = Math.floor(player.y / TILE);
const rMax = Math.floor((player.y + player.h - 1) / TILE);
```

Player at x=128, w=20: cMin=4, cMax=4 (since 128+19=147, floor(147/32)=4).
Player at y=36, h=28: rMin=1 (floor(36/32)=1), rMax=1 (floor(63/32)=1).

So checks tiles (1,4) which is the trophy. ✓

Good.

OK let me also think about the exit. Exit at row 10 col 16. Player needs to be at this tile.

Player needs to jump up from row 11 col 12-15 platform. Row 11 platform top = 11*32 = 352. Player y = 352 - 28 = 324.

Player jumps up, vy = -560. Reaches max height 560²/(2*1600) = 98. So player can reach y = 324 - 98 = 226. That's row 7 area (y 224-256).

Wait that's too high. Let me reconsider. Player starts on row 11 platform. Jumps up. Reaches row 7 area. Can definitely reach row 10 (which is between row 11 and row 7).

Actually wait, the calculation: max height = v²/(2g) = 560²/(2*1600) = 313600/3200 = 98. So jumps 98 px = ~3 tiles. ✓

OK player jumps from row 11 (y=324) up to max y=226 (row 7 area). Passes through row 10 (y=320-352 → wait that's wrong).

Let me reconsider. Row R tile has y range [R*32, (R+1)*32]. Row 10 has y [320, 352].

Player starts at y=324 (top), bottom=352 (touching row 11 platform top at 352). Player jumps, vy=-560. dt=1/60. After 1 frame: y = 324 + (-560)/60 = 324 - 9.33 = 314.67.

Player is now at y=314, bottom=342. Player tile is row 9 (y [288, 320]) or row 10 (y [320, 352]). Player's top is at y=314 which is in row 9 (since 288 ≤ 314 < 320). Player bottom at y=342 is in row 10.

OK so player passes through row 10 area. The exit is at row 10 col 16. Player passing through there triggers it.

But the exit check uses player center: `tileAt(player.x + player.w / 2, player.y + player.h / 2)`. Player center y = 314 + 14 = 328 (in row 10). Player center x = 128 + 10 = 138 = col 4. Hmm but I want player at col 16.

Let me check: player needs to be at col 16 for exit. Player at col 12 (start of row 11 platform), jumps right. After some time, player x is at col 16.

Player jumping up-right from (col 12, row 11): after some frames, x = 12*32 + vx*t = 384 + 180*t. y = 324 + vy*t + 0.5*g*t².

To reach exit (row 10 col 16): need player center at x = 16*32 + 16 = 528 (col 16 center), y between 320 and 352 (row 10).

Hmm this is getting complex. Let me just trust the physics and let the user navigate.

OK let me also think about the patrolling enemy. Enemy on row 9 platform cols 14-18, patrolling. Player needs to jump over it or time their jump to avoid.

Player going from row 7 to row 9 right side: jumps down-right. Lands on row 9 at some col. If enemy is there, they collide.

Player needs to either:
- Time jump to land when enemy is far
- Jump over enemy (if there's room)

Enemy width 22, on cols 14-18. Player width 20. Enemy at col 14 (left edge) means x = 14*32 = 448 to 470. Player landing on col 14 means x = 14*32 = 448 to 468. Overlap possible.

To avoid, player can:
- Jump from row 7 col 11 to row 9 col 18 (jump right to far end, avoid enemy near left)
- Or jump from row 7 col 11 down to row 9 col 18 (3 tiles right, 2 down) - vy=0, so just falling: y goes from row 7 platform top (y=7*32=224, player y=196) to row 9 platform top (y=288, player y=260). Time: 2 tiles down = 64 px. With vy=0, gravity=1600, time = sqrt(2*64/1600) = sqrt(0.08) = 0.28s. In 0.28s, player moves right by 180*0.28 = 50 px = 1.5 tiles. Player ends at col 12.5, row 9. Still might hit enemy at col 14.

Hmm, player needs to jump to clear the enemy. Let me give player a horizontal boost during the jump:

Player jumps from row 7 col 11 to row 9 col 18 (jump right + down). vy starts at 0 (walking off), then gravity pulls down. Player can press jump while walking off to add vy=-560.

Actually let me just have player jump from row 7 col 11 with vy=-560 (jump up) and vx=180 (right). Player goes up-right, lands on row 9 right side.

Actually no, jumping from row 7 col 11 with vy=-560 means player goes UP. They'd reach row 5 area. Not what we want.

Let me re-examine. Player on row 7 platform. Walks right to col 11. Walks off right edge of row 7 platform (col 11 is end of platform cols 8-11). Falls down to row 9 platform.

During fall, player can press jump (vy = -560) to extend hang time. But jumping while falling adds upward velocity, which delays landing.

To reach row 9 col 18 from row 7 col 11:
- Horizontal: 7 tiles (col 11 to col 18)
- Vertical: 2 tiles down

If just walking off: time = sqrt(2*64/1600) = 0.28s. Horizontal: 50 px = 1.5 tiles. Player ends at col 12.5. Too short.

If jumping: vy=-560. Player decelerates upward, then comes back down. Time to peak: 560/1600 = 0.35s. Then falls. Player at peak has y = 196 - 560²/(2*1600) = 196 - 98 = 98 (very high). Then falls back.

This is getting complicated. Let me just make the path easier.

Option: Add another platform between row 7 and row 9 right side.

Or: Just put the enemy on a less critical path.

Let me move enemy to row 5 cols 4-7 (top left area). Then player going up to trophy might encounter enemy. Or on the way down to exit.

Hmm. Let me put enemy on row 9 right platform but with limited patrol range that doesn't block the path. Or just put enemy on row 11 platform cols 12-15 (where player must cross to reach exit).

If enemy on row 11 right platform cols 12-15, player needs to cross. Player can jump over enemy or time it.

Actually, let me just put enemy patrolling row 11 right platform. Player can jump down from row 7 to row 11 right side, then jump up to exit. Enemy makes this risky.

Alternative: put enemy on row 5 left platform cols 4-7. Player on row 7 col 11 wants to reach row 5 col 5. They jump left. Enemy on row 5 might be in the way.

Let me put enemy on row 7 cols 8-11. Player uses this platform to go up. They might encounter enemy.

Actually let me put enemy on row 9 right platform. It's a clear hazard. Player can try to time jumps or go around.

To make it possible, let me give player a "long jump" - they need to jump from row 7 left to row 9 right (skipping row 9 left and fire).

From row 7 col 8 (start of platform) to row 9 right (col 14-18). 
- Horizontal: 6-10 tiles
- Vertical: 2 tiles down
- Need to time the jump + fall to land safely.

Player jumps from row 7 col 8 (left edge) with vx=180 (max speed), presses jump (vy=-560). Peak time 0.35s, then falls. Need to clear fire at col 13 (row 9) and land on col 14+.

Hmm complex. Let me just put enemy on a simpler location.

Final decision: put enemy on row 9 right platform, patrolling cols 14-18 with speed 40 px/s. Player must time their approach.

Player path: drop from row 7 col 11 to row 9 (let me see how far right they go with horizontal velocity 180 while falling 64px).

vy=0, gravity=1600. y(t) = y0 + 0.5*g*t² = 196 + 800*t². Set y=260 (row 9): 800*t² = 64 → t² = 0.08 → t = 0.28s.
x(t) = x0 + vx*t = 8*32 + 180*0.28 = 256 + 50 = 306.

Hmm col 306/32 = 9.5. Player lands at col 9.5, which is on row 9 left platform cols 4-7. Wait no, col 9.5 means between cols 9 and 10. Cols 4-7 are row 9 left platform. Col 9 is empty (between left and fire). Player at col 9.5 is on empty area. Player falls further.

To reach row 9 right platform, player needs to be at col 14+ when y=260.

If player jumps from row 7 col 11 with vy=-560 and vx=180:
- y(t) = 196 - 560*t + 800*t² 
- Peak at t=0.35, y=98
- At t when y=260: -560t + 800t² = 64. 800t² - 560t - 64 = 0. t = (560 + sqrt(560² + 4*800*64)) / (2*800) = (560 + sqrt(313600 + 204800))/1600 = (560 + sqrt(518400))/1600 = (560 + 720)/1600 = 1.28/1.6 = 0.8s.

In 0.8s, x = 11*32 + 180*0.8 = 352 + 144 = 496. Col = 496/32 = 15.5. Player lands at col 15.5 on row 9 right platform. ✓

So jumping from row 7 col 11 with vy=-560 and vx=180 lands at col 15.5 row 9. That's right on the enemy patrol area!

To avoid enemy, player can:
1. Time the jump so enemy is at far end when player lands
2. Jump earlier/later
3. Jump from a different position

Let me just put the enemy at slow speed (40 px/s) so timing is easier. Or have it patrol a smaller range.

Actually, you know what, let me make the path simpler. Let me add an intermediate platform to skip the row 9 right platform:

Hmm, but I want fire on row 9 right platform. Let me keep it.

Or, let me have player go from row 7 col 11 to row 11 right platform directly (skip row 9 right). That's 4 tiles down, 1-4 tiles right. 

vy=0, fall 4 tiles = 128px. t = sqrt(2*128/1600) = sqrt(0.16) = 0.4s. x = 11*32 + 180*0.4 = 352 + 72 = 424. Col = 13.25. Hmm not on row 11 cols 12-15.

If player jumps (vy=-560) and falls to row 11: -560t + 800t² = 128. 800t² - 560t - 128 = 0. t = (560 + sqrt(313600 + 409600))/1600 = (560 + sqrt(723200))/1600 = (560 + 850)/1600 = 1.41/1.6 = 0.88s. x = 352 + 180*0.88 = 352 + 158 = 510. Col = 15.9. Lands on col 15.9 of row 11 (which has platform cols 12-15). Almost on the edge.

Hmm, this is workable but tight. Player needs to jump from row 7 col 11 to row 11 col 12-15.

Actually let me check if row 9 is even in the way. If player jumps from row 7 with vy=-560 (going up), they pass through row 6 (empty), row 5 (left platform cols 4-7 - if x < 256 they'd hit it). At x=11*32=352, no row 5 collision.

OK let me just make the level work and not stress over the exact physics. Let me adjust the layout so the path is clear.

Simplest design: Put exit on row 11 platform. Player goes from row 7 to row 11 right platform, then exits.

Wait, exit is at row 10 col 16. Let me move exit to row 11 col 14 (right edge of row 11 platform):

Row 10: "...............E......."  // exit col 15
Hmm but I had exit at row 10 col 16 because it's between row 9 and row 11. If I move it to row 11, it's on the platform.

Actually, exit should be visible and accessible. Let me put exit at row 11 col 14 (right end of row 11 right platform). Player walks onto it.

Row 11: "....####....##E#........"
That's cols 4-7, 12, 14, and E at col 13. Hmm wait the E replaces a solid.

"....####....#E##........"
Cols: 0-3 ., 4-7 #, 8-11 ., 12 #, 13 E, 14-15 #, 16-24 .
= 4 + 4 + 4 + 1 + 1 + 2 + 9 = 25 ✓

E at col 13. Player walks onto row 11 col 13. The tile is E, not solid. Player walks through (E is passable).

OK let me redesign:

```javascript
const LEVEL_STR = [
  ".........................",  // 0
  "....T....................",  // 1: trophy
  "....####................",  // 2: cols 4-7
  ".........................",  // 3
  ".........................",  // 4
  "....####.................",  // 5: cols 4-7
  ".........................",  // 6
  "........####.............",  // 7: cols 8-11
  ".........................",  // 8
  "....####.....F#####......",  // 9: cols 4-7, fire col 13, cols 14-18
  ".........................",  // 10
  "....####....#E##........",  // 11: cols 4-7, E at col 13, cols 12, 14-15
  ".........................",  // 12
  "####W##########..#####...",  // 13: water col 4, ground cols 0-3, 5-16, 20-23
  "####W##########..#####...",  // 14: ground
];
```

Let me verify counts:
Row 5: "....####................." 
= 4 + 4 + 17 = 25 ✓

Row 7: "........####............"
= 8 + 4 + 13 = 25 ✓

Row 9: "....####.....F#####......"
= 4 + 4 + 5 + 1 + 5 + 6 = 25 ✓

Row 11: "....####....#E##........"
= 4 + 4 + 4 + 1 + 1 + 2 + 9 = 25 ✓

Row 13: "####W##########..#####..."
= 4 + 1 + 10 + 2 + 5 + 3 = 25 ✓

OK all good.

Now exit at row 11 col 13. Player walks on row 11 platform cols 12, 14-15. The col 13 is E. Player can walk across E (it's passable, just triggers win if has trophy).

Wait, actually if E is at row 11 col 13 and there's # at col 12 and 14-15, player can walk along the platform from col 12 to col 14. They pass through col 13 (E tile). E is passable so no collision issue.

Player needs to be at col 13 row 11 with trophy to win.

Path to exit:
From row 9 right platform, drop down to row 11.

Player on row 9 right platform (cols 14-18). Drop down to row 11 right platform (cols 12, 14-15 with E at 13).

From col 14 row 9, drop to row 11 (2 tiles down, 0 horizontal). Player y starts at 260 (row 9 platform top - 28). Falls to y=324 (row 11 platform top - 28). Falls 64px. t = sqrt(2*64/1600) = 0.28s. x doesn't change. Lands at col 14 row 11. ✓

Then walks to col 13 (E). Triggers win if has trophy.

OK let me also put enemy somewhere meaningful. Let me put it on row 7 platform cols 8-11, patrolling. Player needs to cross this platform to reach trophy area.

Player on row 11 (just visited exit) wants to go up to row 7 to get trophy. They can jump from row 11 to row 9 (left or right), then up to row 7.

Actually, from row 11 col 7 (left platform), jump up to row 9 left platform cols 4-7. 2 up, -3 to 0 horizontal. From col 7 to col 4-7, possible (max 3 left horizontal jump).

From row 9 col 7, jump to row 7 col 8-11. 2 up, 1-4 horizontal. From col 7 to col 8, easy.

From row 7 col 8, jump to row 5 col 4-7. 2 up, -7 to -4 horizontal. Too far.

Hmm. Player needs an intermediate.

Let me add row 6 platform:

```
Row 6: "........####............"  // cols 8-11
```

Now from row 7 col 8 (or wherever), jump up to row 5 col 4-7. Or go row 7 → row 6 → row 5.

Wait, row 6 platform cols 8-11, same as row 7? Then player on row 6 walks to col 11, jumps to row 5 col 4-7. From col 11 to col 4-7 = 4-7 left, 1 up. Possible with run-jump (vx=180, time=~0.25s for 1 tile up, distance = 45 px = 1.4 tiles left).

Actually wait, jumping 1 tile up while moving 4+ tiles left in 0.25s requires vx ≈ 180 px/s = ~5.6 tiles/s. Player at vx=180 can do 45 px in 0.25s. So 1.4 tiles horizontal during 1 tile vertical jump. Player jumps from col 11, lands at col 9.6. Not on row 5 cols 4-7.

Hmm. Need more horizontal velocity or different layout.

Let me increase jump horizontal to ~5 tiles. Or make platform closer.

Let me put row 6 platform cols 6-9:

Row 6: "......####.............."
= 6 + 4 + 15 = 25 ✓

Player on row 7 col 8 (between row 6 and row 8). Wait row 6 cols 6-9 includes col 8 and 9. Row 7 is cols 8-11. There's overlap at cols 8-9. That's fine.

From row 7 col 11, jump up to row 5 col 4-7. From col 11 to col 4-7, that's 4-7 left. Player vx=-180, time for 1 tile up = sqrt(2*32/1600) = 0.2s. Horizontal: 36 px = 1.1 tiles left. Not enough.

OK so player can't reach row 5 from row 7 directly. Need to use row 9 as intermediate.

From row 7 col 11, drop to row 9 right platform. Then walk left to row 9 left platform (avoiding fire at col 13). From row 9 col 7, jump up to row 7 col 8-11 (back where we started).

Hmm cycle. Player needs another way up.

Let me just add row 6 platform and check it.

Row 6: "......####.............."
Player from row 7 col 8 jumps up to row 6 col 8-9. That's 1 up. Easy. Then from row 6 col 6 jumps to row 5 col 4-7. 1 up, -2 to 1 horizontal. From col 6 to col 4-7, easy.

OK let me redo:

```javascript
const LEVEL_STR = [
  ".........................",  // 0
  "....T....................",  // 1: trophy
  "....####................",  // 2: cols 4-7 (under trophy)
  ".........................",  // 3
  ".........................",  // 4
  "....####.................",  // 5: cols 4-7
  "......####..............",  // 6: cols 6-9
  "........####.............",  // 7: cols 8-11
  ".........................",  // 8
  "....####.....F#####......",  // 9: cols 4-7, fire col 13, cols 14-18
  ".........................",  // 10
  "....####....#E##........",  // 11: cols 4-7, E at col 13, cols 12, 14-15
  ".........................",  // 12
  "####W##########..#####...",  // 13: water col 4, ground cols 0-3, 5-16, 20-23
  "####W##########..#####...",  // 14
];
```

Let me trace path to trophy:
1. Player at col 1, row 13 ground (player y = 12*32 = 384).
2. Walk right to col 3 (water at col 4 blocks).
3. Jump over water from col 3 to col 5. 2 tiles horizontal, 0 vertical. Easy.
4. Walk to col 5 on ground.
5. Jump up to row 11 left platform (cols 4-7). From col 5 to col 4-7. 2 up, -1 to 2 horizontal. Easy.
6. Walk to col 7 on row 11.
7. Jump up to row 9 left platform (cols 4-7). From col 7 to col 4-7. 2 up, -3 to 0 horizontal. Possible.
8. Walk to col 7 on row 9.
9. Jump up to row 7 platform (cols 8-11). From col 7 to col 8-11. 2 up, 1-4 horizontal. Easy.
10. Walk to col 11 on row 7.
11. Jump up to row 6 platform (cols 6-9). From col 11 to col 6-9. 1 up, -5 to -2 horizontal. Possible (5 left).
12. Walk to col 6 on row 6.
13. Jump up to row 5 platform (cols 4-7). From col 6 to col 4-7. 1 up, -2 to 1 horizontal. Easy.
14. Walk to col 5 on row 5.
15. Jump up to row 2 platform (cols 4-7). From col 5 to col 4-7. 3 up, -1 to 2 horizontal. Possible.
16. Walk to col 4 on row 2.
17. Jump up to grab trophy at row 1 col 4. 1 up, 0 horizontal. Easy.

Then to exit:
18. Drop down from row 2 to row 5 (3 tiles down). Player at col 4, falls.
19. Walk to col 7 on row 5.
20. Jump down to row 7 cols 8-11. From col 7 to col 8-11. 2 down, 1-4 right. Easy.
21. Walk to col 11 on row 7.
22. Jump down to row 9 right platform (cols 14-18). From col 11 to col 14-18. 2 down, 3-7 right. Possible.
23. Walk to col 18 on row 9 (avoid fire at 13).
24. Jump down to row 11 right platform (cols 12, 14-15). From col 18 to col 12-15. 2 down, -6 to -3 left. Possible.
25. Walk to col 13 on row 11 (E tile). Win if has trophy.

OK this works!

But wait, step 11 from col 11 to col 6-9 with 1 up. Jump: vy=-560. Time for 1 tile up = sqrt(2*32/1600) = 0.2s. Horizontal: -180*0.2 = -36 px = -1.1 tiles. Player ends at col 11 - 1.1 = col 9.9. Lands on col 9 or 10. Row 6 cols 6-9. Col 9 is at edge of row 6. Player lands at col 9.9 ≈ col 10 (on edge). Hmm.

Let me adjust: row 6 cols 5-8 or 7-10:

Row 6: ".......####............."
= 7 + 4 + 14 = 25 ✓

Cols 7-10.

From row 7 col 11 to row 6 col 7-10: 1 up, -4 to -1 left. From col 11 to col 7 = 4 left. Possible with 0.2s jump: -1.1 tiles. So col 11 → col 9.9. Lands on col 10 (within row 6 cols 7-10). ✓

Row 6: "......####.............." 
Cols 6-9. From col 11, jump to col 9.9. Lands on col 10 (just outside row 6). 

Hmm let me make row 6 cols 7-10. From col 11 jumps to col 9.9, lands on col 10 (edge). ✓

Actually, let me use col 7-10:
Row 6: ".......####............." 
= 7 + 4 + 14 = 25 ✓

OK use this.

Let me also check step 22 (row 7 col 11 to row 9 right col 14-18):
Jump: vy=-560, vx=180. From col 11 y=7*32-28=196, target y=260 (row 9 platform top - 28).
-560t + 800t² = 64. t = 0.8s (calculated earlier).
Horizontal: 180 * 0.8 = 144 px = 4.5 tiles right. From col 11 to col 15.5. Lands on col 15.5 of row 9 right platform (cols 14-18). ✓

OK path works.

Now let me also think about the exit trigger more carefully.

Player walks onto row 11 col 13 (E tile). Player's center is at (col 13 + 0.5) * TILE = 13.5 * 32 = 432. y center = 11*32 - 14 = 338.

In my code: `tileAt(player.x + player.w / 2, player.y + player.h / 2)`. Player x = 13*32 = 416 (if left edge at col 13). player.w = 20. center x = 416 + 10 = 426. tileAt at x=426 → col = 13. ✓

So player center is at (col 13, row 11) when standing on row 11 platform at col 13. Triggers exit.

OK let me also think about hazard tiles being solid. In my collision code, only SOLID tiles are checked. Fire/water tiles are not solid, just deadly on touch. So player can walk through them.

Hmm, but if fire/water are not solid, player can walk through them and die. That's OK but feels weird.

Let me make hazards solid too. Modify the collision check:

```javascript
if (tiles[r][c] !== SOLID && tiles[r][c] !== FIRE && tiles[r][c] !== WATER) continue;
```

And then check separately for hazard damage.

Actually wait, if fire/water are solid, then the player needs to avoid them as physical obstacles (can't walk through). That's more game-like.

But in classic platformers, water is "you sink and die". Player can walk into water (it kills them). Fire similar.

Let me make hazards solid AND deadly. Player can't walk through, and touching = die.

For collision: include hazards in solid check. For damage: check overlap with hazard tiles.

```javascript
function isBlocking(tile) {
  return tile === SOLID || tile === FIRE || tile === WATER;
}

function tryMoveX(entity, dx) {
  entity.x += dx;
  // ... check blocking tiles
  for (let r = rMin; r <= rMax; r++) {
    for (let c = cMin; c <= cMax; c++) {
      if (r < 0 || r >= ROWS || c < 0 || c >= COLS) continue;
      if (!isBlocking(tiles[r][c])) continue;
      // AABB
    }
  }
}
```

But then hazards block movement too. If player jumps into fire, they bounce off (don't pass through). Hmm.

Let me keep hazards as solid AND deadly. Player touches = die. The "die on touch" check happens after movement.

Actually let me just keep hazards as not-solid (player can pass through, but touching them = die). This is more dynamic and fits the "instant death" theme.

Hmm but if fire is at row 9 col 13 (a single tile), and player jumps over the gap between row 9 left (cols 4-7) and row 9 right (cols 14-18), they fly over the fire at col 13. If they don't touch it, fine. If they do touch it (e.g., low jump), they die.

OK let me keep hazards as not-solid.

But wait, the player on ground at col 1, walking right. If water is at col 4, player walks into water tile. Water is not solid, so player passes through. Player center at col 4 - that's water. Die.

That's a quick death if player walks right without jumping. Hmm.

Maybe make water solid so player can't walk into it without jumping. Then water is like a pool you must jump over.

Let me make hazards solid. Then add a damage check after movement.

```javascript
function tryMoveX(entity, dx, checkHazards) {
  entity.x += dx;
  // Check solid tiles
  // ... if collision, push out
  if (checkHazards) {
    // Check if entity is now inside a hazard tile
    // (after movement, before resolution)
  }
}
```

Hmm getting complex. Let me simplify:

Approach: Hazards are solid (block movement). Touching a hazard = die (checked separately).

```javascript
// In tryMoveX/tryMoveY, include hazards in collision
const blocking = [SOLID, FIRE, WATER];

// After movement, check if player is in a hazard
// If so, die

// But if player walks into hazard, they get pushed out (collision resolution).
// Then they're not in hazard. No damage.

// Hmm, that's wrong. Player should die on contact, not be pushed back.
```

OK new approach: Hazards are special. They DON'T block movement (player walks through), but touching them = die.

If hazards don't block movement, player walking right would just walk through water and die. That's the expected behavior.

But what about jumping over water? Player jumps, passes over water (no contact), lands on other side. OK.

What about touching fire mid-jump? If player jumps and passes through fire tile, they touch fire and die.

OK hazards are passable but deadly. Let me keep my original code: only SOLID blocks movement. Hazards just trigger death.

So water at row 13 col 4 is passable. Player walks right, enters water, dies. Player must jump over.

Hmm, but the player might accidentally walk into water and die. That's expected gameplay.

OK let me keep this design.

Actually wait, the tile at row 13 col 4 is W. But the player starts at col 1. Walking right, they cross col 1, 2, 3, 4. At col 4, they're in water. Die.

So player MUST jump over water at col 4 to proceed. That's OK for the game design.

Let me proceed with this design.

Actually one more concern: the player can stand on water? No, water doesn't block movement (in my design), so player can walk through. They die when touching it. OK.

Alright, let me code this up.

Wait, one more issue. Let me check the level once more.

Player starts at col 1 row 12 (player y = 12 * 32 = 384, bottom at 412). The ground is at row 13 (y = 416). Player bottom at 412 doesn't touch ground at 416.

Wait, player y = 384 means player top is at 384 and bottom is at 384+28 = 412. Ground top at row 13 = 416. Player bottom at 412 is above ground top at 416. Player floats!

Need to set player y so bottom touches ground top: player.y = 416 - 28 = 388.

Let me set: player.y = 13*32 - 28 = 388. Player bottom at 416 = ground top.

For row 12 platform: player on top = y = 12*32 - 28 = 356. Player bottom at 384.

For row 11: y = 11*32 - 28 = 324.

Etc.

Let me update code:
```javascript
player = {
  x: 1 * TILE + 4,  // center at col 1.x
  y: 13 * TILE - 28,  // bottom on top of row 13 ground
  ...
};
```

Hmm, x = 1*32 + 4 = 36. Player width 20, so player spans x=36 to 56. Col 1 is x=32-64. Player center at x=46.

If I want player center at col 1, then player x = 1*32 + 6 = 38 (since w=20, x = col*32 + (32-20)/2 = col*32 + 6). 

Or just player x = col*32 (left-aligned).

Let me use player x = col*TILE, y = row*TILE - h. So player left edge at column boundary.

Player starts at col 1 row 13. Player x = 32, y = 13*32 - 28 = 388. Player bottom at 416, on top of row 13 ground.

Hmm but col 1 ground starts at x=32. Col 0 ground starts at x=0. Player at col 1 means x=32. If player moves left, x decreases. If x < 32, player is at col 0.

OK let me just set:
```javascript
player = {
  x: 1 * TILE,  // x = 32
  y: 13 * TILE - 28,  // y = 388
  ...
};
```

Then enemy:
```javascript
enemy = {
  x: 14 * TILE,  // x = 448
  y: 9 * TILE - 24,  // y = 264, on top of row 9 platform
  vx: 50,
  w: 22,
  h: 24,
  minX: 14 * TILE,  // can't go further left than col 14
  maxX: 18 * TILE + 32 - 22,  // can't go further right than col 18 (right edge at col 18 + TILE)
  alive: true,
};
```

Hmm, maxX is the right edge position. Enemy x + w <= maxX. So x <= maxX - w. With maxX = 18*32 = 576 and w=22: x <= 554. But that puts enemy right edge at col 17.x = 554, which is in col 17 (x 544-576). OK.

Actually I want enemy to patrol from col 14 to col 18 (left to right). So enemy x range = [14*32, 18*32 - 22] = [448, 554].

```javascript
minX: 14 * TILE,  // 448
maxX: 18 * TILE,  // 576 (right edge)
```

And in update:
```javascript
if (enemy.x <= enemy.minX || enemy.x + enemy.w >= enemy.maxX) {
  enemy.vx = -enemy.vx;
}
```

Hmm, but maxX is the right edge (576). If enemy.x + w >= 576, reverse. So enemy.x = 576 - 22 = 554 max. OK.

Let me make maxX the right edge of patrolling area = 18*32 + 32 = 608? No wait, I want enemy to stay within cols 14-18. Col 18 right edge is at 18*32 + 32 = 608. Enemy.x + w should be <= 608 (else it leaves col 18). So enemy.x <= 608 - 22 = 586.

Or simpler: maxX = (18+1)*32 = 608 (right boundary). minX = 14*32 = 448 (left boundary).

Check: `enemy.x + enemy.w >= enemy.maxX` means enemy right edge >= 608, so enemy is past col 18 right edge. Reverse.

`enemy.x <= enemy.minX` means enemy left edge <= 448, so enemy is at or before col 14 left edge. Reverse.

Hmm but at the moment of reversal, enemy might overshoot. Let me clamp:

```javascript
if (enemy.x < enemy.minX) enemy.x = enemy.minX;
if (enemy.x + enemy.w > enemy.maxX) enemy.x = enemy.maxX - enemy.w;
enemy.vx = -enemy.vx;
```

Or simpler, after movement, clamp and reverse:

```javascript
enemy.x += enemy.vx * dt;
if (enemy.x <= enemy.minX) {
  enemy.x = enemy.minX;
  enemy.vx = -enemy.vx;
}
if (enemy.x + enemy.w >= enemy.maxX) {
  enemy.x = enemy.maxX - enemy.w;
  enemy.vx = -enemy.vx;
}
```

OK let me code this up.

Let me also think about the enemy staying on the platform. If enemy has gravity, it'll fall off platforms. Need to apply gravity and handle ground collision.

Actually, simpler: enemy stays at fixed y. Just moves horizontally.

```javascript
enemy.x += enemy.vx * dt;
// Clamp and reverse at bounds
if (enemy.x <= enemy.minX || enemy.x + enemy.w >= enemy.maxX) {
  enemy.vx = -enemy.vx;
  enemy.x = Math.max(enemy.minX, Math.min(enemy.maxX - enemy.w, enemy.x));
}
```

This works if the enemy is always on a platform and doesn't need to interact with other platforms.

OK let me finalize the code.

One more thought: I want the trophy to be visually distinct and recognizable. Let me draw it as a clear cup/trophy shape. Same with exit (a door). Same with enemy (a creature).

Also, I should display the level clearly. Let me add some background tiles too.

Let me write the final code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dangerous Dave Clone</title>
<style>
  /* CSS */
</style>
</head>
<body>
  <h1>DANGEROUS DAVE</h1>
  <div id="wrap">
    <canvas id="game" width="800" height="480"></canvas>
    <div id="panel">
      <!-- HUD -->
    </div>
  </div>
  <script>
    /* Game code */
  </script>
</body>
</html>
```

Let me write it out. I'll make the player a simple blue character with a face.

Also, I realize I should think about what happens when player walks left off the start position. Col 0 is also solid ground (row 13). Player walks to col 0. Then col -1 is out of bounds. Player gets clamped at col 0.

In my code, `tryMoveX` checks tiles for solid collision. Out of bounds = no collision. So player can walk off the left edge of the screen. Hmm, that's a bug.

Let me add screen bounds:

```javascript
if (player.x < 0) player.x = 0;
if (player.x + player.w > W) player.x = W - player.w;
```

Or use solid walls at the edges.

Actually for simplicity, let me just clamp:

```javascript
function tryMoveX(entity, dx) {
  // Tentative move
  let newX = entity.x + dx;
  // Clamp to bounds
  newX = Math.max(0, Math.min(W - entity.w, newX));
  entity.x = newX;
  // Check solid collisions
  // ...
}
```

OK let me write the final code.

Actually let me also think about the player death animation. When player dies, just show a "YOU DIED" message. No fancy animation needed.

Win state: "LEVEL COMPLETE!" message.

Let me also handle the case where player jumps and hits their head on a platform from below. The collision should push them down.

OK enough planning. Let me write the code.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dangerous Dave</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: #0a0a14;
    color: #ddd;
    font-family: 'Courier New', monospace;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
  }
  h1 {
    font-size: 22px;
    letter-spacing: 3px;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,200,0,0.5);
    margin-bottom: 8px;
  }
  #wrap {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
  }
  canvas {
    background: #1a1a2e;
    border: 4px solid #555;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
  }
  #panel {
    background: #1a1a2e;
    border: 4px solid #555;
    padding: 14px;
    width: 240px;
    font-size: 13px;
    line-height: 1.5;
  }
  #panel h2 {
    color: #ffcc00;
    font-size: 14px;
    margin: 8px 0 4px;
    letter-spacing: 1px;
    border-bottom: 1px solid #444;
    padding-bottom: 2px;
  }
  .key {
    display: inline-block;
    background: #333;
    border: 1px solid #888;
    padding: 2px 6px;
    margin: 0 2px;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    box-shadow: 0 2px 0 #111;
  }
  #msg {
    color: #ffcc00;
    font-size: 13px;
    margin: 8px 0;
    min-height: 20px;
    padding: 4px;
    background: #111;
    border: 1px solid #444;
    border-radius: 3px;
  }
  #status {
    margin: 8px 0;
    padding: 8px;
    background: #111;
    border: 1px solid #444;
    text-align: center;
    font-size: 14px;
    letter-spacing: 2px;
    min-height: 28px;
    font-weight: bold;
  }
  #status.win { color: #00ff66; text-shadow: 0 0 8px #00ff66; }
  #status.lose { color: #ff4444; text-shadow: 0 0 8px #ff4444; }
  #status.play { color: #ffcc00; }
  button {
    margin-top: 8px;
    width: 100%;
    padding: 10px;
    background: #444;
    color: #ffcc00;
    border: 2px solid #888;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: bold;
  }
  button:hover { background: #555; }
  button:active { background: #333; }
  .legend { font-size: 12px; line-height: 1.4; }
  .legend-item { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
  .swatch { width: 14px; height: 14px; border: 1px solid #000; }
</style>
</head>
<body>
<h1>DANGEROUS DAVE</h1>
<div id="wrap">
  <canvas id="game" width="800" height="480"></canvas>
  <div id="panel">
    <h2>CONTROLS</h2>
    <div><span class="key">&larr;</span> <span class="key">&rarr;</span> Move Left/Right</div>
    <div><span class="key">A</span> <span class="key">D</span> Move (Alt)</div>
    <div><span class="key">SPACE</span> / <span class="key">&uarr;</span> Jump</div>
    <div><span class="key">R</span> Restart Level</div>
    
    <h2>OBJECTIVE</h2>
    <div class="legend">
      <div class="legend-item"><div class="swatch" style="background:#ffd700"></div>Trophy - collect it!</div>
      <div class="legend-item"><div class="swatch" style="background:#00ff66"></div>Exit - escape here</div>
      <div class="legend-item"><div class="swatch" style="background:#ff4422"></div>Fire - deadly</div>
      <div class="legend-item"><div class="swatch" style="background:#3399ff"></div>Water - deadly</div>
      <div class="legend-item"><div class="swatch" style="background:#cc44cc"></div>Enemy - deadly</div>
    </div>
    
    <div id="msg">Press arrow keys or WASD to move, Space to jump.</div>
    <div id="status" class="play">PLAYING</div>
    <button id="restartBtn">RESTART (R)</button>
  </div>
</div>

<script>
(() => {
  'use strict';
  
  const TILE = 32;
  const COLS = 25;
  const ROWS = 15;
  const W = COLS * TILE;
  const H = ROWS * TILE;

  const EMPTY = 0, SOLID = 1, FIRE = 2, WATER = 3, TROPHY = 4, EXIT = 5;
  const tileMap = { '#': SOLID, 'F': FIRE, 'W': WATER, 'T': TROPHY, 'E': EXIT };

  const LEVEL_STR = [
    ".........................",  // 0
    "....T....................",  // 1: trophy
    "....####................",  // 2
    ".........................",  // 3
    ".........................",  // 4
    "....####.................",  // 5
    ".......####..............",  // 6
    "........####.............",  // 7
    ".........................",  // 8
    "....####.....F#####......",  // 9
    ".........................",  // 10
    "....####....#E##.........",  // 11
    ".........................",  // 12
    "####W##########..#####...",  // 13
    "####W##########..#####...",  // 14
  ];

  // Sanity check rows
  for (let i = 0; i < LEVEL_STR.length; i++) {
    if (LEVEL_STR[i].length !== COLS) {
      console.warn(`Row ${i} has length ${LEVEL_STR[i].length}, expected ${COLS}`);
    }
  }

  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  const statusEl = document.getElementById('status');
  const msgEl = document.getElementById('msg');

  let tiles;
  let player;
  let enemy;
  let state;
  let message;
  let messageTimer;
  let lastTime = 0;
  const keys = {};

  function buildLevel() {
    tiles = [];
    for (let r = 0; r < ROWS; r++) {
      const row = [];
      for (let c = 0; c < COLS; c++) {
        const ch = LEVEL_STR[r][c];
        row.push(tileMap[ch] || EMPTY);
      }
      tiles.push(row);
    }

    player = {
      x: 1 * TILE,
      y: 13 * TILE - 28,
      vx: 0,
      vy: 0,
      w: 20,
      h: 28,
      onGround: false,
      facing: 1,
      hasTrophy: false,
      animTime: 0,
    };

    enemy = {
      x: 14 * TILE,
      y: 9 * TILE - 24,
      vx: 50,
      w: 22,
      h: 24,
      minX: 14 * TILE,
      maxX: 19 * TILE,
    };

    state = 'playing';
    message = '';
    messageTimer = 0;
    msgEl.textContent = 'Use arrow keys or WASD. Space to jump.';
    setStatus('playing');
  }

  function setStatus(s) {
    state = s;
    statusEl.className = s === 'won' ? 'win' : s === 'lost' ? 'lose' : 'play';
    statusEl.textContent = s === 'won' ? '★ LEVEL COMPLETE ★' : s === 'lost' ? '✗ YOU DIED ✗' : 'PLAYING';
  }

  function showMessage(text, duration = 2) {
    message = text;
    messageTimer = duration;
    msgEl.textContent = text;
  }

  function isSolidTile(t) {
    return t === SOLID;
  }

  function tileAtPx(px, py) {
    const c = Math.floor(px / TILE);
    const r = Math.floor(py / TILE);
    if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return EMPTY;
    return tiles[r][c];
  }

  function moveX(entity, dx) {
    if (dx === 0) return false;
    let newX = entity.x + dx;
    // Clamp to screen bounds
    newX = Math.max(0, Math.min(W - entity.w, newX));
    entity.x = newX;
    
    const left = entity.x;
    const right = entity.x + entity.w;
    const top = entity.y + 1;
    const bottom = entity.y + entity.h - 1;
    
    const cMin = Math.floor(left / TILE);
    const cMax = Math.floor((right - 1) / TILE);
    const rMin = Math.floor(top / TILE);
    const rMax = Math.floor((bottom - 1) / TILE);
    
    let collided = false;
    for (let r = rMin; r <= rMax; r++) {
      for (let c = cMin; c <= cMax; c++) {
        if (r < 0 || r >= ROWS || c < 0 || c >= COLS) continue;
        if (!isSolidTile(tiles[r][c])) continue;
        const tileLeft = c * TILE;
        const tileRight = tileLeft + TILE;
        const tileTop = r * TILE;
        const tileBottom = tileTop + TILE;
        if (right > tileLeft && left < tileRight && bottom > tileTop && top < tileBottom) {
          if (dx > 0) {
            entity.x = tileLeft - entity.w;
          } else {
            entity.x = tileRight;
          }
          collided = true;
        }
      }
    }
    return collided;
  }

  function moveY(entity, dy) {
    if (dy === 0) return false;
    entity.y += dy;
    const left = entity.x + 1;
    const right = entity.x + entity.w - 1;
    const top = entity.y;
    const bottom = entity.y + entity.h;
    
    const cMin = Math.floor(left / TILE);
    const cMax = Math.floor((right - 1) / TILE);
    const rMin = Math.floor(top / TILE);
    const rMax = Math.floor((bottom - 1) / TILE);
    
    entity.onGround = false;
    let collided = false;
    for (let r = rMin; r <= rMax; r++) {
      for (let c = cMin; c <= cMax; c++) {
        if (r < 0 || r >= ROWS || c < 0 || c >= COLS) continue;
        if (!isSolidTile(tiles[r][c])) continue;
        const tileLeft = c * TILE;
        const tileRight = tileLeft + TILE;
        const tileTop = r * TILE;
        const tileBottom = tileTop + TILE;
        if (right > tileLeft && left < tileRight && bottom > tileTop && top < tileBottom) {
          if (dy > 0) {
            entity.y = tileTop - entity.h;
            entity.onGround = true;
          } else {
            entity.y = tileBottom;
          }
          entity.vy = 0;
          collided = true;
        }
      }
    }
    return collided;
  }

  function rectsOverlap(a, b) {
    return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
  }

  function update(dt) {
    if (messageTimer > 0) {
      messageTimer -= dt;
      if (messageTimer <= 0) {
        message = '';
        if (state === 'playing') msgEl.textContent = 'Find the trophy, then reach the exit.';
      }
    }

    if (state !== 'playing') return;

    player.animTime += dt;

    // Input
    const moveLeft = !!(keys['ArrowLeft'] || keys['a'] || keys['A']);
    const moveRight = !!(keys['ArrowRight'] || keys['d'] || keys['D']);
    const jump = !!(keys[' '] || keys['ArrowUp'] || keys['w'] || keys['W']);
    const restart = !!(keys['r'] || keys['R']);

    if (restart) {
      keys['r'] = false;
      keys['R'] = false;
      buildLevel();
      return;
    }

    const MOVE_SPEED = 180;
    const GRAVITY = 1700;
    const JUMP_VEL = -560;
    const MAX_FALL = 700;

    if (moveLeft) {
      player.vx = -MOVE_SPEED;
      player.facing = -1;
    } else if (moveRight) {
      player.vx = MOVE_SPEED;
      player.facing = 1;
    } else {
      player.vx = 0;
    }

    if (jump && player.onGround) {
      player.vy = JUMP_VEL;
      player.onGround = false;
    }

    // Apply gravity
    player.vy += GRAVITY * dt;
    if (player.vy > MAX_FALL) player.vy = MAX_FALL;

    // Move X then Y
    moveX(player, player.vx * dt);
    moveY(player, player.vy * dt);

    // Check if player fell off bottom
    if (player.y > H) {
      setStatus('lost');
      showMessage('You fell out of the world! Press R to restart.', 9999);
      return;
    }

    // Hazard check (fire and water)
    const ph = player.h - 2;
    const pTop = player.y + 2;
    const pBottom = player.y + ph - 2;
    const pLeft = player.x + 2;
    const pRight = player.x + player.w - 2;
    const cMin = Math.floor(pLeft / TILE);
    const cMax = Math.floor((pRight - 1) / TILE);
    const rMin = Math.floor(pTop / TILE);
    const rMax = Math.floor((pBottom - 1) / TILE);
    
    let hitHazard = null;
    for (let r = rMin; r <= rMax; r++) {
      for (let c = cMin; c <= cMax; c++) {
        if (r < 0 || r >= ROWS || c < 0 || c >= COLS) continue;
        const t = tiles[r][c];
        if (t === FIRE) hitHazard = 'fire';
        else if (t === WATER) hitHazard = 'water';
      }
    }
    if (hitHazard) {
      setStatus('lost');
      showMessage(`You touched ${hitHazard}! Press R to restart.`, 9999);
      return;
    }

    // Trophy check
    if (!player.hasTrophy) {
      const tcMin = Math.floor((player.x + 2) / TILE);
      const tcMax = Math.floor((player.x + player.w - 3) / TILE);
      const trMin = Math.floor((player.y + 2) / TILE);
      const trMax = Math.floor((player.y + player.h - 3) / TILE);
      for (let r = trMin; r <= trMax; r++) {
        for (let c = tcMin; c <= tcMax; c++) {
          if (r >= 0 && r < ROWS && c >= 0 && c < COLS && tiles[r][c] === TROPHY) {
            tiles[r][c] = EMPTY;
            player.hasTrophy = true;
            showMessage('★ Trophy collected! Now find the exit. ★', 3);
          }
        }
      }
    }

    // Exit check
    const ecx = player.x + player.w / 2;
    const ecy = player.y + player.h / 2;
    const ec = Math.floor(ecx / TILE);
    const er = Math.floor(ecy / TILE);
    if (er >= 0 && er < ROWS && ec >= 0 && ec < COLS && tiles[er][ec] === EXIT) {
      if (player.hasTrophy) {
        setStatus('won');
        showMessage('★ You escaped with the trophy! ★', 9999);
      } else if (messageTimer <= 0) {
        showMessage('Exit locked. Find the trophy first!', 2);
      }
    }

    // Enemy update (horizontal patrol)
    enemy.x += enemy.vx * dt;
    if (enemy.x <= enemy.minX) {
      enemy.x = enemy.minX;
      enemy.vx = Math.abs(enemy.vx);
    }
    if (enemy.x + enemy.w >= enemy.maxX) {
      enemy.x = enemy.maxX - enemy.w;
      enemy.vx = -Math.abs(enemy.vx);
    }

    // Enemy-player collision
    const eBox = { x: enemy.x + 4, y: enemy.y + 4, w: enemy.w - 8, h: enemy.h - 8 };
    const pBox = { x: player.x + 2, y: player.y + 2, w: player.w - 4, h: player.h - 4 };
    if (eBox.x < pBox.x + pBox.w && eBox.x + eBox.w > pBox.x && eBox.y < pBox.y + pBox.h && eBox.y + eBox.h > pBox.y) {
      setStatus('lost');
      showMessage('The enemy caught you! Press R to restart.', 9999);
      return;
    }
  }

  // Drawing functions
  function drawTile(r, c, type, t) {
    const x = c * TILE;
    const y = r * TILE;
    
    if (type === SOLID) {
      // Brick pattern
      ctx.fillStyle = '#8a5a2a';
      ctx.fillRect(x, y, TILE, TILE);
      // Top highlight
      ctx.fillStyle = '#a8703a';
      ctx.fillRect(x, y, TILE, 6);
      // Mortar
      ctx.fillStyle = '#2a1a0a';
      ctx.fillRect(x + TILE/2 - 1, y, 2, TILE);
      // Bottom shadow
      ctx.fillStyle = '#5a3a1a';
      ctx.fillRect(x, y + TILE - 4, TILE, 4);
      // Random brick pattern
      ctx.fillStyle = 'rgba(0,0,0,0.2)';
      const offset = (r % 2) * (TILE / 2);
      ctx.fillRect(x + offset - 1, y + TILE/2 - 1, TILE/2, 2);
      ctx.fillRect(x + offset - 1 + TILE/2, y + TILE/2 - 1, TILE/2, 2);
    } else if (type === FIRE) {
      // Animated fire
      const flick = Math.sin(t * 10 + c * 2 + r) * 0.5 + 0.5;
      ctx.fillStyle = '#2a0a05';
      ctx.fillRect(x, y, TILE, TILE);
      // Outer flame
      ctx.fillStyle = '#cc3311';
      ctx.beginPath();
      ctx.moveTo(x + 2, y + TILE);
      ctx.lineTo(x + 6, y + TILE - 14 + flick * 6);
      ctx.lineTo(x + TILE/2, y + 2 + flick * 4);
      ctx.lineTo(x + TILE - 6, y + TILE - 18 + flick * 6);
      ctx.lineTo(x + TILE - 2, y + TILE);
      ctx.closePath();
      ctx.fill();
      // Inner flame
      ctx.fillStyle = '#ff6622';
      ctx.beginPath();
      ctx.moveTo(x + 6, y + TILE);
      ctx.lineTo(x + 10, y + TILE - 16 + flick * 4);
      ctx.lineTo(x + TILE/2, y + 8 + flick * 4);
      ctx.lineTo(x + TILE - 10, y + TILE - 20 + flick * 4);
      ctx.lineTo(x + TILE - 6, y + TILE);
      ctx.closePath();
      ctx.fill();
      // Core
      ctx.fillStyle = '#ffdd44';
      ctx.beginPath();
      ctx.moveTo(x + 10, y + TILE);
      ctx.lineTo(x + 12, y + TILE - 20 + flick * 3);
      ctx.lineTo(x + TILE/2, y + 14);
      ctx.lineTo(x + TILE - 12, y + TILE - 22 + flick * 3);
      ctx.lineTo(x + TILE - 10, y + TILE);
      ctx.closePath();
      ctx.fill();
    } else if (type === WATER) {
      const wave = Math.sin(t * 2 + c * 0.8) * 0.5 + 0.5;
      ctx.fillStyle = '#0a1a3a';
      ctx.fillRect(x, y, TILE, TILE);
      ctx.fillStyle = '#1a4a8a';
      ctx.fillRect(x, y + 6, TILE, TILE - 6);
      ctx.fillStyle = '#3399ff';
      ctx.fillRect(x, y + 8 + wave * 2, TILE, 6);
      ctx.fillStyle = '#88ccff';
      ctx.fillRect(x + 3, y + 10 + wave * 2, 8, 2);
      ctx.fillRect(x + TILE - 12, y + 12 + wave * 2, 6, 2);
    } else if (type === TROPHY) {
      // Trophy on platform - draw a stand first
      ctx.fillStyle = '#aa7722';
      ctx.fillRect(x + 12, y + TILE - 4, 8, 4);
      ctx.fillStyle = '#ffcc00';
      const cx = x + TILE / 2;
      const cy = y + TILE / 2 - 2;
      // Cup body
      ctx.beginPath();
      ctx.moveTo(cx - 7, cy - 10);
      ctx.lineTo(cx + 7, cy - 10);
      ctx.lineTo(cx + 5, cy + 2);
      ctx.lineTo(cx - 5, cy + 2);
      ctx.closePath();
      ctx.fill();
      // Handles
      ctx.strokeStyle = '#cc9900';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(cx - 7, cy - 5, 3, -Math.PI/2, Math.PI/2);
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(cx + 7, cy - 5, 3, Math.PI/2, -Math.PI/2);
      ctx.stroke();
      // Stem
      ctx.fillStyle = '#cc9900';
      ctx.fillRect(cx - 2, cy + 2, 4, 5);
      // Base
      ctx.fillStyle = '#aa7722';
      ctx.fillRect(cx - 6, cy + 7, 12, 3);
      // Sparkle
      const sp = (Math.sin(t * 4 + c) + 1) * 0.5;
      ctx.fillStyle = `rgba(255,255,200,${sp * 0.8 + 0.2})`;
      ctx.fillRect(cx - 10, cy - 8, 2, 2);
      ctx.fillRect(cx + 9, cy - 6, 2, 2);
    } else if (type === EXIT) {
      // Exit door
      ctx.fillStyle = '#1a1a1a';
      ctx.fillRect(x, y, TILE, TILE);
      // Door frame
      ctx.fillStyle = player.hasTrophy ? '#00cc55' : '#554422';
      ctx.fillRect(x + 2, y + 2, TILE - 4, TILE - 4);
      // Door interior
      ctx.fillStyle = player.hasTrophy ? '#003322' : '#221100';
      ctx.fillRect(x + 5, y + 4, TILE - 10, TILE - 8);
      // Door lines
      ctx.fillStyle = player.hasTrophy ? '#00ff66' : '#664422';
      ctx.fillRect(x + TILE/2 - 1, y + 6, 2, TILE - 12);
      // Doorknob
      ctx.fillStyle = player.hasTrophy ? '#ffff00' : '#888888';
      ctx.fillRect(x + TILE - 10, y + TILE/2, 3, 3);
      // Glow if has trophy
      if (player.hasTrophy) {
        const glow = 0.2 + 0.15 * Math.sin(t * 4);
        ctx.fillStyle = `rgba(0,255,100,${glow})`;
        ctx.fillRect(x, y, TILE, TILE);
      }
    }
  }

  function drawPlayer(t) {
    const x = Math.floor(player.x);
    const y = Math.floor(player.y);
    const w = player.w;
    const h = player.h;
    
    // Body
    ctx.fillStyle = '#1a3a8a';
    ctx.fillRect(x + 2, y + 8, w - 4, h - 14);
    // Body highlight
    ctx.fillStyle = '#2a5acc';
    ctx.fillRect(x + 4, y + 10, w - 8, h - 18);
    // Head
    ctx.fillStyle = '#ffcc99';
    ctx.fillRect(x + 4, y, w - 8, 10);
    ctx.fillStyle = '#eebb88';
    ctx.fillRect(x + 4, y, w - 8, 4);
    // Eyes
    ctx.fillStyle = '#000';
    if (player.facing > 0) {
      ctx.fillRect(x + w - 8, y + 3, 2, 3);
      ctx.fillRect(x + 6, y + 3, 2, 3);
    } else {
      ctx.fillRect(x + 6, y + 3, 2, 3);
      ctx.fillRect(x + w - 8, y + 3, 2, 3);
    }
    // Legs
    ctx.fillStyle = '#113366';
    const legOffset = player.onGround && Math.abs(player.vx) > 10 ? Math.sin(t * 12) * 2 : 0;
    ctx.fillRect(x + 3, y + h - 6, 5, 6);
    ctx.fillRect(x + w - 8, y + h - 6, 5, 6);
  }

  function drawEnemy(t) {
    const x = Math.floor(enemy.x);
    const y = Math.floor(enemy.y);
    const w = enemy.w;
    const h = enemy.h;
    
    // Body
    ctx.fillStyle = '#6a1a8a';
    ctx.fillRect(x + 2, y + 4, w - 4, h - 4);
    // Body highlight
    ctx.fillStyle = '#aa33cc';
    ctx.fillRect(x + 4, y + 6, w - 8, h - 10);
    // Eye
    ctx.fillStyle = '#fff';
    ctx.fillRect(x + w/2 - 4, y + 6, 3, 3);
    ctx.fillStyle = '#f00';
    ctx.fillRect(x + w/2 - 3, y + 7, 2, 2);
    // Teeth
    ctx.fillStyle = '#fff';
    ctx.fillRect(x + w/2 - 5, y + h - 8, 2, 3);
    ctx.fillRect(x + w/2 + 3, y + h - 8, 2, 3);
    // Feet animation
    const off = Math.sin(t * 8) * 1.5;
    ctx.fillStyle = '#6a1a8a';
    ctx.fillRect(x + 2, y + h - 2, 6, 2 + off);
    ctx.fillRect(x + w - 8, y + h - 2, 6, 2 - off);
  }

  function draw(t) {
    // Sky background
    const skyGrad = ctx.createLinearGradient(0, 0, 0, H);
    skyGrad.addColorStop(0, '#0a0a2e');
    skyGrad.addColorStop(1, '#2a1a3e');
    ctx.fillStyle = skyGrad;
    ctx.fillRect(0, 0, W, H);
    
    // Stars
    for (let i = 0; i < 40; i++) {
      const sx = (i * 173) % W;
      const sy = ((i * 89) % (H * 0.6));
      const brightness = 0.3 + 0.4 * Math.sin(t * 2 + i);
      ctx.fillStyle = `rgba(255,255,255,${brightness})`;
      ctx.fillRect(sx, sy, 1, 1);
      if (i % 3 === 0) ctx.fillRect(sx + 1, sy, 1, 1);
    }
    
    // Draw solid tiles
    for (let r = 0; r < ROWS; r++) {
      for (let c = 0; c < COLS; c++) {
        const t = tiles[r][c];
        if (t === SOLID) drawTile(r, c, t, t);
      }
    }
    
    // Draw hazards and items (rendered separately so they're "on top")
    for (let r = 0; r < ROWS; r++) {
      for (let c = 0; c < COLS; c++) {
        const t = tiles[r][c];
        if (t === FIRE || t === WATER || t === TROPHY || t === EXIT) {
          drawTile(r, c, t, t);
        }
      }
    }
    
    // Draw enemy
    drawEnemy(t);
    
    // Draw player
    drawPlayer(t);
    
    // Trophy indicator in HUD
    if (player.hasTrophy) {
      ctx.fillStyle = 'rgba(0,0,0,0.5)';
      ctx.fillRect(8, 8, 100, 24);
      ctx.fillStyle = '#ffd700';
      ctx.font = 'bold 16px Courier New';
      ctx.fillText('★ TROPHY', 14, 26);
    }
  }

  function loop(t) {
    const dt = Math.min(0.033, (t - lastTime) / 1000 || 0);
    lastTime = t;
    update(dt);
    draw(t / 1000);
    requestAnimationFrame(loop);
  }

  function restart() {
    buildLevel();
  }

  // Input handling
  window.addEventListener('keydown', (e) => {
    keys[e.key] = true;
    if ([' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
      e.preventDefault();
    }
  });
  window.addEventListener('keyup', (e) => {
    keys[e.key] = false;
  });
  document.getElementById('restartBtn').addEventListener('click', restart);

  // Focus canvas so it can receive keyboard
  canvas.focus();
  canvas.addEventListener('click', () => canvas.focus());

  buildLevel();
  lastTime = performance.now();
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>
```

Wait, let me check the level string lengths carefully.

Row 11: "....####....#E##........."
Let me count: . . . . # # # # . . . . # E # # . . . . . . . . .
= 4 + 4 + 4 + 1 + 1 + 2 + 9 = 25 ✓

Actually let me look at my actual code: `"....####....#E##........."`
4 dots + 4 hashes + 4 dots + # + E + 2 hashes + 9 dots = 4+4+4+1+1+2+9 = 25 ✓

Row 13: "####W##########..#####..."
4 hashes + W + 10 hashes + 2 dots + 5 hashes + 3 dots = 4+1+10+2+5+3 = 25 ✓

Row 9: "....####.....F#####......"
4 dots + 4 hashes + 5 dots + F + 5 hashes + 6 dots = 4+4+5+1+5+6 = 25 ✓

OK all good.

Hmm wait, let me reconsider the level reachability once more.

Player starts at col 1, on row 13 ground. Walks right.

Wait, col 0 is also ground (solid). Player at col 1 can walk left to col 0. Then can't go further left (off screen, clamped).

To reach trophy:
- Ground row 13 cols 0-3, 5-16, 20-23.
- Water at col 4 (between 3 and 5).
- Player must jump over water at col 4.

Let me check player jump over 1-tile water:
- Player at col 3 row 13. Jump up with vy=-560, vx=180.
- Peak time: 0.33s. Peak y = 388 - 560*0.33 + 850*0.33² = 388 - 184 + 92 = 296.
- Hmm that's a big jump. Player goes up to row 9 area.

Wait, player doesn't need to jump over water horizontally. Just need horizontal jump.

Player walking right at col 3, presses jump (vy=-560), keeps moving right (vx=180). Player arcs up-right, comes back down.

Time in air (from y=388 to back to 388): 2 * 0.33 = 0.66s. Horizontal: 180*0.66 = 119 px = 3.7 tiles.

So player jumps 3.7 tiles horizontally in a single jump. That's enough to clear water at col 4 (1 tile gap).

Player at col 3 jumps, lands at col 6.7 ≈ col 7. Lands on row 13 ground (col 5-16 solid). ✓

OK that works.

Let me also verify the player can land precisely. When player jumps, they go up and come down. The horizontal velocity is constant (assuming no air resistance). So landing position depends on jump duration.

For the player to land on a narrow platform, timing matters. The platforms are at least 4 tiles wide, so landing should be easy.

OK let me also double-check the trophy grab. Player on row 2 cols 4-7 platform. Trophy at row 1 col 4.

Player y when standing on row 2: y = 2*32 - 28 = 36. Player top at 36. Trophy at row 1 = y range [32, 64]. Player overlaps row 1 when player y in [32-28, 64-28] = [4, 36]. Player at y=36 has top at 36 (just touching row 1 bottom). 

In my trophy check, I use player.y + 2 to player.y + player.h - 3. So check range [y+2, y+25] = [38, 61]. Trophy at row 1 y range [32, 64]. Overlap [38, 61]. ✓

Player x at col 4: x = 128, x+w = 148. Trophy x range [128, 160]. Overlap [128, 148]. ✓

So when player stands at col 4 row 2, trophy is collected. ✓

What about col 5 on row 2? Player x = 160, x+w = 180. Trophy x range [128, 160]. Overlap [160, 160] (just touching). Hmm, my check uses floor((x+w-3)/TILE) = floor((180-3)/32) = floor(177/32) = 5. So col 5 included. ✓

What about col 3 on row 2? Player x = 96. Trophy x range [128, 160]. No overlap. Player at col 3 doesn't grab trophy. ✓

What about jumping up at col 4? Player y = 36, presses jump. Player y decreases. When player y is in range where row 1 is touched (y < 36), trophy can be collected.

OK looks good.

Now exit. Exit at row 11 col 13. Player on row 11 platform. Player at col 12: x=384, w=20, x+w=404. Exit x range [416, 448]. No overlap. Player needs to be at col 13 (x=416-436) or col 14 (x=448-468).

Player at col 13: x = 13*32 = 416. Player x+w = 436. Exit x range [416, 448]. Overlap [416, 436]. ✓

In my check: tileAt(player.x + w/2, player.y + h/2). Player center x = 416 + 10 = 426. Col = 13. ✓

OK exit triggers.

But wait, the player needs to STAND on row 11 platform. Player at col 13 row 11 has y = 11*32 - 28 = 324. Player center y = 324 + 14 = 338. Tile row = floor(338/32) = 10. Row 10, not row 11!

Hmm. Player center y when standing on row 11: y = 324 to 352. Center = 338. Row = floor(338/32) = 10. Tile at (col 13, row 10) is empty. Exit at (col 13, row 11). Player center is at row 10, not row 11.

So my exit check using player center fails to detect exit when player is standing on row 11.

Fix: check player bounds, not just center. Or move exit to row 10 (so player's center is at exit row).

Option 1: Check all tiles overlapping player.

```javascript
// Exit check
const ecMin = Math.floor((player.x + 2) / TILE);
const ecMax = Math.floor((player.x + player.w - 3) / TILE);
const erMin = Math.floor((player.y + 2) / TILE);
const erMax = Math.floor((player.y + player.h - 3) / TILE);
for (let r = erMin; r <= erMax; r++) {
  for (let c = ecMin; c <= ecMax; c++) {
    if (r >= 0 && r < ROWS && c >= 0 && c < COLS && tiles[r][c] === EXIT) {
      // Player overlaps exit
      if (player.hasTrophy) {
        setStatus('won');
        showMessage('★ You escaped with the trophy! ★', 9999);
      } else if (messageTimer <= 0) {
        showMessage('Exit locked. Find the trophy first!', 2);
      }
    }
  }
}
```

OK let me use this approach.

Hmm but if exit is at row 11 col 13 and player on row 11 col 13, player.y = 324 to 352. erMin = floor((324+2)/32) = floor(326/32) = 10. erMax = floor((352-3)/32) = floor(349/32) = 10. So range [10, 10]. Misses exit at row 11.

Player y in range [324, 352] (bottom at 352 = row 11 top). Player bottom at row 11 top, player top at row 10 (since 324 is in row 10 = y [288, 320]). Wait, 324 is in [320, 352] which is row 10. Hmm.

Let me re-check tile rows:
- Row 0: y [0, 32]
- Row 1: y [32, 64]
- ...
- Row 10: y [320, 352]
- Row 11: y [352, 384]

Player standing on row 11 platform: player bottom = row 11 top = 352. Player top = 352 - 28 = 324. Player y range [324, 352].

Player y = 324 is in row 10 (y [320, 352]). Player bottom y = 352 is in row 10 still (since row 11 starts at 352).

So player occupies rows 10 (entirely) when standing on row 11. Exit at row 11 is NOT overlapped by player.

That's a problem. Player needs to actually overlap exit tile.

Solution 1: Move exit to row 10 (above the row 11 platform). Player walking on row 11 has y in row 10. Exit at row 10 is overlapped. ✓

Solution 2: Make player taller, or position exit at row 10.

Let me move exit to row 10 col 16. Then player walking on row 11 platform at col 16 (overlapping exit column) triggers.

But row 10 is empty in my layout. So exit tile at row 10 col 16. Player walking on row 11 col 16: player x = 16*32 = 512. Player y = 324. Player bottom = 352.

In my overlap check: ecMin = floor((512+2)/32) = 16. ecMax = floor((532-3)/32) = floor(529/32) = 16. So col 16 only.
erMin = floor((324+2)/32) = 10. erMax = floor((352-3)/32) = 10. So row 10 only.

Exit at row 10 col 16. ✓ Overlaps.

OK let me move exit to row 10 col 16.

Row 10: "................E........"
Cols 0-15 ., col 16 E, cols 17-24 .
= 16 + 1 + 8 = 25 ✓

Now the row 11 platform cols 12, 14, 15 don't need to be specifically arranged for exit (since exit is now at row 10).

But player needs to jump from somewhere to row 10 col 16. From row 11 col 16 (no platform), need to jump up. From row 11 col 14-15 (platform), jump up 1 tile to row 10 col 16. Easy.

Player on row 11 col 15 (platform). Jumps up to row 10 col 16. Player y decreases by 1 tile (32px). Player x increases by 1 tile.

Player jumps from col 15 to col 16, up 1. 1 up, 1 right. Easy.

OK let me update the level:

```javascript
const LEVEL_STR = [
  ".........................",  // 0
  "....T....................",  // 1: trophy
  "....####................",  // 2: cols 4-7 (under trophy)
  ".........................",  // 3
  ".........................",  // 4
  "....####.................",  // 5: cols 4-7
  ".......####..............",  // 6: cols 7-10
  "........####.............",  // 7: cols 8-11
  ".........................",  // 8
  "....####.....F#####......",  // 9: cols 4-7, fire 13, cols 14-18
  "................E........",  // 10: exit col 16
  "....####....####.........",  // 11: cols 4-7, 12-15
  ".........................",  // 12
  "####W##########..#####...",  // 13: water col 4, ground cols 0-3, 5-16, 20-23
  "####W##########..#####...",  // 14
];
```

Let me verify counts:
Row 6: ".......####.............." = 7 + 4 + 14 = 25 ✓
Row 11: "....####....####........." = 4 + 4 + 4 + 4 + 9 = 25 ✓
Row 10: "................E........" = 16 + 1 + 8 = 25 ✓

OK.

Now path to exit:
1. From trophy, drop down to row 5.
2. Walk to col 7 on row 5.
3. Jump down to row 7 cols 8-11. From col 7, jump right-down. 2 down, 1-4 right.
4. Walk to col 11 on row 7.
5. Jump down to row 9 right cols 14-18. From col 11, jump right-down. 2 down, 3-7 right.
6. Walk to col 18 on row 9 (avoid fire at 13).
7. Jump down to row 11 cols 12-15. From col 18, jump left-down. 2 down, -6 to -3 left.
8. Walk to col 15 on row 11.
9. Jump up to exit at row 10 col 16. 1 up, 1 right.

But step 7: from col 18 to col 12-15. Player needs to be at col 12, 14, or 15. With horizontal velocity -180 and falling from row 9 to row 11 (64px), time = sqrt(2*64/1700) = 0.27s (with my gravity 1700). Horizontal = 49 px = 1.5 tiles. Player from col 18 lands at col 16.5. Not on row 11.

If player jumps (-vy=-560), time = 0.8s, horizontal = 144 px = 4.5 tiles. Player from col 18 lands at col 13.5. On row 11 (cols 12-15). ✓

OK works.

Step 9: from col 15 to exit col 16, 1 up. Just press jump.

Actually let me think about where player ends up after step 8 (walking on row 11). Player walks to col 15 (right end of row 11 platform). Jumps up. vy=-560. Player arcs up-right. 

But col 16 row 10 is the exit. Player at col 15 jumps up. After some time, player's bounding box overlaps col 16.

At what y does player overlap row 10? Player y in [320, 352] for row 10. Player at y=324 (standing on row 11 col 15). After jump, vy=-560. Player y decreases.

Time to reach y=320 (top of row 10): (324 - 320) / 560 = 0.007s. Very quick.

At t=0.007s, player x = 15*32 + 180*0.007 = 480 + 1.3 = 481.3. Col 15 (still).

Player continues up. At t=0.35s (peak), player x = 480 + 180*0.35 = 480 + 63 = 543. Col 17 (since 543/32 = 16.97). At peak, player x=543, y=98.

Hmm player jumps over col 16. Player needs to be at col 16 row 10 when going up or coming down.

Let me think: player on row 11 col 15. To reach row 10 col 16 (exit), player jumps up. At some time, player's bbox overlaps col 16 row 10.

Player bbox: x [x, x+w]. Overlap with col 16 x range [512, 544]: x+w > 512 and x < 544. So x in [492, 544].

Player x at col 15 = 480. Jumping with vx=180. At t seconds, x = 480 + 180*t. x in [492, 544] when t in [0.067, 0.356].

At t=0.067, y = 324 - 560*0.067 + 850*0.067² = 324 - 37.5 + 3.8 = 290.3. y in [320, 352]? No, 290 is in row 9 (y [288, 320]).

At t=0.356 (max x), y = 324 - 560*0.356 + 850*0.356² = 324 - 199 + 108 = 233. y in row 7 (y [224, 256]).

Hmm, player isn't at row 10 when crossing col 16.

Let me try facing right but not jumping:
Player walks right from col 15 to col 16. Walks on row 11 platform. But col 16 row 11 is empty (no platform). Player walks off col 15 into col 16.

If col 16 row 11 is empty, player falls. y increases. Player at col 16 row 11 (or below) needs row 10 to be the exit.

Hmm wait, exit is at row 10 col 16. Player walks from col 15 to col 16 (on row 11). Player x = 15*32 + 180*dt. At col 16, x = 512.

But there's no platform at col 16 row 11. Player walks off the right edge of row 11 platform (cols 12-15). Player starts falling.

Player y when at col 16: depends on time. If player was at col 15 with y=324, walks to col 16 (180 px/s), takes 32/180 = 0.18s. In 0.18s, y increases by 0.5*1700*0.18² = 27.5. Player y = 351.5. Hmm bottom at 379.5, which is past row 11 top (352). So player is at row 12 area.

Hmm player fell off the edge. They don't overlap row 10 col 16.

Wait let me reconsider. When player walks off the platform, they fall. y increases. They pass through row 10 area.

Actually let me reconsider the level. Player on row 11 right platform (cols 12-15) wants to reach exit at row 10 col 16. The exit is right above the right edge of the platform.

Player at col 15 row 11 jumps. Jumps up and slightly right. At apex, player is at row 5 area. Not at row 10.

The exit at row 10 col 16 is in the air above the row 11 platform. Player needs to jump up and slightly right to touch it.

Let me reconsider the player's jump arc. Jump from col 15 row 11 with vy=-560, vx=180.

Player center x at t: 480 + 10 + 180*t. Player center y at t: 324 + 14 + (-560)*t + 850*t².

Player center at col 16 when center x = 16*32+16 = 528 (col 16 center). 490 + 180*t = 528. t = 0.211s.

At t=0.211, player center y = 338 - 560*0.211 + 850*0.211² = 338 - 118 + 38 = 258. Row 8 (y [256, 288]).

Hmm, player center at col 16 row 8. Player bbox at col 16 row 8-10 (depending on h).

Player y at t=0.211: 324 - 560*0.211 + 850*0.211² = 324 - 118 + 38 = 244. Player top at 244, bottom at 244+28 = 272. Row 8 (y [256, 288]).

So player bbox at (col 16 area, rows 8). Exit at (col 16, row 10). No overlap.

Hmm, the player jumps too high to overlap row 10 col 16.

Let me try smaller jump or different position. Player needs to overlap row 10 col 16.

Option: Put exit at row 11 col 16 instead. Player walks into col 16 row 11 area (even if not on platform).

Row 11: "....####....####E......." 
4 + 4 + 4 + 4 + 1 + 9 = 26. Hmm.

"....####....###E........"
4 + 4 + 4 + 3 + 1 + 9 = 25 ✓

E at col 14. Cols 12, 13, 14, 15: with E at col 14.

Hmm let me think. Row 11: solid at cols 4-7 and 12-15. To put E at row 11, replace a solid.

"....####....##E#........"
= 4 + 4 + 4 + 2 + 1 + 1 + 9 = 25 ✓

E at col 14. Cols 12, 13 #, col 14 E, col 15 #.

Player on row 11 platform (cols 12-15 with E at 14). Player walks to col 14 (E tile). Player x = 14*32 = 448. Player center y = 338 (row 10).

Player bbox overlap with exit at (col 14, row 11)? erMin = floor((324+2)/32) = 10. erMax = floor((352-3)/32) = 10. Row 10 only. Exit at row 11 not overlapped.

Same issue. Player standing on row 11 platform is in row 10.

OK let me change exit to row 10 col 15. Player at col 15 row 11 (on platform). Jumps straight up.

Player center x = 480 + 10 = 490. Player center y = 338. With vy=-560, vx=0:

At t when player bbox overlaps col 15 row 10:
- col 15 x range [480, 512]. Player x range [480, 500] (w=20). Overlap [480, 500].
- row 10 y range [320, 352]. Player y range [324, 352]. Overlap [324, 352].

Player on platform at col 15 already overlaps col 15 row 10. ✓

So if I put exit at row 10 col 15, it triggers when player is on row 11 platform at col 15.

Wait, but col 15 row 11 is solid. Player stands on top. Player y range [324, 352]. erMin = floor((324+2)/32) = 10. erMax = floor((352-3)/32) = 10. Row 10. Exit at row 10 col 15. Overlap ✓.

OK let me put exit at row 10 col 15. Or any col 12-15 at row 10.

Actually, the player needs to step on the EXIT tile, which is the trigger. Exit at row 10 col 15 means player walking on row 11 col 15 (platform) triggers.

But the platform at row 11 col 15 is solid. Player walks on top. Player's bbox overlaps row 10 col 15. ✓

Hmm but if I put exit at row 10, it doesn't look like a door on the platform. Let me put exit tile at row 11 col 15 (replace solid with exit).

Row 11: "....####....####........." → "....####....###E........"
= 4 + 4 + 4 + 3 + 1 + 9 = 25 ✓

E at col 15.

Player on row 11 col 15 (E tile). Player walks onto E. E is passable (not solid). Player y range [324, 352] (standing on... wait, if col 15 row 11 is E (not solid), player can't stand on it).

Hmm. Player walks onto col 15 row 11. Col 15 row 11 is empty (E is not solid). Player falls.

Player needs a platform to stand on. Let me have cols 12-14 solid and col 15 be E. Player walks from col 14 to col 15. Col 14 solid (platform edge), col 15 E (no platform).

Player walks off col 14 edge. Falls.

When falling, player's bbox overlaps col 15. Trigger exit.

Player y when stepping off col 14: 324 (top). Falls. After dt, y = 324 + 0.5*1700*dt².

Player y at 324: bbox [324, 352]. Overlaps row 10. erMin=10, erMax=10. Row 10.
Player y at 351: bbox [351, 379]. erMin=10, erMax=11. Rows 10-11.

So as player falls past col 15, they overlap row 11 col 15 (E) only when y > 324 (top of bbox below row 11 top).

Hmm wait, exit at row 11 col 15 (E tile). Player bbox [y, y+28]. erMin = floor(y/32), erMax = floor((y+27)/32).

For player to overlap row 11 (y [352, 384]), need y+27 >= 352, so y >= 325.

At y=325, bbox [325, 353]. erMin = 10, erMax = 11. Rows 10 and 11.

So at y=325 (player just stepped off platform), player overlaps row 11 (col 15) including E.

Hmm but the player is at col 15 just after stepping off. Player x = 15*32 = 480. Player x range [480, 500]. Col 15 x range [480, 512]. Overlap ✓.

Player at y=325 overlaps row 11 col 15 (E). Exit triggers.

OK so if I put E at row 11 col 15, player walking onto col 15 (off the platform) triggers exit.

But the player must have trophy. Otherwise, message says "Exit locked".

Actually wait, if E is at row 11 col 15 and player at y=325 walks onto col 15, the bbox overlaps E. Exit triggers (if trophy) or shows message.

But player is in mid-air (just stepped off). They continue to fall. They fall through row 11 col 15 (E is passable).

Player eventually falls into row 13 (ground). Lands back on ground.

Or, if E is at row 11 col 15 and player jumps over it... no, let me think.

Actually, putting E at row 11 col 15 (a passable tile in the air) is fine. Player jumps up, overlaps with E. Trigger exit.

Hmm but E at row 11 col 15 means the row 11 platform has a gap at col 15. Player walking on row 11 platform at col 14, then walks to col 15 - falls. Triggers exit during fall.

OK that works. Player needs to be deliberate about jumping onto col 15 (off the platform edge).

Or, player can jump up to col 15 row 11 area (in midair). Exit triggers.

Hmm, this is weird. Let me put E at row 10 col 15 instead (above the platform).

Row 10: "...............E........"
= 15 + 1 + 9 = 25 ✓

E at col 15.

Player on row 11 col 15 (platform). Player y range [324, 352]. erMin=10, erMax=10. Row 10.

Exit at row 10 col 15. ecMin=15, ecMax=15. Overlap ✓.

So player just standing on row 11 col 15 (platform) overlaps with exit at row 10 col 15. ✓

But where does the player walk onto col 15? Row 11 cols 12-15. Player walks to col 15 (right edge). Stands there. Overlaps exit.

Or player walks onto col 14, then col 15. ✓

OK let me use E at row 10 col 15.

Hmm but the player walking on row 11 col 15 - what's the visual? The platform at col 15 is solid. The exit at row 10 col 15 is in the air above. Player stands on col 15 platform, with exit floating above their head.

When player walks onto col 15, they automatically overlap exit (since exit is right above). Trigger exit.

OK that works. Let me update.

Row 10: "...............E........" (15 dots + E + 9 dots = 25)
Row 11: "....####....####........." (4 + 4 + 4 + 4 + 9 = 25)

Both 25 chars.

Now path:
1. From trophy, drop down.
2. Navigate to row 11 col 15.
3. Walk onto col 15 (overlap exit). Win.

Path:
- Drop from row 2 col 4 to row 5 (3 tiles down, 0 horizontal). Falls 96 px. t = sqrt(2*96/1700) = 0.34s. Lands on row 5.
- Walk to col 7 on row 5.
- Jump to row 7 cols 8-11. From col 7 to col 8-11. 2 down, 1-4 right.
  - With jump: vy=-560. t when y=196+64 = 260 (row 9 platform top - 28). Actually wait, row 7 platform top = 7*32 = 224. Player y on row 7 = 196. Row 9 platform top = 9*32 = 288. Player y on row 9 = 260. Difference = 64.
  - Hmm I want to land on row 7, not row 9. Let me recompute.
  - Row 5 platform top = 5*32 = 160. Player y on row 5 = 132.
  - Row 7 platform top = 7*32 = 224. Player y on row 7 = 196. Difference = 64. OK 2 tiles down.
  - Jump: vy=-560. t when y = 196: -560*t + 850*t² = 64. t² = 64/(850) when -560*t is small. Approximately 0.34s. Then check -560*0.34 + 850*0.34² = -190 + 98 = -92 (going up still). Hmm.
  - Quadratic: 850*t² - 560*t - 64 = 0. t = (560 + sqrt(560² + 4*850*64))/(2*850) = (560 + sqrt(313600 + 217600))/1700 = (560 + sqrt(531200))/1700 = (560 + 728.8)/1700 = 1288.8/1700 = 0.758s.
  - In 0.758s, horizontal = 180*0.758 = 136 px = 4.25 tiles. From col 7 to col 11.25. Lands on col 11 of row 7. ✓
- Walk to col 11 on row 7.
- Jump down to row 9 right (cols 14-18). From col 11, jump right-down. 2 down, 3-7 right. Avoid fire at col 13.
  - Jump: t for y from 196 to 260 = 0.758s. Horizontal = 4.25 tiles. Col 11 → col 15.25. Lands on row 9 right. ✓
- Walk to col 18 on row 9 (avoid fire at col 13).
- Jump down to row 11 (cols 12-15). From col 18 to col 12-15. 2 down, -6 to -3 left.
  - Jump: t = 0.758s. Horizontal = -4.25 tiles. Col 18 → col 13.75. Lands on row 11 col 13-14. ✓
- Walk to col 15 on row 11.
- Stand on col 15 (overlaps exit at row 10 col 15). Win.

Hmm wait, when player jumps from col 7 to col 11.25 on row 7, they pass through row 9 right area (cols 14-18)? No, player x is around col 11, not col 14-18.

Player at col 11 row 7 (just landed). Enemy on row 9 cols 14-18. No interaction.

OK that works.

Now, with the enemy patrolling on row 9 cols 14-18, the player jumping from row 7 col 11 to row 9 might land on enemy.

Step 5: Player jumps from row 7 col 11 to row 9 col 15.25 (approx). Enemy at row 9 cols 14-18. If enemy is at col 14-15, player overlaps with enemy. Die.

So player needs to time the jump so enemy is at far end (col 18) when player lands.

Or player can walk off row 7 (without jumping) to land on row 9 right at some col.

Walking off: player at col 11 row 7. Walks right (vx=180). Falls off row 7 (cols 8-11). At col 12, no platform below row 7 (row 8 empty, row 9 left is cols 4-7, fire at col 13, right is cols 14-18). 

Player at col 12 row 8 (midair). Falls. At col 13 (fire), dies.

Hmm player can't walk off to the right without jumping.

Player can walk off row 7 to left: at col 7 (just left of platform). Falls. Lands on row 9 left platform cols 4-7 (at col 7).

OK player can go down-left or down-right by jumping.

If player wants to avoid enemy, they should jump at a time when enemy is at far end (col 18).

Or, easier: make enemy slow so timing is easy.

Or, put enemy in a less critical location.

Let me put enemy on row 7 cols 8-11. Player must traverse this platform to reach trophy. But player doesn't need to traverse row 7 (they can go through other platforms).

Actually let me put enemy on row 5 cols 4-7. Player needs to go through row 5 to reach row 2 (trophy).

Hmm but player could go around row 5 by other paths.

Actually let me check the path again. The only way to reach row 2 (trophy) is via row 5 cols 4-7. So putting enemy there makes sense.

But wait, enemy on row 5 cols 4-7. Player at row 11 cols 4-7 jumps up to row 9 cols 4-7, then to row 7 cols 8-11, then to row 6 cols 7-10, then to row 5 cols 4-7. Player is on row 5 at some col.

If enemy is at row 5 cols 4-7, player walking on row 5 might collide with enemy.

OK let me put enemy on row 7 cols 8-11. Player must pass through row 7 to go from row 9 to row 6 to row 5.

If enemy is at row 7 cols 8-11, player jumping from row 9 to row 7 might land on enemy.

Let me put enemy on row 9 left cols 4-7. Player jumps from row 11 to row 9 to go up. They land at row 9 cols 4-7. Enemy might be there.

Hmm, all paths have potential enemy encounters. Let me just put enemy on one platform and make player time their jumps.

Final decision: enemy on row 9 right cols 14-18, patrol speed 50 px/s. Player needs to time jumps from row 7 to row 9 right (and from row 9 right to row 11).

OK let me commit to this design.

Actually let me reconsider the enemy. Let me put it on row 11 right cols 12-15. Player must pass through row 11 right to reach exit. Enemy is there.

Player on row 9 right jumps down to row 11 right. Enemy patrolling there.

Or put enemy on row 7 cols 8-11. Player uses row 7 to navigate up.

You know what, let me just put enemy on row 9 cols 14-18. Player path passes through this. They need to time jumps.

Or let me simplify: put enemy on a platform where it doesn't interfere with main path but is visible.

Put enemy on row 5 cols 4-7 (top left, near trophy). Player visits row 5 to grab trophy. Might encounter enemy.

Or put enemy on row 11 cols 12-15 (where exit is). Player visits row 11 to reach exit. Might encounter enemy.

Let me put enemy on row 11 cols 12-15, patrol speed slow.

When player jumps from row 9 right to row 11 right, lands at col 13.75. Enemy patrolling col 12-15. Player might collide.

OK so player must time it.

Let me just put enemy on row 9 cols 14-18. Same thing.

Alright, let me finalize. Enemy on row 9 right, patrolling slowly.

Final code coming up.

Actually wait, let me reconsider one more time. The exit needs to be triggered by the player. Let me make sure player can definitely reach the exit tile.

OK with exit at row 10 col 15, player just stands on row 11 col 15 (platform) to trigger.

Let me also double check: Player on row 11 col 15. Player x = 15*32 = 480. Player y = 11*32 - 28 = 324. Player bbox [480, 324, 20, 28] = [480, 324] to [500, 352].

Exit at row 10 col 15: x range [480, 512], y range [320, 352].

Overlap: x [480, 500] ∩ [480, 512] = [480, 500] ✓. y [324, 352] ∩ [320, 352] = [324, 352] ✓.

So player on row 11 col 15 overlaps exit at row 10 col 15. ✓

Player walks onto col 15 from col 14 (platform). Triggers exit. ✓

Player can also walk onto col 14, 13, 12, then back to 15. All overlap.

Great.

Let me also verify trophy:
Trophy at row 1 col 4. Platform at row 2 cols 4-7. Player stands on row 2 col 4. Player y = 36. Player bbox [128, 36] to [148, 64].

Trophy at row 1 col 4: x [128, 160], y [32, 64].

Overlap: x [128, 148] ∩ [128, 160] = [128, 148] ✓. y [36, 64] ∩ [32, 64] = [36, 64] ✓.

So player on row 2 col 4 overlaps trophy at row 1 col 4. ✓



OK now let me write the final code.

Wait, I realized I might have a small issue with the hazard check. The player walking on ground at col 1 has bottom at y=416. Row 13 ground top is at 416. Player is just above.

If player walks right to col 4 (water), player's bbox overlaps col 4 row 13 (W). Die.

That's expected - walking into water = die.

But if player jumps over water, they're in the air. Their bbox might still overlap water tile momentarily. Let me check.

Player at col 3 row 13, jumps up-right. After small time, player x increases. Player x range [3*32+2, 4*32-2] when x=98 (col 3.06), [100, 132] when x=100 (col 3.125). Hmm let me compute more carefully.

Player at col 3 x = 96, jumps with vx=180, vy=-560. At t=0.1s, x = 96 + 18 = 114, y = 388 - 56 + 8.5 = 340.5.

Player bbox [114, 340.5] to [134, 368.5].

Water tile at col 4 row 13: x [128, 160], y [416, 448].

Player bbox y [340.5, 368.5] doesn't overlap water y [416, 448]. No contact. ✓

At t=0.2s, x = 96 + 36 = 132, y = 388 - 112 + 34 = 310. Player bbox [132, 310] to [152, 338]. y [310, 338], not overlap with water y [416, 448].

At t=0.5s, x = 96 + 90 = 186, y = 388 - 280 + 212.5 = 320.5. Player bbox [186, 320.5] to [206, 348.5]. x doesn't overlap with col 4 [128, 160]. No contact.

Player lands at col 5+ on row 13 (after jump arc). Doesn't touch water.

OK the jump over water works. Player doesn't touch water during jump.

But wait, what if player jumps too low or doesn't jump high enough? Player might skim over water. Let me check.

If player walks right without jumping, player x increases. At col 4 x=128, player overlaps water. Die.

So player must jump. OK expected behavior.

Alright, code time.

```javascript
// Final level design
const LEVEL_STR = [
  ".........................",  // 0
  "....T....................",  // 1: trophy
  "....####................",  // 2: cols 4-7 (under trophy)
  ".........................",  // 3
  ".........................",  // 4
  "....####.................",  // 5: cols 4-7
  ".......####..............",  // 6: cols 7-10
  "........####.............",  // 7: cols 8-11
  ".........................",  // 8
  "....####.....F#####......",  // 9: cols 4-7, fire 13, cols 14-18
  "...............E........",  // 10: exit col 15
  "....####....####.........",  // 11: cols 4-7, 12-15
  ".........................",  // 12
  "####W##########..#####...",  // 13: water col 4, ground cols 0-3, 5-16, 20-23
  "####W##########..#####...",  // 14
];
```

Let me verify once more:
Row 10: "...............E........" - 15 dots + E + 9 dots = 25 ✓
Row 11: "....####....####........." - 4 + 4 + 4 + 4 + 9 = 25 ✓

OK.

Now let me write the code. I'll make it a single HTML file.

Actually let me also double check row 6: ".......####.............." - 7 dots + 4 hashes + 14 dots = 25 ✓

Wait, that's ".......####.............."
7 dots: . . . . . . .
4 hashes: # # # #
14 dots: . . . . . . . . . . . . . .
Total: 7 + 4 + 14 = 25 ✓

OK.

Now let me write the final HTML.

I want to think about a few more things:
1. Player visual: blue character with face
2. Enemy visual: purple creature with eyes
3. Trophy visual: golden cup
4. Exit visual: door (changes color when trophy collected)
5. Background: dark blue with stars
6. Solid blocks: brick pattern

Let me write it.

Also, I should add a brief message when the level starts.

Let me also think about the "Restart" button. It should work via mouse click and via 'R' key.

OK let me write the full HTML now.

Hmm one issue: when player falls into a gap (e.g., cols 15-16 ground gap at row 13), they fall off screen. Need to detect "fell off bottom" and die.

I have:
```javascript
if (player.y > H) {
  setStatus('lost');
  showMessage('You fell out of the world! Press R to restart.', 9999);
  return;
}
```

OK.

Let me also handle the case where the player starts the game and the message timer fires. I want the initial message to stay visible.

Actually I set messageTimer = 0 initially. Then update() decrements if > 0. So no message displayed after a while.

Let me set initial message and a long timer.

Actually I do `msgEl.textContent = 'Use arrow keys or WASD. Space to jump.'` in buildLevel. That sets the text. Timer 0 means after timer expires, message clears. But if timer starts at 0, message never clears from update.

Wait, let me re-read my update:
```javascript
if (messageTimer > 0) {
  messageTimer -= dt;
  if (messageTimer <= 0) {
    message = '';
    if (state === 'playing') msgEl.textContent = 'Find the trophy, then reach the exit.';
  }
}
```

If messageTimer = 0, the if block doesn't execute. Message stays as set in buildLevel.

Good.

OK let me write the full code.

Actually wait, in my code I have `message = ''` and then `msgEl.textContent = '...'`. Let me trace:

buildLevel() sets message = '' (empty), messageTimer = 0. msgEl.textContent = 'Use arrow keys...'.

Update: if messageTimer > 0, decrement and clear if expired. Initial messageTimer is 0, so no update. Message stays.

showMessage(text, duration) sets message = text, messageTimer = duration, msgEl.textContent = text.

After duration expires, message clears (timer decrements in update).

OK.

Let me think about the controls display. The prompt says "Display the controls". I have a panel with controls listed. ✓

Let me also add WASD and arrow keys both work.

OK let me finalize.

One concern: in my moveX/moveY, I check the new position after moving. If collision, push out. But what if the new position is already overlapping a solid? Like if the player is inside a solid (shouldn't happen but just in case), they get pushed out.

For the player starting on top of ground: player y = 13*32 - 28 = 388. Player bottom at 416 = row 13 top. Player doesn't overlap row 13 ground.

In moveX with dx=0, no movement. Player stays.

In moveX with dx=10, player x = 96+10 = 106. Player bbox [106, 388] to [126, 416]. Check tiles. Col 3 row 13 is solid (ground). Player bbox doesn't overlap col 3 row 13 (player x in col 3 [96, 128], tile at col 3 [96, 128]). Wait player x range [106, 126] and col 3 tile x [96, 128]. Overlap [106, 126]. ✓

Player y range [388, 416]. Row 13 tile y [416, 448]. Overlap [416, 416]. Just touching.

Collision check: `right > tileLeft && left < tileRight && bottom > tileTop && top < tileBottom`. 
right=126, tileLeft=96. 126>96 ✓
left=106, tileRight=128. 106<128 ✓
bottom=416, tileTop=416. 416>416? No, equal. So no collision.

Hmm, just touching (bottom == tileTop) doesn't count as collision. So player can slide along the ground.

If player walks right and player y = 388 (above ground), no collision.

If player walks right and player y = 389 (slightly lower), bottom = 417 > tileTop 416. Collision. Player pushed up.

Wait, the player should always be on top of the ground, not slightly below. The y is set so bottom = tileTop. So no collision in moveX (which doesn't change y).

For moveY with dy>0 (falling), player falls. At some point bottom > tileTop (player enters tile). Collision. Pushed up.

OK that works.

Let me also think about the case where player jumps and hits ceiling. moveY with dy<0 (moving up). If player's top hits a tile's bottom, player pushed down.

In my code:
```javascript
if (dy > 0) {
  entity.y = tileTop - entity.h;
  entity.onGround = true;
} else {
  entity.y = tileBottom;
}
```

For dy<0 (moving up), entity.y = tileBottom. This pushes player down. ✓

OK code is correct.

Now, the trophy at row 1 col 4. Player jumps to row 2 col 4 (lands on row 2 platform). Player y = 36. Trophy at row 1 [32, 64]. Player top at 36 is in row 1 [32, 64]. Player bottom at 64 is at row 1 bottom.

In hazard check (fire/water): tiles at (col 4, row 1) is TROPHY (not fire/water). No hazard. ✓

In trophy check: tile at (col 4, row 1) is TROPHY. Collect. ✓

Player walks around row 2 platform. When player overlaps trophy tile (any of row 2 cols 4-7 standing), trophy is collected. ✓

OK code looks right. Let me finalize.

Actually wait, I should test if player can reach col 4 row 2.

Player on row 5 cols 4-7. Jumps up. With vy=-560, max height = 98 px. From row 5 platform (player y=132), max y = 132 - 98 = 34. That's row 1 area.

So player can jump from row 5 to row 2 directly! 3 tiles vertical jump, 0 horizontal (if not moving).

Time to peak: 0.33s. At peak, player x unchanged (if vx=0). Player y = 34.

But player needs to clear the row 2 platform edge to land on it. Player's bottom needs to reach row 2 top (y=64) and below.

At t when player y+28 = 64 (player bottom at row 2 top): player y = 36. From y=132, need y=36: vy*t + 0.5*g*t² = -96. With vy=-560, g=1700: -560*t + 850*t² = -96. 850*t² - 560*t + 96 = 0. t = (560 - sqrt(560² - 4*850*96))/(2*850) = (560 - sqrt(313600 - 326400))/1700 = (560 - sqrt(-12800))/1700.

Negative discriminant! No solution. Player can't decelerate fast enough.

Hmm. Let me recompute. Actually wait, at peak, vy=0. Then player falls. After peak, vy>0. Player y increases.

At peak (t=0.33s), player y = 34. After peak, player y increases.

Player reaches y=36 (top of row 2 area, just above row 2 top = 64): going down. y=36 when... let me solve.

At peak (y=34, vy=0). Player needs y=36 to land on row 2. Difference = 2 px.

Using y(t) = 34 + 0.5*1700*(t-0.33)². Set y=36: 0.5*1700*(t-0.33)² = 2. (t-0.33)² = 4/850 = 0.0047. t-0.33 = 0.069. t = 0.4s.

So player lands on row 2 at t=0.4s after jump start. At that time, player has bounced off "ceiling" or just barely made it.

Wait, player y=34 is in row 1. Player top at 34, bottom at 62. Row 1 is y [32, 64]. Player fits in row 1.

If player jumped from row 5 col 5, they reach y=34 (row 1 area). They have vy=0 at peak. Then start falling.

When does player y become 36? 2 px below peak. As calculated, t=0.4s.

Player bottom at 36+28=64. Row 2 top is at 64. So player bottom touches row 2 top.

If row 2 is solid at col 5 (it's #), player lands on row 2. ✓

Great. So player can jump from row 5 col 5 to row 2 col 5.

But what about horizontal? If player jumps with vx=180 (running right), they move right while jumping. Player x changes from 5*32 = 160 to 160 + 180*0.4 = 232. Col = 7.25. Lands on col 7 of row 2 (within cols 4-7 platform). ✓

So player can jump from row 5 col 5 (or col 7) to row 2 directly.

Hmm wait, actually, my player can jump higher than I thought. Let me re-verify.

vy = -560. Max height = vy²/(2g) = 560²/(2*1700) = 313600/3400 = 92.2 px = 2.88 tiles.

So player jumps max 2.88 tiles. From row 5 (player y=132), max y = 132 - 92.2 = 39.8. That's row 1 area (y < 64).

Player lands on row 2 (top at 64). Player y when landing = 36 (bottom 64). So player needs to reach y=36, which is 3 px above peak (39.8). Wait, 39.8 > 36. So player doesn't reach y=36.

Hmm. Peak is at y=39.8. Player needs y <= 36 to land on row 2.

Actually, player y is the TOP of the player. Player bottom = player y + 28. For player bottom to reach row 2 top (y=64), player y = 64-28 = 36.

Player y >= 36 means player doesn't reach row 2 (since min y during jump is 39.8 > 36).

So player CAN'T jump from row 5 to row 2 in a single jump. They need an intermediate.

Hmm. Let me adjust.

Option 1: Increase jump velocity. JUMP_VEL = -620. Max height = 620²/(2*1700) = 384400/3400 = 113 px = 3.5 tiles.

Player from row 5 (y=132) max y = 132 - 113 = 19. Lands on row 2 (y=36): 19 < 36 ✓. Player can jump.

But too high jump might let player overshoot platforms.

Option 2: Reduce gravity. GRAVITY = 1300. Max height = 560²/(2*1300) = 313600/2600 = 120.6 px = 3.77 tiles.

Player from row 5 max y = 132 - 120.6 = 11.4. Lands on row 2 (y=36): 11.4 < 36 ✓.

With lower gravity, jump feels floaty. But works.

Let me try JUMP_VEL=-600, GRAVITY=1500. Max height = 600²/(2*1500) = 360000/3000 = 120 px = 3.75 tiles.

Player from row 5 (y=132) max y = 132 - 120 = 12. Player y=36: 12 < 36 ✓. Player can reach row 2.

Time to peak: 600/1500 = 0.4s. From peak, fall back. Time to reach y=36: (36-12)/0.5 = need time to fall 24px. 0.5*1500*t² = 24. t² = 0.032. t = 0.18s. Total time = 0.4 + 0.18 = 0.58s.

In 0.58s, horizontal = 180*0.58 = 104 px = 3.25 tiles. Player from col 5 to col 8.25. Lands on col 8 of row 2 (which is empty since row 2 cols 4-7). Misses platform.

Hmm.

OK the issue is that with high jump, player can reach row 2 but at a horizontal position that misses the platform.

Let me use a different approach. Make row 2 platform longer:

Row 2: "....####....####........" → "....############........" - cols 4-15.

Let me count: 4 + 12 + 9 = 25 ✓.

So row 2 platform cols 4-15.

Now player from row 5 jumps to row 2. With vx=180 (running right), lands at col 8.25 on row 2 (within cols 4-15). ✓

OK let me make row 2 platform longer.

But wait, this changes the level layout. Trophy at row 1 col 4 is on the left edge of row 2 platform. Player can walk on row 2 from col 4 to col 15.

Also, where's the exit? Exit at row 10 col 15. Player from row 2 walks right to col 15, then drops down to row 5 or row 6 or row 7...

Actually let me think about the path. Player wants trophy (row 1 col 4) and exit (row 10 col 15). They're at opposite ends of the platform row 2.

Path:
1. Start at col 1 row 13 ground.
2. Jump to row 11 left cols 4-7. 
3. Jump up to row 9 left cols 4-7.
4. Jump up to row 7 cols 8-11.
5. Jump up to row 6 cols 7-10.
6. Jump up to row 5 cols 4-7.
7. Jump up to row 2 cols 4-15. Land somewhere on row 2.
8. Walk left to col 4 (trophy).
9. Walk right on row 2 to col 15.
10. Drop down to row 5 col 15? But row 5 only has cols 4-7. Drop further.
11. Drop down to row 6 col 15? Only cols 7-10. Drop further.
12. Drop down to row 7 cols 8-11. From col 15 row 2, fall down. Player x stays at col 15 if no horizontal. Lands on row 7 col 15 (empty). Falls further.
13. Drops to row 9 col 15 (right platform cols 14-18). Lands. ✓
14. Walk to col 18 on row 9.
15. Drop down to row 11 cols 12-15. Lands at col 15 on row 11.
16. Walk to col 15 (overlap exit). Win.

Hmm steps 10-12 are tricky. Player falls from row 2 col 15 down. No platform at col 15 row 5, 6. Row 7 col 15 empty. Row 9 col 15 platform ✓.

So player falls from row 2 col 15 to row 9 col 15. 7 tiles down. Long fall but OK.

Alternatively, player walks on row 2 to col 7 (right edge of left part of row 2). Wait, row 2 cols 4-15 is all platform. So player walks on it.

Hmm let me think. After grabbing trophy at row 1 col 4, player wants to go right. They can walk along row 2 platform from col 4 to col 15. Then drop down.

OK that works.

Actually, I realize having row 2 cols 4-15 means the platform is huge. Player can just walk across. The trophy is at col 4 (left edge).

Alternative: keep row 2 cols 4-7 (small platform). Player jumps from row 5 to row 2 directly, but only if jump is precise.

Let me try increasing jump strength instead.

JUMP_VEL = -620, GRAVITY = 1600. Max height = 620²/(2*1600) = 384400/3200 = 120 px = 3.75 tiles.

From row 5 (y=132), max y = 12. Lands on row 2 (y=36): 12 < 36 ✓.

Time to peak: 620/1600 = 0.39s. From peak, fall to y=36. 24 px fall. t = sqrt(2*24/1600) = 0.17s. Total = 0.56s.

In 0.56s, horizontal = 180*0.56 = 101 px = 3.16 tiles. From col 5 to col 8.16. Row 2 cols 4-7. Misses.

Player from col 4 jumps straight up (vx=0). Lands at col 4 row 2. ✓

Player from col 7 jumps straight up. Lands at col 7 row 2. ✓

If player jumps from col 5 with vx=0, lands at col 5 row 2. ✓

OK if player jumps vertically (not running), they can reach row 2. Good.

Let me design assuming player can jump vertically to reach row 2.

Path:
1. Start at col 1 row 13.
2. Jump over water at col 4. Land at col 5-7 on ground.
3. Jump up to row 11 left cols 4-7. Land at col 5-7 row 11.
4. Jump up to row 9 left cols 4-7. Land at col 4-7 row 9.
5. Jump up to row 7 cols 8-11. Land at col 8-11 row 7.
6. Jump up-left to row 6 cols 7-10. Land at col 7-9 row 6.
7. Jump up-left to row 5 cols 4-7. Land at col 4-6 row 5.
8. Jump straight up to row 2 cols 4-7. Land at col 4-7 row 2.
9. Walk to col 4 row 2, grab trophy.
10. Jump down to row 5. Land at col 4-7 row 5.
11. Walk to col 7 row 5.
12. Jump down-right to row 7 cols 8-11. Land at col 8-11 row 7.
13. Walk to col 11 row 7.
14. Jump down-right to row 9 right cols 14-18. Land at col 14-18 row 9.
15. Walk to col 18 row 9.
16. Jump down-left to row 11 cols 12-15. Land at col 12-15 row 11.
17. Walk to col 15 row 11 (overlap exit). Win.

OK this all works with appropriate jump velocities.

Let me use JUMP_VEL=-620, GRAVITY=1600.

Hmm but with stronger jump, player can jump higher from ground. Let me verify ground jump:
From ground (y=388), jump with vy=-620, vx=0. Max y = 388 -

Let me build a Dangerous Dave-inspired tile-based platformer. I'll create a complete, self-contained index.html with:

1. Tile-based level with platforms
2. Trophy collectible
3. Exit door
4. Fire and water hazards
5. At least one patrolling enemy
6. Player physics: gravity, landing, wall collision, jump only when grounded
7. States: playing, dead, won
8. Restart functionality
9. Controls display
10. All procedural graphics (no external assets)

Let me design the level first:
- 16x12 tiles, each 40px = 640x480 canvas (or larger)
- Use 1200x800 viewport but canvas in middle
- Tile size 48px would give 25x16 tiles on 1200x768

Let me use canvas of about 960x600 with 48px tiles (20 cols x 12.5 rows). Actually let me do 48x36 tiles or similar. Let me think more carefully:

Viewport: 1200x800
Canvas: 960x600
Tile size: 48px
Cols: 20
Rows: 12.5 - let's do 12 rows = 576 height

Level layout - tile codes:
- 0 = air
- 1 = solid platform
- 2 = fire hazard
- 3 = water hazard
- 4 = trophy
- 5 = exit door
- 6 = player start (just air at start pos)
- 7 = enemy spawn (air with enemy)

Let me sketch a level:
Row 0-9 (top to bottom):

Row 0:  . . . . . . . . . . . . . . . . . . . .
Row 1:  . . . . . . . . . . . . . . . . . . . .
Row 2:  . . . . . . . . . . . . . . . . . . . .
Row 3:  . . . . . . . . . . . . . . . . . . . .
Row 4:  . . . . . . . . . . . . . . . . . . . .
Row 5:  . . . . . . . . . . . . . . . . . . . .
Row 6:  . . . . . . . . . . . . . . . . . . . .
Row 7:  . . . . . . . . . . . . . . . . . . . .
Row 8:  . . . . . . . . . . . . . . . . . . . .
Row 9:  . . . . . . . . . . . . . . . . . . . .
Row 10: . . . . . . . . . . . . . . . . . . . .
Row 11: # # # # # # # # # # # # # # # # # # # #

But I need platforms, gaps, hazards, trophy, exit, enemies. Let me design more thoughtfully.

Cols 0-19, Rows 0-11
Ground at row 11

Let me build:
```
Row 0:  . . . . . . . . . . . . . . . . . . . .
Row 1:  . . . . . . . . . . . . . . . . . . . .
Row 2:  . . . . . . . . . . . . . . . . . . . .
Row 3:  . . . . . . . . . . . . . . . . . . . .
Row 4:  . . . . . . . . . . . . . . . . . . . .
Row 5:  . . . . . . . . . . . . . . . . . . . .
Row 6:  . . . . . . . . . . . . . . . . . . . .
Row 7:  . . . . . . . . . . . . . . . . . . . .
Row 8:  . . . . . . . . . . . . . . . . . . . .
Row 9:  . . . . . . . . . . . . . . . . . . . .
Row 10: . . . . . . . . . . . . . . . . . . . .
Row 11: # # # # # # # # # # # # # # # # # # # #
```

Need platforms. Let me think about a fun level:

Player starts at (1, 10). Need platforms to navigate. Trophy somewhere high or tricky. Exit at the end.

Let me design:
- Ground full row 11 except gaps for pits? No, let's keep ground solid but add elevated platforms
- Fire hazards in gaps
- Water in some lower areas

Actually for simplicity let me do:
- Row 11 = full ground
- Platforms at various heights
- Fire on top of some ground sections
- Water pit (like a pool) somewhere

Let me redo with hazards included:

20 columns, 12 rows. Indices col 0-19, row 0-11.

Plan:
- Player start: col 1, row 10 (above ground)
- Ground row 11: solid except col 8 (water pit)
- Floating platform 1: cols 3-5, row 8
- Floating platform 2: cols 7-9, row 7 (over water)
- Floating platform 3: cols 11-13, row 8
- Trophy on platform 3, col 12
- Floating platform 4: cols 14-17, row 9
- Exit at col 18, row 10 (door above ground)
- Fire on ground at col 6 and col 16
- Enemy patrols platform 2 area or platform 3 area

Wait, that may not be physically reachable. Let me think again.

Cols 0..19
Heights: row 0 = top, row 11 = bottom (ground)

Player jump: I need to figure out physics. Tile size 48px, so gravity ~0.6 px/frame, jump velocity -12 px/frame. Player can clear ~2 tiles horizontally and reach ~4 tiles high maybe. Need to tune.

Let me try a layout that's reachable:
- Start at (col=1, row=10), ground at row=11
- Need to reach trophy at higher elevation, then exit

Simpler: Trophy and exit both at ground level on far side. Hazards along the way.

Level:
```
Row 0:  . . . . . . . . . . . . . . . . . . . .
Row 1:  . . . . . . . . . . . . . . . . . . . .
Row 2:  . . . . . . . . . . . . . . . . . . . .
Row 3:  . . . . . . . . . . . . . . . . . . . .
Row 4:  . . . . . . . . . . . . . . . . . . . .
Row 5:  . . . . . . . . . . . . . . . . . . . .
Row 6:  . . . . . . . . . . . . . . . . . . . .
Row 7:  . . . . . . . . . . . . . . . . . . . .
Row 8:  . . . . . . . . . . . . . . . . . . . .
Row 9:  . . . . . . . . . . . . . . . . . . . .
Row 10: . . . . . . . . . . . . . . . . . . . .
Row 11: # # # # # # # # # # # # # # # # # # # #
```

Where # is solid, . is air. Hazards not on the tile grid - put them as decorations or as sub-tile positions? Actually they need to be solid collision for the player but kill on touch.

Let me put hazards as tile types in the grid but they don't block movement like platforms - they kill the player. So:
- 1 = solid (platform/wall)
- 2 = fire hazard (passable, deadly)
- 3 = water hazard (passable, deadly)
- 4 = trophy (passable, collectible)
- 5 = exit (passable, completes level)
- 0 = empty air

Then have separate enemy entities (not in grid).

Let me design a more interesting level with vertical movement needed:

```
Col:    0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
Row 0:  . . . . . . . . . . . . . . . . . . . .
Row 1:  . . . . . . . . . . . . . . . . . . . .
Row 2:  . . . . . . . . . . . . . . . . . . . .
Row 3:  . . . . . . . . . . . . . . . . . . . .
Row 4:  . . . . . . . . . . . . . . . . . . . .
Row 5:  . . . . . . . . . . . . . . . . . . . .
Row 6:  . . . . . . . . . . . . . . . . . . . .
Row 7:  . . . . . . . . . . . . . . . . . . . .
Row 8:  . . . . . . . . . . . . . . . . . . . .
Row 9:  . . . . . . . . . . . . . . . . . . . .
Row 10: . . . . . . . . . . . . . . . . . . . .
Row 11: # # # # # # # # # # # # # # # # # # # #
```

Add platforms:
```
Col:    0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
Row 0:  . . . . . . . . . . . . . . . . . . . .
Row 1:  . . . . . . . . . . . . . . . . . . . .
Row 2:  . . . . . . . . . . . . . . . . . . . .
Row 3:  . . . . . . . . . . . . . . . . . . . .
Row 4:  . . . . . . . . . . . . . . . . . . . .
Row 5:  . . . . . . . . . . . . . . . . . . . .
Row 6:  . . . . . . . . . . . . . . . . . . . .
Row 7:  . . . . . . . . . . . . . . . . . . . .
Row 8:  . . . . . . . . . . . . . . . . . . . .
Row 9:  . . 1 1 . . . . . . . . 1 1 . . 1 1 . .
Row 10: . . . . . . . . . . . . . . . . . . . .
Row 11: # # # # # # # # # # # # # # # # # # # #
```

Hmm. Let me design more thoughtfully. The Dangerous Dave style has:
- Indoor/cave/space themes
- Multi-tier platforms
- Doors
- Items to collect

Let me make a simple multi-tier level:

Tile size 48, canvas 960x576 (20 cols x 12 rows).

Let me redesign:
- Player start: col 1, row 10 (sitting on ground at row 11)
- Ground: row 11, all solid
- Need: trophy (must be reached), exit (must be reached with trophy)
- Hazards: fire, water
- Enemy patrols

Layout idea:
```
Row  0: . . . . . . . . . . . . . . . . . . . .
Row  1: . . . . . . . . . . . . . . . . . . . .
Row  2: . . . . . . . . . . . . . . . . . . . .
Row  3: . . . . . . . . . . . . . . . . . . . .
Row  4: . . . . . . . . . . . . . . . . . . . .
Row  5: . . . . . . . . . . . . . . . . . . . .
Row  6: . . . . . . . . . . . . . . . . . . . .
Row  7: . . 1 1 1 . . . . . . . . . 1 1 1 1 1 .
Row  8: . . . . . . . . . . . . . . . . . . . .
Row  9: . . . . . . 1 1 1 . . . . . . . . . . .
Row 10: . . . . . . . . . . . . . . . . . . . .
Row 11: # # # # # # # # # # # # # # # # # # # #
```

Where col 18 is exit, row 10 (door area, no ground at col 18 — wait ground is at row 11 full).

Let me make exit a special tile that replaces ground at exit position:

Let me place:
- Ground row 11, all # except: col 8 (water pool — three tiles wide: cols 7,8,9) 
  Actually water on the ground is the same as water anywhere — touches = die.
- Player start col 1, row 10
- Floating platform cols 2-4 at row 7
- Floating platform cols 13-17 at row 7 (with trophy at col 14)
- Fire on ground at col 5 (1 tile)
- Fire on ground at col 11 (1 tile)
- Exit door at col 19, row 10 (above ground)
- Water pool at ground cols 7-9

But to get to col 14 (trophy on row 7 platform), player needs to jump up. Platform cols 2-4 row 7 — too far.

Let me try a smaller tile size to allow easier jumping. Or use 32px tiles.

Let me use 40px tiles. Canvas 800x480. Cols=20, Rows=12. 

Actually let me think about jump physics. Player size 32x32 (slightly smaller than tile). 
- Gravity: 0.5 px/frame², max fall 10
- Jump velocity: -11 px/frame
- Move speed: 4 px/frame

Time to peak: 11/0.5 = 22 frames
Height reached: 11²/(2*0.5) = 121 px

With 40px tiles, that's about 3 tiles of jump height. Good.

Horizontal distance in air: ~22 frames * 4px = 88 px = ~2 tiles. So can clear 2-tile gaps.

Let me design with this:

Canvas 800x480, 20x12 grid, 40px tiles.

```
Col:     0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Row  0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  6:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  7:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  8:  .  .  1  1  .  .  .  .  .  .  .  .  1  1  1  1  .  .  .  .
Row  9:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 10:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 11:  #  #  #  #  #  #  #  .  .  .  #  #  #  #  #  #  #  #  #  #
```

Where:
- Row 8 platforms: cols 2-3, cols 12-15
- Ground row 11: full except cols 7-9 (water pool — 3 wide pit)
- Trophy: at col 13 row 7 (above the row 8 platform)
- Exit door: at col 18 row 10 (above ground)
- Fire on ground at col 5
- Enemy patrols cols 13-15 row 8 platform
- Water pit cols 7-9 row 11

Player start: col 0, row 10 (sits on ground at row 11)

To reach trophy at (13, 7):
- Walk right, jump over water pit (cols 7-9, 3 tiles wide). At 4px/frame, 22 frames airtime = 88px. So jump clears 2.2 tiles. 3 tiles pit might be hard.
- Let me make water 2 tiles: cols 7-8. So pit width = 80px (2 tiles), airtime of 80/4 = 20 frames, height at 20 frames = 11*20 - 0.5*20² = 220 - 200 = 20px height. Hmm with 0.5 gravity:
  - At 22 frames velocity = 11 - 0.5*22 = 0 (peak)
  - At 22+22 = 44 frames, back to start height
  - Distance covered = 44 * 4 = 176px = 4.4 tiles
  - So can clear ~4 tile gap with safety

OK 2-tile pit is easy. Let me try 3-tile pit:
- 120px, 30 frames. At 30 frames, y = 11*30 - 0.5*30² = 330 - 450 = -120. Hmm let me redo.
- v0 = -11 (up), gravity +0.5/frame
- y(t) = -11t + 0.25t² (taking up as negative)
- Wait let me redo. y velocity starts at -11 (up), gravity is +0.5 (down) per frame. So:
  - v(t) = -11 + 0.5t
  - y(t) = -11t + 0.25t²
  - Peak when v=0: t=22
  - Total airtime: t=44
  - Horizontal distance: 44 * 4 = 176 px = 4.4 tiles

So with jump speed 4 and jump velocity -11, can clear 4-tile gap. Good.

For climbing up: at peak height y=-121px. To reach a platform 2 tiles up (80px), need y=-80. At y=-80, t = ? -80 = -11t + 0.25t². t² - 44t - 320 = 0. t = (44 - sqrt(1936 + 1280))/2 = (44 - sqrt(3216))/2 = (44 - 56.7)/2. Hmm negative. Let me redo.

-80 = -11t + 0.25t²
0.25t² - 11t + 80 = 0
t² - 44t + 320 = 0
t = (44 ± sqrt(1936 - 1280))/2 = (44 ± sqrt(656))/2 = (44 ± 25.6)/2
t = 9.2 or 34.8

So at 9.2 frames, player reaches height of 80px (2 tiles). At 9.2 frames, horizontal distance = 9.2*4 = 36.8 px. So from edge of platform, player jumps and at 9.2 frames reaches height 80px above, having moved 36.8 px horizontally. So can jump from ground to a 2-tile high platform if it extends at least 1 tile beyond where you start.

If platform is at cols 12-15 row 8 (so top of platform at y=320px), and player is on ground at row 11 (y=440px), need to jump 120px (3 tiles). At y=-120: 
0.25t² - 11t + 120 = 0
t² - 44t + 480 = 0
t = (44 ± sqrt(1936-1920))/2 = (44 ± 4)/2 = 20 or 24

So at 20 frames, height = 120px. Horizontal distance = 80px = 2 tiles. So from ground at col 10, need to reach a platform starting at col 12 (2 tiles gap horizontally, which is fine).

OK so the design works. Let me proceed.

Final layout:
```
Col:     0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Row  0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  6:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  7:  .  .  .  .  .  .  .  .  .  .  .  .  .  T  .  .  .  .  .  .
Row  8:  .  .  P  P  .  .  .  .  .  .  .  .  P  P  P  P  .  .  .  .
Row  9:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 10:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  E  .
Row 11:  #  #  #  #  #  F  #  W  W  W  #  #  #  #  #  #  #  #  #  #
```

Hmm, I have trophy at (13, 7), exit at (18, 10).

To reach trophy (13, 7) from ground (row 11):
- Player must climb onto platform at (12-15, 8), then jump up to (13, 7)
- Platform at row 8 cols 12-15. Player on ground. Walk to col 11, jump up. Player at (col 11, row 11). Need to reach top of platform at y=row8*40=320 (top edge) = row 9 (top of platform row 8). Wait, platform top is the top edge of row 8 tile. So to land on platform, player feet must be at top of row 8 = y=320. Player stands at row 9 (top half) or row 9 (above). Need to jump from y=440 (top of row 11) to y=320 (top of row 8). That's 120px = 3 tiles.
- At height 120px, t=20 frames. Horizontal = 80px = 2 tiles. So from col 11 (player at col 11 means feet at col 11, x=440..480), jump. At t=20, player at x = 440 + 80 = 520 = col 13. Need platform to start at col 12 (x=480), so player lands on col 12-13 area. Good.

After getting trophy, need to reach exit at (18, 10). From (13, 7) with trophy, drop down to ground at col 18 row 10. Player drops from row 7 to row 11. From (13, 7) to (18, 10):
- Walk right on row 7? Row 7 only has trophy at col 13, no platform. Can't walk.
- Drop down to platform row 8 (cols 12-15). Then walk right, drop to ground at col 17 or 18.
- From platform row 8 col 15, jump down-right to exit at row 10 col 18. Distance 3 cols = 120px. Airtime needed: 30 frames. Horizontal 4*30=120px. Good. But during fall, no hazards (fire at col 5, water at cols 7-9 — not in the way).

Actually if player drops from platform row 8 to ground row 11, they pass through row 10 which is air. Exit door is at col 18 row 10, so player needs to be at col 18 row 10 (above ground) when entering exit.

Actually let me reconsider. Exit could be at any position. Player just needs to touch it. So if exit is at col 18 row 10 (above ground, so the door is between row 10 and row 11), the player needs to overlap with exit tile.

If player walks from ground at col 18 to exit... but ground is at row 11, player feet at row 10 (top half of player). Hmm let me redefine.

Let me say player size = 32x32 pixels. Player occupies part of one tile. Collision is based on player bounding box.

To "touch exit", player AABB must overlap exit AABB. If exit is at col 18 row 10-11 (a door filling one tile), player must overlap that tile.

Actually let me make exit tile replace ground at col 18. So row 11 col 18 = exit (instead of solid). Then exit tile is walkable but deadly? No, exit is a goal. So:
- Exit at (18, 11): when player walks onto col 18, they touch exit and complete level.
- But row 11 col 17 is solid, so player can walk from col 17 onto col 18 (exit tile) and complete.

Hmm but if exit is at row 11 (ground), that's just a normal ground tile. Let me make it visually distinct (door graphic).

Actually I want exit door to look like a door. Place it at col 18 row 10 (no platform, just a door floating above ground). Or replace ground at col 18 with exit.

Let me make:
- Exit tile at (col 18, row 11) — replaces the ground there. So ground has a gap at col 18 (player falls? No, exit is solid for collision purposes too, since it's a door).

Actually exit tile should be solid for collision (player can stand on it) and trigger win on touch.

Let me redesign: replace ground at col 18 with exit tile (5). It's solid like ground but triggers win.

But that means the player can just walk onto it. To make it more interesting, let me put the exit a bit higher requiring a jump up:

Place exit at (col 18, row 10), with a small platform underneath... Hmm getting complex.

Let me simplify: replace ground at col 18 with exit (row 11, col 18). It's solid and triggers win.

OK let me proceed:

```
Col:     0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Row  0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  6:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row  7:  .  .  .  .  .  .  .  .  .  .  .  .  .  T  .  .  .  .  .  .
Row  8:  .  .  P  P  .  .  .  .  .  .  .  .  P  P  P  P  .  .  .  .
Row  9:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 10:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 11:  #  #  #  #  #  F  #  W  W  W  #  #  #  #  #  #  #  #  E  #
```

Where:
- # = solid platform/ground
- F = fire hazard (deadly)
- W = water hazard (deadly)
- T = trophy (collectible)
- P = platform (solid)
- E = exit (solid, win on touch)
- . = empty

Trophy at (13, 7) - on top of platform row 8
Exit at (18, 11) - in ground row 11
Fire at (5, 11) - on ground
Water at (7, 11), (8, 11), (9, 11) - pool
Platforms: (2, 8), (3, 8), (12, 8), (13, 8), (14, 8), (15, 8)

Player start: (1, 10) - standing on ground at row 11
Enemy: patrols (13, 7) area (top of platform row 8 cols 12-15)

Wait, I want enemy to be reachable / visible. Let me put enemy on ground patrolling cols 11-14. Or on the top platform.

Actually let me put enemy patrolling platform at row 8 cols 12-15. Enemy on top of platform, walking back and forth.

To reach trophy: climb platform at (12-15, 8), jump up to (13, 7) trophy. After collecting, exit at (18, 11).

Enemy makes this interesting.

OK let me write the code.

Let me also think about rendering. All procedural:
- Player: simple rectangle with eyes, maybe blue
- Solid blocks: brick-like texture
- Fire: animated flames (orange/red flickering)
- Water: blue animated waves
- Trophy: yellow cup shape
- Exit: door shape with "EXIT" or arrow
- Enemy: red creature with eyes
- Background: dark sky/wall pattern

Let me code it up. I'll make a complete polished game.

Key details:
- Canvas 800x480, centered in viewport
- Controls overlay/HUD showing Left/Right/Space
- Game state: playing, dead, won
- Restart button always available
- Message display for states

Let me write this now.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dangerous Dave - Tile Platformer</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #0a0a18 0%, #1a1a2e 100%);
    color: #e8e8f0;
    font-family: 'Courier New', monospace;
    overflow: hidden;
  }
  body {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 12px;
  }
  h1 {
    font-size: 22px;
    letter-spacing: 3px;
    color: #ffcf4a;
    text-shadow: 2px 2px 0 #6a3a00, 4px 4px 0 #000;
    margin-bottom: 8px;
  }
  #game-wrap {
    position: relative;
    border: 4px solid #2a2a4a;
    box-shadow: 0 0 30px rgba(80,80,160,0.5), inset 0 0 0 2px #000;
    background: #000;
  }
  canvas {
    display: block;
    image-rendering: pixelated;
  }
  #hud {
    display: flex; justify-content: space-between; align-items: center;
    width: 800px; max-width: 100%;
    margin-top: 10px;
    padding: 8px 14px;
    background: #1a1a2e;
    border: 2px solid #3a3a5a;
    font-size: 14px;
  }
  #hud .lbl { color: #8888aa; }
  #hud .val { color: #ffcf4a; font-weight: bold; }
  #controls {
    margin-top: 8px;
    font-size: 13px;
    color: #aaaacc;
    text-align: center;
  }
  .key {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    background: #2a2a4a;
    border: 1px solid #5a5a7a;
    border-radius: 3px;
    color: #ffcf4a;
    font-weight: bold;
  }
  #overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;
    align-items: center; justify-content: center;
    flex-direction: column;
    background: rgba(0,0,0,0.7);
    pointer-events: none;
  }
  #overlay.show { display: flex; }
  #overlay .msg {
    font-size: 36px;
    color: #fff;
    text-shadow: 3px 3px 0 #000;
    margin-bottom: 12px;
    letter-spacing: 2px;
  }
  #overlay .msg.win { color: #6cff6c; }
  #overlay .msg.lose { color: #ff5050; }
  #overlay .sub {
    font-size: 14px;
    color: #ffcf4a;
    background: #2a2a4a;
    padding: 6px 14px;
    border: 2px solid #ffcf4a;
    border-radius: 4px;
  }
  button {
    margin-top: 10px;
    padding: 8px 22px;
    background: #ffcf4a;
    color: #1a1a2e;
    border: 2px solid #6a3a00;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 3px;
  }
  button:hover { background: #ffe07a; }
  button:active { transform: translateY(1px); }
  #info {
    margin-top: 8px;
    font-size: 12px;
    color: #8888aa;
    text-align: center;
  }
</style>
</head>
<body>
  <h1>DANGEROUS DAVE</h1>
  <div id="game-wrap">
    <canvas id="game" width="800" height="480"></canvas>
    <div id="overlay">
      <div class="msg" id="overlay-msg"></div>
      <div class="sub">Press R or click Restart</div>
    </div>
  </div>
  <div id="hud">
    <div><span class="lbl">TROPHY:</span> <span class="val" id="trophy-status">NOT COLLECTED</span></div>
    <div><span class="lbl">SCORE:</span> <span class="val" id="score">0</span></div>
    <button id="restart">RESTART (R)</button>
  </div>
  <div id="controls">
    MOVE:
    <span class="key">&larr;</span><span class="key">&rarr;</span>
    or <span class="key">A</span><span class="key">D</span>
    &nbsp;&nbsp;|&nbsp;&nbsp;
    JUMP: <span class="key">SPACE</span>
    &nbsp;&nbsp;|&nbsp;&nbsp;
    RESTART: <span class="key">R</span>
  </div>
  <div id="info">Grab the trophy, then reach the green exit door. Avoid fire, water, and the patrolling enemy.</div>

<script>
(() => {
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  ctx.imageSmoothingEnabled = false;

  const W = canvas.width, H = canvas.height;
  const TILE = 40;
  const COLS = W / TILE; // 20
  const ROWS = H / TILE; // 12

  // Tile types: 0=air, 1=solid, 2=fire, 3=water, 4=trophy, 5=exit
  // Build level
  function buildLevel() {
    const grid = [];
    for (let r = 0; r < ROWS; r++) {
      grid.push(new Array(COLS).fill(0));
    }
    // Ground row 11 (last row), all solid
    for (let c = 0; c < COLS; c++) grid[11][c] = 1;
    // Water pool
    grid[11][7] = 3; grid[11][8] = 3; grid[11][9] = 3;
    // Fire on ground
    grid[11][5] = 2;
    // Exit replacing ground
    grid[11][18] = 5;
    // Platforms
    grid[8][2] = 1; grid[8][3] = 1;
    grid[8][12] = 1; grid[8][13] = 1; grid[8][14] = 1; grid[8][15] = 1;
    // Trophy on top of right platform
    grid[7][13] = 4;
    return grid;
  }

  let level;
  let player, enemies, camera, state, particles, time;
  let hasTrophy = false;
  let score = 0;

  function reset() {
    level = buildLevel();
    player = {
      x: 1 * TILE + 4, y: 10 * TILE + 4,
      w: 32, h: 36,
      vx: 0, vy: 0,
      onGround: false,
      facing: 1,
      anim: 0,
    };
    enemies = [
      { x: 12 * TILE, y: 7 * TILE + 4, w: 32, h: 32, vx: 1.5, minX: 12*TILE, maxX: 15*TILE - 32, alive: true }
    ];
    state = 'playing'; // playing, dead, won
    hasTrophy = false;
    score = 0;
    particles = [];
    time = 0;
    overlay.classList.remove('show');
    trophyStatus.textContent = 'NOT COLLECTED';
    scoreEl.textContent = '0';
  }

  // Input
  const keys = {};
  window.addEventListener('keydown', (e) => {
    keys[e.code] = true;
    if (e.code === 'KeyR') reset();
    if (['Space','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.code)) e.preventDefault();
  });
  window.addEventListener('keyup', (e) => { keys[e.code] = false; });

  document.getElementById('restart').addEventListener('click', reset);

  const overlay = document.getElementById('overlay');
  const overlayMsg = document.getElementById('overlay-msg');
  const trophyStatus = document.getElementById('trophy-status');
  const scoreEl = document.getElementById('score');

  function isSolid(px, py) {
    // Check tile at pixel position
    const c = Math.floor(px / TILE);
    const r = Math.floor(py / TILE);
    if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return false;
    return level[r][c] === 1 || level[r][c] === 5; // solid or exit (solid)
  }

  function getTile(c, r) {
    if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return 0;
    return level[r][c];
  }

  function setTile(c, r, v) {
    if (r >= 0 && r < ROWS && c >= 0 && c < COLS) level[r][c] = v;
  }

  // Collision check
  function moveX(entity, dx) {
    entity.x += dx;
    // Check solid collisions at new x
    const left = entity.x;
    const right = entity.x + entity.w - 1;
    const top = entity.y + 2;
    const bottom = entity.y + entity.h - 1;
    for (let r = Math.floor(top/TILE); r <= Math.floor(bottom/TILE); r++) {
      for (let c = Math.floor(left/TILE); c <= Math.floor(right/TILE); c++) {
        if (isSolid(c*TILE + 0.5, r*TILE + 0.5)) {
          // resolve
          if (dx > 0) {
            entity.x = c * TILE - entity.w;
          } else if (dx < 0) {
            entity.x = (c + 1) * TILE;
          }
          entity.vx = 0;
          return;
        }
      }
    }
  }

  function moveY(entity, dy) {
    entity.y += dy;
    const left = entity.x + 2;
    const right = entity.x + entity.w - 3;
    const top = entity.y;
    const bottom = entity.y + entity.h - 1;
    for (let r = Math.floor(top/TILE); r <= Math.floor(bottom/TILE); r++) {
      for (let c = Math.floor(left/TILE); c <= Math.floor(right/TILE); c++) {
        if (isSolid(c*TILE + 0.5, r*TILE + 0.5)) {
          if (dy > 0) {
            entity.y = r * TILE - entity.h;
            entity.onGround = true;
          } else if (dy < 0) {
            entity.y = (r + 1) * TILE;
          }
          entity.vy = 0;
          return;
        }
      }
    }
  }

  function rectOverlap(a, b) {
    return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
  }

  function spawnParticles(x, y, color, n) {
    for (let i = 0; i < n; i++) {
      particles.push({
        x, y,
        vx: (Math.random()-0.5)*4,
        vy: -Math.random()*4 - 1,
        life: 30 + Math.random()*20,
        color,
        size: 2 + Math.random()*3,
      });
    }
  }

  function update() {
    time++;
    if (state !== 'playing') {
      // Still animate particles
      for (let i = particles.length-1; i >= 0; i--) {
        const p = particles[i];
        p.x += p.vx; p.y += p.vy;
        p.vy += 0.3;
        p.life--;
        if (p.life <= 0) particles.splice(i, 1);
      }
      return;
    }

    // Player input
    const moveLeft = keys['ArrowLeft'] || keys['KeyA'];
    const moveRight = keys['ArrowRight'] || keys['KeyD'];
    const jump = keys['Space'];

    const accel = 0.6;
    const maxSpeed = 4;
    const friction = 0.78;

    if (moveLeft) {
      player.vx -= accel;
      player.facing = -1;
    }
    if (moveRight) {
      player.vx += accel;
      player.facing = 1;
    }
    if (!moveLeft && !moveRight) {
      player.vx *= friction;
    }
    player.vx = Math.max(-maxSpeed, Math.min(maxSpeed, player.vx));

    if (jump && player.onGround) {
      player.vy = -11;
      player.onGround = false;
    }

    // Gravity
    player.vy += 0.55;
    if (player.vy > 12) player.vy = 12;

    player.onGround = false;
    moveX(player, player.vx);
    moveY(player, player.vy);
    if (Math.abs(player.vx) > 0.1) player.anim += Math.abs(player.vx) * 0.15;

    // Boundary - keep player in level
    if (player.x < 0) player.x = 0;
    if (player.x + player.w > W) player.x = W - player.w;
    // Falling off bottom = death
    if (player.y > H + 50) {
      die('You fell!');
    }

    // Trophy collection
    const trophyR = 7, trophyC = 13;
    const trophyBox = { x: trophyC*TILE, y: trophyR*TILE, w: TILE, h: TILE };
    if (!hasTrophy && rectOverlap(player, trophyBox)) {
      hasTrophy = true;
      setTile(trophyC, trophyR, 0);
      score += 500;
      scoreEl.textContent = score;
      trophyStatus.textContent = 'COLLECTED!';
      trophyStatus.style.color = '#6cff6c';
      spawnParticles(trophyC*TILE + TILE/2, trophyR*TILE + TILE/2, '#ffcf4a', 20);
    }

    // Hazards check
    for (let r = 0; r < ROWS; r++) {
      for (let c = 0; c < COLS; c++) {
        const t = getTile(c, r);
        if (t === 2 || t === 3) {
          const hb = { x: c*TILE+2, y: r*TILE+2, w: TILE-4, h: TILE-4 };
          if (rectOverlap(player, hb)) {
            die(t === 2 ? 'Burned by fire!' : 'Drowned in water!');
            return;
          }
        }
      }
    }

    // Exit check
    const exitR = 11, exitC = 18;
    const exitBox = { x: exitC*TILE, y: exitR*TILE, w: TILE, h: TILE };
    if (rectOverlap(player, exitBox)) {
      if (hasTrophy) {
        score += 1000;
        scoreEl.textContent = score;
        win();
      } else {
        showMessage('You need the trophy first!', '#ff5050', 60);
      }
    }

    // Enemies
    enemies.forEach(e => {
      if (!e.alive) return;
      e.x += e.vx;
      if (e.x < e.minX) { e.x = e.minX; e.vx = Math.abs(e.vx); }
      if (e.x > e.maxX) { e.x = e.maxX; e.vx = -Math.abs(e.vx); }
      // Enemy physics
      e.vy = (e.vy || 0) + 0.55;
      // Check support - if no ground below, turn around (simple AI)
      // For simplicity, keep enemy on platform
      if (rectOverlap(player, e)) {
        die('Caught by enemy!');
      }
    });

    // Particles
    for (let i = particles.length-1; i >= 0; i--) {
      const p = particles[i];
      p.x += p.vx; p.y += p.vy;
      p.vy += 0.3;
      p.life--;
      if (p.life <= 0) particles.splice(i, 1);
    }
  }

  function die(msg) {
    if (state !== 'playing') return;
    state = 'dead';
    spawnParticles(player.x + player.w/2, player.y + player.h/2, '#ff5050', 30);
    overlayMsg.textContent = msg || 'You died!';
    overlayMsg.className = 'msg lose';
    overlay.classList.add('show');
  }

  function win() {
    state = 'won';
    overlayMsg.textContent = 'LEVEL COMPLETE!';
    overlayMsg.className = 'msg win';
    overlay.classList.add('show');
    spawnParticles(player.x + player.w/2, player.y + player.h/2, '#6cff6c', 40);
  }

  let msgTimer = 0;
  let msgText = '';
  let msgColor = '#fff';
  function showMessage(text, color, duration) {
    msgText = text;
    msgColor = color;
    msgTimer = duration;
  }

  // Drawing
  function draw() {
    // Background
    ctx.fillStyle = '#0a0a18';
    ctx.fillRect(0, 0, W, H);
    // Stars
    for (let i = 0; i < 50; i++) {
      const sx = (i * 137) % W;
      const sy = (i * 89) % (H - 120);
      const b = 0.3 + 0.7 * Math.abs(Math.sin(time * 0.02 + i));
      ctx.fillStyle = `rgba(255,255,255,${0.2 + b*0.5})`;
      ctx.fillRect(sx, sy, 1, 1);
    }

    // Tiles
    for (let r = 0; r < ROWS; r++) {
      for (let c = 0; c < COLS; c++) {
        const t = getTile(c, r);
        const x = c*TILE, y = r*TILE;
        if (t === 1) drawSolid(x, y, c, r);
        else if (t === 2) drawFire(x, y);
        else if (t === 3) drawWater(x, y);
        else if (t === 4) drawTrophy(x, y);
        else if (t === 5) drawExit(x, y);
      }
    }

    // Enemies
    enemies.forEach(e => drawEnemy(e));

    // Player
    if (state !== 'dead') drawPlayer();

    // Particles
    particles.forEach(p => {
      ctx.fillStyle = p.color;
      ctx.globalAlpha = Math.max(0, p.life / 50);
      ctx.fillRect(p.x - p.size/2, p.y - p.size/2, p.size, p.size);
    });
    ctx.globalAlpha = 1;

    // Floating message
    if (msgTimer > 0) {
      msgTimer--;
      ctx.fillStyle = msgColor;
      ctx.font = 'bold 20px "Courier New", monospace';
      ctx.textAlign = 'center';
      ctx.fillText(msgText, W/2, 60);
      ctx.textAlign = 'start';
    }
  }

  function drawSolid(x, y, c, r) {
    // Brick pattern
    const isGround = (r === ROWS - 1);
    ctx.fillStyle = isGround ? '#5a4030' : '#4a5a7a';
    ctx.fillRect(x, y, TILE, TILE);
    ctx.fillStyle = isGround ? '#3a2a1a' : '#2a3a5a';
    ctx.fillRect(x, y, TILE, 4);
    // Brick lines
    ctx.strokeStyle = isGround ? '#2a1a0a' : '#1a2a4a';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(x, y + TILE/2); ctx.lineTo(x + TILE, y + TILE/2);
    if ((c + r) % 2 === 0) {
      ctx.moveTo(x + TILE/2, y); ctx.lineTo(x + TILE/2, y + TILE/2);
    } else {
      ctx.moveTo(x + TILE/2, y + TILE/2); ctx.lineTo(x + TILE/2, y + TILE);
    }
    ctx.stroke();
    // Top highlight
    ctx.fillStyle = isGround ? '#7a5a40' : '#6a7a9a';
    ctx.fillRect(x, y, TILE, 2);
  }

  function drawFire(x, y) {
    const t = time;
    ctx.fillStyle = '#1a0a05';
    ctx.fillRect(x, y, TILE, TILE);
    // Flames
    for (let i = 0; i < 3; i++) {
      const fx = x + 8 + i * 10 + Math.sin(t * 0.3 + i) * 2;
      const fy = y + TILE - 5 - Math.abs(Math.sin(t * 0.2 + i*2)) * 12;
      const fh = 12 + Math.sin(t * 0.25 + i) * 5;
      // Outer flame
      ctx.fillStyle = '#ff6020';
      ctx.beginPath();
      ctx.moveTo(fx, y + TILE);
      ctx.lineTo(fx - 6, y + TILE - fh/2);
      ctx.lineTo(fx, y + TILE - fh);
      ctx.lineTo(fx + 6, y + TILE - fh/2);
      ctx.closePath();
      ctx.fill();
      // Inner flame
      ctx.fillStyle = '#ffcf4a';
      ctx.beginPath();
      ctx.moveTo(fx, y + TILE - 2);
      ctx.lineTo(fx - 3, y + TILE - fh/2 + 2);
      ctx.lineTo(fx, y + TILE - fh + 4);
      ctx.lineTo(fx + 3, y + TILE - fh/2 + 2);
      ctx.closePath();
      ctx.fill();
    }
    // Base glow
    ctx.fillStyle = '#ffaa30';
    ctx.fillRect(x + 4, y + TILE - 4, TILE - 8, 4);
  }

  function drawWater(x, y) {
    const t = time;
    ctx.fillStyle = '#1a3a6a';
    ctx.fillRect(x, y, TILE, TILE);
    // Wave
    ctx.fillStyle = '#3a7aca';
    ctx.beginPath();
    ctx.moveTo(x, y + 20);
    for (let i = 0; i <= TILE; i += 4) {
      const wy = y + 20 + Math.sin((i + t * 2) * 0.3) * 3;
      ctx.lineTo(x + i, wy);
    }
    ctx.lineTo(x + TILE, y + TILE);
    ctx.lineTo(x, y + TILE);
    ctx.closePath();
    ctx.fill();
    // Highlights
    ctx.fillStyle = '#7ab8ff';
    for (let i = 0; i < 3; i++) {
      const hx = x + 8 + i * 12 + Math.sin(t * 0.1 + i) * 2;
      const hy = y + 10 + Math.sin(t * 0.15 + i * 2) * 2;
      ctx.fillRect(hx, hy, 4, 1);
    }
  }

  function drawTrophy(x, y) {
    const t = time;
    // Base
    ctx.fillStyle = '#3a2a10';
    ctx.fillRect(x + 12, y + 30, 16, 6);
    // Stem
    ctx.fillStyle = '#aa7a20';
    ctx.fillRect(x + 18, y + 22, 4, 10);
    // Cup
    ctx.fillStyle = '#ffd700';
    ctx.beginPath();
    ctx.moveTo(x + 10, y + 8);
    ctx.lineTo(x + 30, y + 8);
    ctx.lineTo(x + 28, y + 22);
    ctx.lineTo(x + 12, y + 22);
    ctx.closePath();
    ctx.fill();
    // Handles
    ctx.strokeStyle = '#ffd700';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(x + 8, y + 14, 4, 0, Math.PI * 2);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(x + 32, y + 14, 4, 0, Math.PI * 2);
    ctx.stroke();
    // Shine
    ctx.fillStyle = '#fff5a0';
    ctx.fillRect(x + 13, y + 11, 3, 6);
    // Sparkle
    if (Math.floor(t / 8) % 2 === 0) {
      ctx.fillStyle = '#fff';
      ctx.fillRect(x + 4 + Math.sin(t*0.1)*3, y + 4, 2, 2);
      ctx.fillRect(x + 34 + Math.cos(t*0.1)*3, y + 4, 2, 2);
    }
  }

  function drawExit(x, y) {
    // Door frame
    ctx.fillStyle = '#202020';
    ctx.fillRect(x, y, TILE, TILE);
    // Door
    ctx.fillStyle = '#2a8a2a';
    ctx.fillRect(x + 4, y + 4, TILE - 8, TILE - 4);
    ctx.fillStyle = '#1a5a1a';
    ctx.fillRect(x + 4, y + 4, TILE - 8, 4);
    // EXIT text
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 9px "Courier New", monospace';
    ctx.textAlign = 'center';
    ctx.fillText('EXIT', x + TILE/2, y + TILE/2 + 3);
    ctx.textAlign = 'start';
    // Doorknob
    ctx.fillStyle = '#ffcf4a';
    ctx.beginPath();
    ctx.arc(x + TILE - 8, y + TILE/2, 2, 0, Math.PI * 2);
    ctx.fill();
    // Glow if trophy collected
    if (hasTrophy) {
      ctx.strokeStyle = `rgba(108,255,108,${0.5 + 0.3*Math.sin(time*0.1)})`;
      ctx.lineWidth = 2;
      ctx.strokeRect(x + 2, y + 2, TILE - 4, TILE - 4);
    }
  }

  function drawEnemy(e) {
    const x = e.x, y = e.y;
    // Body
    ctx.fillStyle = '#a02020';
    ctx.fillRect(x + 4, y + 8, 24, 20);
    // Head
    ctx.fillStyle = '#c03030';
    ctx.fillRect(x + 6, y, 20, 14);
    // Eyes
    ctx.fillStyle = '#fff';
    const eyeDir = e.vx > 0 ? 1 : -1;
    ctx.fillRect(x + (eyeDir > 0 ? 16 : 8), y + 4, 4, 5);
    ctx.fillRect(x + (eyeDir > 0 ? 22 : 14), y + 4, 4, 5);
    ctx.fillStyle = '#000';
    ctx.fillRect(x + (eyeDir > 0 ? 18 : 10), y + 6, 2, 3);
    ctx.fillRect(x + (eyeDir > 0 ? 24 : 16), y + 6, 2, 3);
    // Feet
    const ft = Math.floor(time / 6) % 2;
    ctx.fillStyle = '#701010';
    if (ft === 0) {
      ctx.fillRect(x + 6, y + 28, 6, 4);
      ctx.fillRect(x + 20, y + 28, 6, 4);
    } else {
      ctx.fillRect(x + 10, y + 28, 6, 4);
      ctx.fillRect(x + 16, y + 28, 6, 4);
    }
  }

  function drawPlayer() {
    const x = player.x, y = player.y;
    const facing = player.facing;
    // Body
    ctx.fillStyle = '#2050d0';
    ctx.fillRect(x + 4, y + 12, 24, 20);
    // Head
    ctx.fillStyle = '#f0c890';
    ctx.fillRect(x + 8, y, 16, 14);
    // Eyes
    ctx.fillStyle = '#fff';
    if (facing > 0) {
      ctx.fillRect(x + 16, y + 4, 4, 5);
      ctx.fillRect(x + 22, y + 4, 4, 5);
    } else {
      ctx.fillRect(x + 6, y + 4, 4, 5);
      ctx.fillRect(x + 12, y + 4, 4, 5);
    }
    ctx.fillStyle = '#000';
    if (facing > 0) {
      ctx.fillRect(x + 18, y + 6, 2, 3);
      ctx.fillRect(x + 24, y + 6, 2, 3);
    } else {
      ctx.fillRect(x + 8, y + 6, 2, 3);
      ctx.fillRect(x + 14, y + 6, 2, 3);
    }
    // Hat (Dave-style cap)
    ctx.fillStyle = '#d02020';
    ctx.fillRect(x + 6, y - 2, 18, 4);
    ctx.fillRect(x + 4, y + 1, 4, 3);
    // Feet
    const ft = Math.floor(player.anim) % 2;
    ctx.fillStyle = '#202020';
    if (ft === 0 || !player.onGround) {
      ctx.fillRect(x + 6, y + 32, 6, 4);
      ctx.fillRect(x + 20, y + 32, 6, 4);
    } else {
      ctx.fillRect(x + 10, y + 32, 6, 4);
      ctx.fillRect(x + 16, y + 32, 6, 4);
    }
  }

  function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
  }

  reset();
  loop();
})();
</script>
</body>
</html>
```

Let me review:

1. Build level - good
2. Player start (1, 10) with size 32x36. Hmm, with player height 36 and tile 40, player occupies less than full tile. Let me adjust to 32x32 for cleaner collision. Or 28x36 with 12px tall hat.

Actually let me just use 32x36 with hat sticking up. Collision box is just the body.

3. Movement: arrow keys, A/D, space jump. Good.
4. Gravity: 0.55, jump velocity -11. Good.
5. Collision: tested for solid tiles.
6. Trophy collection, exit requires trophy. Good.
7. Hazards (fire, water), enemy - good.
8. Win/lose states, restart. Good.

Issue: player height 36 + tile 40 — when on ground at row 11, player y = 11*40 - 36 = 440 - 36 = 404. Player feet at 440 (top of row 11). 

Let me double-check the trophy at row 7. Player feet at y=7*40=280. To collect, player must overlap trophy tile {y=280, h=40}. So player feet can be 280 (standing on platform at row 8 top, which is 320). Hmm but trophy is at row 7 (above row 8 platform). So player must jump UP from row 8 platform to row 7 trophy.

When on platform at row 8 (top edge at y=320), player y = 320 - 36 = 284. Player bbox 284..320 vertically. Trophy tile at 280..320. So overlap is 284..320 which is 36px. Yes overlap, so trophy collected.

But wait, if player is just standing on platform row 8 and trophy is at row 7 (above), the trophy tile would be at y=280..320, and player is at y=284..320. They overlap! So player collects trophy without jumping up?

Yes, because trophy is at row 7 col 13, and platform is at row 8 cols 12-15. The trophy tile is directly above the platform. When player stands on platform at col 13, player bbox overlaps with trophy tile (which is right above).

Hmm, the task says trophy must be visible and reachable. If trophy is placed such that you collect it by standing on platform, that's fine — player still has to reach the platform.

Actually re-reading: "The player must collect the trophy before the exit completes the level." This doesn't say trophy must require jumping. Just that collecting it is needed for exit.

But for visual interest, let me put trophy slightly higher requiring a jump. Or keep it as is — player reaches platform, trophy is collected.

Let me adjust: move trophy to be standing on the trophy tile itself, so player must be at row 7 (above platform) to collect. To do that, place trophy at row 7 but require player center y to be at row 7's tile (top half). 

Actually the simpler fix: place trophy on top of a single-tile pillar. Add a 1-tile platform at (13, 7), and trophy on top at (13, 6). Then player must jump up onto the pillar.

Let me adjust:
- Platform at (13, 8): single tile (pillar)
- Trophy at (13, 6): top of pillar
- Player jumps onto pillar from platform row 8 (cols 12-15) which contains the pillar

Wait if pillar is at (13, 8), then platform row 8 cols 12-15 is replaced with just col 13. Player needs to walk along... but only one tile to stand on.

Let me redesign:
- Ground row 11 with hazards
- Lower platform at row 8 cols 12-15 (wider, easier landing)
- Pillar at col 13 row 7 (single tile on top of lower platform)
- Trophy at col 13 row 6 (on top of pillar)

So:
```
Row 6: . . . . . . . . . . . . . T . . . . . .
Row 7: . . . . . . . . . . . . . 1 . . . . . .
Row 8: . . . . . . . . . . . . 1 1 1 1 . . . .
```

Player jumps from lower platform (row 8) up to pillar (row 7) up to trophy (row 6). That's 2-tile jump total. Should be doable.

Actually wait, having pillar at row 7 col 13 means player stands on row 7 col 13. Trophy at row 6 col 13 — collected when player feet at row 6 (standing on row 7 platform).

Let me revise:

```
Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  T  .  .  .  .  .  .
Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  .  1  .  .  .  .  .  .
Row 8:  .  .  .  .  .  .  .  .  .  .  .  .  1  1  1  1  .  .  .  .
Row 9:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 10: .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 11: #  #  #  #  #  F  #  W  W  W  #  #  #  #  #  #  #  #  E  #
```

Wait pillar at col 13 row 7 means solid at (13, 7). Player stands on top of pillar at y=280-36=244. Trophy at (13, 6) y=240..280. Player bbox 244..280, trophy 240..280 — overlap! Collected.

To jump from lower platform (row 8 top y=320) up to pillar (row 7 top y=280) — 40px = 1 tile. At y=-40: 0.25t² - 11t + 40 = 0, t² - 44t + 160 = 0, t = (44 - sqrt(1936-640))/2 = (44 - 35.9)/2 = 4.05 frames. Horizontal = 16px. Easy.

So player can jump from lower platform col 12 or 14 or 15 to pillar at col 13. 

Now the enemy. Let me put it patrolling the lower platform row 8 cols 12-15 (the same as player needs to traverse). Enemy will patrol back and forth, making trophy harder to reach.

Or put enemy on the ground at cols 14-17. But that doesn't add much challenge since exit is at col 18.

Let me put enemy on the platform row 8 cols 12-15, patrolling. Player must time jumps.

Actually, even better: two challenges. Let me just have one enemy on the platform.

Enemy at y=8*40 + 4 = 324, x=12*40. Patrol from x=12*40 to x=15*40 - 32 = 568.

Wait that puts enemy on top of platform. Player also stands on top of platform. So enemy walks into player — collision = die.

Let me code it. The enemy at:
- y = 8*40 + (40-32) = 320 + 8 = 328 (feet at 360, top at 328)

Actually player y on platform = 320 - 36 = 284. Enemy y = 320 - 32 = 288 (top). 

Both have feet at top of platform (y=320). Yes they coexist.

Hmm but for visibility, let me also add a small "pillar" variation or have enemy patrol ground level too. Just one enemy is fine.

Let me also double-check: trophy collected, exit unlocked. When player touches exit at col 18 row 11, win. But exit is at row 11 col 18 = 5 (exit tile). I have it as solid for collision. So player can stand on it.

But wait — exit at row 11 col 18 — player feet at y=440-36=404 when standing on it. That's where they trigger exit.

Wait, the player should approach from col 17 (solid ground) to col 18 (exit). As player walks right, when they reach col 18, they trigger exit. Good.

Actually the row 11 col 18 is replaced with exit (type 5) which is solid. So player walks from solid col 17 onto solid col 18 (exit). Triggers win if has trophy.

OK let me also double-check movement: gravity 0.55, max vy 12, jump -11. On ground (row 11), player y = 11*40 - 36 = 404. vx accelerates at 0.6/frame to max 4. Player walks at 4 px/frame. That's 0.1 tile per frame. Reasonable.

Walking from col 1 to col 18 is 17 tiles = 680 px at 4 px/frame = 170 frames = ~3 sec.

Now the trophy box: tile (13, 6) = 4. Player AABB overlap with tile AABB.

Player at y=244..280 (standing on pillar). Trophy at y=240..280. Overlap: y=244..280 (36px), x must overlap. Player x is some value. When player is at col 13, player x = 13*40 + (40-32)/2 = 520 + 4 = 524. Player x range 524..556. Trophy at x=520..560. Overlap. Collected.

OK let me finalize.

Actually one more issue: when player is on platform at (12, 8)..(15, 8) and jumps up to pillar (13, 7), the pillar at (13, 7) — player's left/right collision check when jumping up.

When player is jumping from col 12 with vy=-11, they go up. At some point, player y might be at row 7 (y=244). MoveY will check solid collision. Pillar at (13, 7) - if player's x range covers col 13, then collision.

If player jumps from x=12*40+4=484 (col 12), player x range 484..516. Column 13 is x=520..560. Player doesn't overlap col 13 when jumping from col 12.

Need to jump from a position where player overlaps col 13. Player at col 13 has x=524..556 (overlapping col 13 which is x=520..560). Player can be on platform at col 13? But platform is at cols 12-15. Player walks to col 13. Then jumps straight up: y decreases from 284. At y=284, player's bottom at y=320 still. As player goes up, bottom y decreases. At bottom y=280 (top of pillar), player y=244. Player feet at 280. If player is over col 13, they'll land on top of pillar.

But wait the pillar is at (13, 7) and the platform is at (13, 8) (part of cols 12-15). So (13, 8) is solid AND (13, 7) is solid (pillar). Player on (13, 8) platform has feet at y=320. To jump to pillar at (13, 7), player jumps and lands on top with feet at y=280.

This works. Player jumps straight up while on col 13 of platform row 8, reaches pillar row 7, lands there.

Then trophy at (13, 6) collected by standing on pillar.

Great.

Now let me check the exit door reachability. After collecting trophy, player is on pillar (13, 7) or somewhere. Need to reach exit at (18, 11).

Path: from pillar (13, 7), drop down to platform (12-15, 8). Walk right on platform to col 15. Jump from col 15 (player x ~ 15*40+4=604) right and down to ground at col 18.

Jump from y=284 (platform top y=320, player y=284), need to land on ground at y=440 (player y=404). So dy = +120, dx = +120-? 

Wait, jump direction is horizontal + down. From col 15 platform (top x=600..640), jump right and down to col 18 ground.

At start: x=604, y=284. With vx=4 (rightward), vy=-11 (jump up first).

Actually player must jump. Let's see where they land.
- vx = +4, vy = -11
- At time t, x = 604 + 4t, y = 284 + (-11)t + 0.275t² 
  - y = 284 - 11t + 0.275t²
- Player lands when y >= 404. So 0.275t² - 11t + 284 - 404 >= 0, 0.275t² - 11t - 120 >= 0, t² - 40t - 436 >= 0, t = (40 + sqrt(1600+1744))/2 = (40+57.8)/2 = 48.9. So at ~49 frames, player lands at y=404.
- At t=49, x = 604 + 196 = 800. That's at col 20 (off-screen). 

Hmm too far. Player can reach exit but may overshoot. Actually no — exit at col 18, ground extends to col 17, col 19 also solid. So player lands on col 18-19 ground which has exit at col 18.

Wait row 11: cols 0-19, with col 5=F, col 7-9=W, col 18=E. So ground is at cols 0-4, 6, 10-17, 19. Col 18 is exit (solid). So player landing at x=800 = col 20 (off-grid). Player would hit boundary.

Hmm let me check boundary: I have `if (player.x + player.w > W) player.x = W - player.w;` so player clamped to col 19. 

At t=49, x=800, clamped to W-player.w = 800-32 = 768 = col 19.2. Player at col 19, which is solid (col 19 row 11 = #). Then player walks left to col 18 (exit). Triggers win.

Actually wait, the player is at x=800 (off-grid) at t=49, but my collision resolves movement first. MoveX moves player and clamps to walls. If player at x=800 and solid at col 20 doesn't exist (out of grid = not solid), player stays at x=800, then boundary check clamps to W-player.w. But what about y? Player still falling at t=49. y=404. Lands on ground.

Actually let me think again. Player jumps from platform (col 15, y=284). Player x at start = col 15 = 15*40 = 600 + offset = 604 (with player w=32, x ranges 604..636).

Wait player initial x = 604 + 4 = 608? Let me redo. Player starts at col 15 on platform, so x = 15*40 + (40-32)/2 = 600 + 4 = 604. Player width 32, so range 604..636.

To not overshoot, player should jump less far. Let me have them walk to col 12 (left side of platform) and jump from there, OR jump at angle... but I only have horizontal control.

Actually with vx=4 px/frame and vy=-11, jump distance is 4*44 = 176 px. That's too far from col 15 to col 18 (3 tiles = 120 px).

So player can easily jump from col 12 to col 18:
- From col 12 (x=484), t at landing y=404: t² - 40t - 120/0.275*0.275 = wait let me redo.

y(t) = 284 - 11t + 0.275t² (assuming starting on platform with y=284)

Wait that's not right. The y at landing depends on what platform we're on.

Let me just consider from col 12 (player x=484, y=284 on platform row 8). Jump right with vx=+4, vy=-11.
- x(t) = 484 + 4t
- y(t) = 284 - 11t + 0.275t²

Player lands when y >= 404 (top of ground - player height):
404 = 284 - 11t + 0.275t²
0.275t² - 11t - 120 = 0
t² - 40t - 436.36 = 0
t = (40 + sqrt(1600 + 1745.45))/2 = (40 + 57.83)/2 = 48.9

At t=48.9, x = 484 + 195.6 = 679.6 ≈ col 17.

Hmm. From col 12 (x=484), player lands at col 17 (x=680). Misses col 18.

Try from col 11 (but col 11 row 8 is air). Player can't be on col 11 row 8 — falls down.

OK so from col 12 platform, player lands at col 17 (just before exit). Need to walk one more step to col 18.

From col 13 (x=524, y=284 on platform):
- x(t) = 524 + 4t
- t = 48.9
- x = 524 + 195.6 = 719.6 = col 18

So jumping from col 13 lands on col 18. But col 13 has pillar! Player is on platform row 8, but row 7 col 13 is solid (pillar). Player standing on row 8 col 13 has player bbox y=284..320. Pillar at row 7 (y=280..320) overlaps player. Player would be pushed up?

Hmm conflict. Let me check my collision logic.

When player is at col 13 on platform (y=284), moveX/MoveY shouldn't conflict because pillar is above player. Player feet at y=320 (top of platform). Pillar at y=280..320. Player bbox y=284..320. Pillar overlaps player bbox.

But wait, MoveY on positive dy (falling) sets player y to top of solid - player height. If player is falling onto pillar, they'd land on pillar top at y=280. But if player is sitting on platform row 8 and just standing there, they shouldn't be pushed up by pillar.

The issue is my collision check iterates ALL tiles overlapping player AABB. If player's AABB overlaps a solid tile and dy was 0, no movement happens, but my code does set player.y = r*TILE - entity.h. Hmm.

Actually my moveY only sets entity.y if dy is non-zero:
```
if (dy > 0) entity.y = r * TILE - entity.h;
else if (dy < 0) entity.y = (r + 1) * TILE;
entity.vy = 0;
```

So if dy = 0 (no vertical movement this frame), the code still resets y based on tile position. That's a bug.

Let me fix: only do collision response if the entity moved INTO the tile. I need to check if the entity was already overlapping before moving.

Better approach: check if the NEW position overlaps solid. If so, undo the move and resolve.

Let me rewrite collision:

```javascript
function moveX(entity, dx) {
  if (dx === 0) return;
  const oldX = entity.x;
  entity.x += dx;
  // Check if new x collides with any solid
  if (entityOverlapsSolid(entity)) {
    if (dx > 0) {
      entity.x = Math.floor((entity.x + entity.w) / TILE) * TILE - entity.w;
    } else {
      entity.x = Math.ceil(entity.x / TILE) * TILE;
    }
    entity.vx = 0;
  }
}

function moveY(entity, dy) {
  if (dy === 0) {
    // Still check onGround
    entity.onGround = checkGrounded(entity);
    return;
  }
  const oldY = entity.y;
  entity.y += dy;
  if (entityOverlapsSolid(entity)) {
    if (dy > 0) {
      entity.y = Math.floor((entity.y + entity.h) / TILE) * TILE - entity.h;
      entity.onGround = true;
    } else {
      entity.y = Math.ceil(entity.y / TILE) * TILE;
    }
    entity.vy = 0;
  } else {
    entity.onGround = false;
  }
}
```

Where `entityOverlapsSolid` checks if any tile overlapping entity AABB is solid.

Let me also include exit as solid for collision (since exit is a door standing on the ground).

Wait, I want the player to walk INTO exit tile (not stand on top of it). The exit is at row 11 col 18 — it's at ground level. If exit is solid, player walks from col 17 onto col 18 (exit). The exit tile IS solid for collision, so player can stand on it.

But the player walks onto the exit tile and triggers win. That's fine.

Actually the player's foot needs to touch the exit. If exit is at row 11 col 18 = full tile, player walks onto it (overlap with tile). rectOverlap returns true. Win triggered.

OK so exit tile = solid AND trigger win.

Let me code more carefully. Here's my updated collision:

```javascript
function entityOverlapsSolid(entity) {
  const left = Math.floor(entity.x / TILE);
  const right = Math.floor((entity.x + entity.w - 1) / TILE);
  const top = Math.floor(entity.y / TILE);
  const bottom = Math.floor((entity.y + entity.h - 1) / TILE);
  for (let r = top; r <= bottom; r++) {
    for (let c = left; c <= right; c++) {
      const t = getTile(c, r);
      if (t === 1 || t === 5) return true; // solid or exit
    }
  }
  return false;
}

function moveX(entity, dx) {
  entity.x += dx;
  if (entityOverlapsSolid(entity)) {
    if (dx > 0) {
      entity.x = Math.floor((entity.x + entity.w - 1) / TILE) * TILE;
    } else {
      entity.x = (Math.floor(entity.x / TILE) + 1) * TILE;
    }
    entity.vx = 0;
  }
}

function moveY(entity, dy) {
  entity.y += dy;
  if (entityOverlapsSolid(entity)) {
    if (dy > 0) {
      entity.y = Math.floor((entity.y + entity.h - 1) / TILE) * TILE - entity.h;
      entity.onGround = true;
    } else {
      entity.y = (Math.floor(entity.y / TILE) + 1) * TILE;
    }
    entity.vy = 0;
  } else if (dy > 0) {
    entity.onGround = false;
  }
}
```

Wait, when dy > 0 and we resolve, we set onGround = true. But the player is now standing. Next frame, gravity applies, player.vy += 0.55, then moveY with dy > 0. If grounded, entity would move down into solid, then snap back. entity.onGround stays true.

Actually that's fine — every frame player tries to fall, gets blocked, snaps back. onGround remains true.

But my code: `if (dy > 0) entity.onGround = false;` only sets false if not overlapping. So if overlapping (after move), onGround stays whatever it was. Hmm.

Let me be more explicit:

```javascript
function moveY(entity, dy) {
  if (dy === 0) return;
  entity.y += dy;
  const overlap = entityOverlapsSolid(entity);
  if (overlap) {
    if (dy > 0) {
      entity.y = Math.floor((entity.y + entity.h - 1) / TILE) * TILE - entity.h;
      entity.onGround = true;
    } else {
      entity.y = (Math.floor(entity.y / TILE) + 1) * TILE;
      entity.onGround = false;
    }
    entity.vy = 0;
  } else {
    if (dy > 0) entity.onGround = false;
  }
}
```

Actually this is getting complex. Let me simplify. After moveY resolves overlap (by setting onGround=true when blocked downward), the entity has onGround=true. Next frame gravity adds to vy, but we should only apply if not grounded.

Better: only apply gravity if not grounded. So:

```javascript
function update() {
  ...
  if (!player.onGround) {
    player.vy += 0.55;
    if (player.vy > 12) player.vy = 12;
  }
  
  // Horizontal
  moveX(player, player.vx);
  
  // Vertical
  moveY(player, player.vy);
}
```

But then if player walks off a ledge, they don't fall (onGround stays true). Need to detect ledge.

Hmm let me try a different approach:

```javascript
function update() {
  ...
  // Apply gravity always
  player.vy += 0.55;
  if (player.vy > 12) player.vy = 12;
  
  moveX(player, player.vx);
  
  const wasOnGround = player.onGround;
  moveY(player, player.vy);
  
  // If player was on ground and now isn't (walked off ledge), keep onGround false
  // If just landed, onGround = true
}
```

In moveY, after resolving:
- If landed (dy > 0 and overlapped solid): onGround = true
- If blocked from above (dy < 0 and overlapped solid): onGround = false (we set this), but maybe still true if was on ground before moving up
- If no collision: onGround = false (we set this when dy > 0 and no overlap)

Actually we only set onGround after resolving collision. If player is in air and falling (dy > 0), no collision: onGround = false. If player is on ground (vy > 0 because of gravity), moves down into ground, resolves: onGround = true.

If player jumps (vy = -11), moves up: if hits ceiling, onGround = false. If no ceiling, still onGround = false.

This works. The check onGround = true only happens when player lands.

But there's a subtle issue: if player is on ground and gravity adds vy = 0.55, player tries to move down. Collides with ground. Resolves: onGround = true. Next frame same thing. So player oscillates between "grounded" and "snapped back to grounded".

That should work — onGround stays true throughout. Jump is allowed.

OK let me also handle the ledge: when player walks off a ledge, the next frame gravity adds, player moves down. If there's no ground below, no collision, onGround = false. Player falls.

So the key is: moveY always tries to move, and sets onGround based on whether collision happened (true) or not (false).

Let me re-examine: after moveY:
- If overlap and dy > 0: onGround = true
- If overlap and dy < 0: hit ceiling (onGround should remain false; we set it false)
- If no overlap: onGround = false

Wait in no overlap, what about dy < 0? Player moving up freely (still in air). onGround was probably false. We don't change it (or set to false).

Let me just write:

```javascript
function moveY(entity, dy) {
  if (dy === 0) return;
  entity.y += dy;
  if (entityOverlapsSolid(entity)) {
    if (dy > 0) {
      entity.y = Math.floor((entity.y + entity.h - 1) / TILE) * TILE - entity.h;
      entity.onGround = true;
    } else {
      entity.y = (Math.floor(entity.y / TILE) + 1) * TILE;
    }
    entity.vy = 0;
  } else {
    if (dy > 0) entity.onGround = false;
  }
}
```

OK. Now for the pillar problem: player on platform row 8 col 13 has player y = 284..320. Pillar at row 7 col 13 has tile y=280..320. Player AABB overlaps pillar AABB. So `entityOverlapsSolid` returns true even when player is just standing there!

But this is after moveY. moveY only runs if dy != 0. If player is on ground with vy=0 initially (or just landed), moveY runs with the gravity-induced dy. Let me trace:

Frame 1: player on platform row 8 col 12 (x=484..516, y=284..320). vy=0 initially. Gravity: vy=0.55. moveY(0.55): y=284.55, check overlap. entity bbox y=284.55..320.55. Tiles row 7 (y=280..320) and row 8 (y=320..360). Player covers parts of row 7 and row 8. Row 8 col 12 = 1 (solid). Overlap. Resolve: y = 320 - 36 = 284. onGround = true.

OK that's fine. But now player walks to col 13. Player x=524..556. Player still on platform row 8 col 13 (solid). Gravity adds vy=0.55. moveY: y=284.55. Player y range 284.55..320.55. Tiles overlap: row 7 col 13 (pillar, y=280..320, solid). Player overlaps pillar.

Resolve: dy>0, y = 320 - 36 = 284. onGround = true.

Hmm, but the pillar top is at y=280, not y=320. The collision resolution sets y based on whichever tile caused overlap. Let me re-examine.

`entityOverlapsSolid` returns true if any tile overlapping player AABB is solid. It iterates all overlapping tiles. The resolution uses `Math.floor((entity.y + entity.h - 1) / TILE) * TILE - entity.h`. With entity.y=284.55, entity.h=36, entity.y+entity.h-1 = 319.55, floor/40 = 7, *40 = 280. Then -36 = 244. So entity.y = 244.

That's the pillar top! Player gets pushed UP to top of pillar.

Oh no, that's wrong. Player on platform row 8 col 13 should NOT be pushed up to pillar row 7.

The issue: player overlaps BOTH platform row 8 and pillar row 7. Resolution snaps to the higher tile (smaller y).

I need to resolve to the tile the player is trying to land on (the bottom one for falling).

Fix: when resolving overlap, find the SOLID tile the player would land on (for downward movement, the topmost solid tile overlapping player's bottom edge).

Let me rethink. When dy > 0 (falling), the player wants to land on the highest solid tile below them. When dy < 0 (jumping), the player wants to stop at the lowest solid tile above them.

Resolution:
- dy > 0 (down): player.y = top of solid tile - player.h, where solid tile is the one player was just about to land on
- dy < 0 (up): player.y = bottom of solid tile

The "right" tile is the one whose edge is in the direction of movement.

```javascript
function moveY(entity, dy) {
  if (dy === 0) return;
  entity.y += dy;
  if (entityOverlapsSolid(entity)) {
    if (dy > 0) {
      // Find the topmost solid tile overlapping player's bottom
      // Player's bottom edge before move was entity.y + entity.h - dy
      // We want the highest tile that intersects player's AABB
      // Just iterate rows and find the highest (smallest r) solid tile in player's overlap
      const left = Math.floor(entity.x / TILE);
      const right = Math.floor((entity.x + entity.w - 1) / TILE);
      let topRow = Infinity;
      for (let r = 0; r < ROWS; r++) {
        for (let c = left; c <= right; c++) {
          if (getTile(c, r) === 1 || getTile(c, r) === 5) {
            topRow = Math.min(topRow, r);
          }
        }
      }
      if (topRow < Infinity) {
        entity.y = topRow * TILE - entity.h;
      }
      entity.onGround = true;
    } else {
      // dy < 0, find bottommost solid tile
      const left = Math.floor(entity.x / TILE);
      const right = Math.floor((entity.x + entity.w - 1) / TILE);
      let botRow = -1;
      for (let r = ROWS - 1; r >= 0; r--) {
        for (let c = left; c <= right; c++) {
          if (getTile(c, r) === 1 || getTile(c, r) === 5) {
            botRow = Math.max(botRow, r);
          }
        }
      }
      if (botRow >= 0) {
        entity.y = (botRow + 1) * TILE;
      }
    }
    entity.vy = 0;
  } else {
    if (dy > 0) entity.onGround = false;
  }
}
```

This finds the TOPmost solid tile (for falling) — this is the surface player lands on.

For player on platform row 8 col 13 with pillar row 7 col 13:
- Player AABB x=524..556, y=284..320
- Tiles overlapping: col 13 row 7 (y=280..320, solid), col 13 row 8 (y=320..360, solid)
- topRow = 7 (smallest r with solid)
- entity.y = 7*40 - 36 = 244

That's the same problem! Top row is row 7 (pillar), not row 8 (platform).

Hmm. The issue is player overlaps BOTH tiles. We want player to land on platform row 8, not pillar row 7.

OK different approach: I should prevent player from being in a position that overlaps multiple solid tiles in a stacked way. If player is standing on platform row 8 (feet at y=320), they don't overlap row 7 (since player top y=284 and row 7 bottom y=320 — they just touch at the boundary). So actually they shouldn't overlap.

Wait, player y = 284, h = 36, so player y range = 284..320 (i.e., y=284 to y=320-1=319, or y=284 to y=319 inclusive). Pillar row 7 y range = 280..319.

If player bottom = 320 and pillar bottom = 320, they share the boundary y=319. But "overlap" depends on coordinate convention.

I was using Math.floor((entity.y + entity.h - 1) / TILE) which gives the last pixel of the player. With entity.y=284, entity.h=36, entity.y+entity.h-1=319, floor/40=7. So player covers row 7 (last pixel at row 7).

The issue is my player overlaps row 7 even when standing on row 8. That's a problem.

Solution: make player height exactly equal to tile (40), so when on a platform, player y = row_top - 40 = top of player. Player y range = top..top+40-1. Row above ends at player y. Player covers row top only.

Or change player height to 40 (full tile). Then on row 8, player y = 320, player range 320..359. Pillar row 7 = 280..319. No overlap.

Let me use player height = 40 to match tile.

Actually wait, even simpler: player y range should be y to y+h-1. Row 8 covers y=320 to y=359. If player stands on top of row 8, player bottom = 320, player y = 320 - h. If h=40, player y=280, player range 280..319. Pillar row 7 covers 280..319. Overlap with pillar!

Hmm. Player y=280..319 covers both row 7 and row 8 boundaries. The issue is row 7 bottom (319) and row 8 top (320) — player straddles.

OK the cleanest fix: make player height a multiple of TILE so it aligns. Player h=40 = 1 tile. Player stands on row r: player y = (r-1)*40 - (40-40) = wait let me think.

If player h=40 and player stands on top of tile at row r (which spans y=r*40 to (r+1)*40-1, with top edge at y=r*40), then player y = r*40 - 40 = (r-1)*40. Player range = (r-1)*40 to r*40-1. This is exactly row r-1.

So player occupies row r-1 when standing on row r. To not overlap the pillar at row r-1, there must not be a solid at row r-1 in player's columns.

In my level, player on platform row 8 col 13 → player occupies row 7 col 13. But row 7 col 13 is the pillar! Conflict.

So either:
- Move pillar to a different column than the platform
- Remove pillar
- Or adjust player size

Let me redesign without the pillar. Just put the trophy on the platform row 8 directly (at col 13 row 7 — no, that's the row above). 

Wait, trophy at row 7 col 13 means trophy tile at y=280..319. If player stands on row 8 col 13, player at y=280..319 (with h=40). Overlap with trophy tile. Trophy collected.

OK so the trophy is at row 7 col 13, and player standing on platform row 8 col 13 (with h=40) would collect it.

But that's "collecting by standing", not jumping. Is that OK? Yes — the task says player must collect trophy. Doesn't specify how. As long as the path requires reaching the trophy location.

Actually let me make it require a jump. Place trophy on top of a 1-tile pillar. Player has to jump from a lower position to a higher one.

But with h=40, player can only stand on tile boundaries. Let me think...

OK let me use player h=40, but put a 1-tile HIGH platform/pillar. Like:

```
Row 7: . . . . . . . . . . . . . 1 . . . . . .
Row 8: . . 1 1 . . . . . . . . . . . . . . . .
```

Wait, pillar at row 7 col 13 — but no platform at row 8 col 13. So player can't jump onto the pillar from below (need a platform below to jump from).

Let me have lower platform at row 9 cols 11-15:
```
Row 7: . . . . . . . . . . . . . 1 . . . . . .
Row 8: . . . . . . . . . . . . . . . . . . . .
Row 9: . . . . . . . . . . . 1 1 1 1 1 . . . .
```

Player on row 9 platform, jumps up to row 7 pillar (2 tiles up = 80px). At y=-80: 0.25t²-11t+80=0, t²-44t+320=0, t = (44±sqrt(1936-1280))/2 = (44±25.6)/2, t=9.2 or 34.8. At t=9.2, horizontal = 36.8px. So player can jump from row 9 to row 7 if pillar is within 36.8 px horizontally.

Player on col 12 of row 9 (x=484..516 if h=40, or x=488..516 if h=32). Hmm.

Let me reconsider. Just use player h=40. Player y = row_top - 40. Player range = row_top - 40 to row_top - 1.

Actually let me redo more carefully. Tile row r covers y from r*TILE to (r+1)*TILE - 1, i.e., y in [r*TILE, (r+1)*TILE - 1]. So row 8 = y in [320, 359].

If player is "on" row 8 (standing on top edge), player bottom = 320, player y = 320 - 40 = 280, player range = [280, 319].

So player standing on row 8 occupies row 7 (y in [280, 319]). To not collide with pillar, row 7 must be air where player stands.

OK let me restructure:

Player start: col 0, row 11 (standing on ground at row 11).
Player y = 400 (top of row 10), range = [400, 439]. Row 10 covers [400, 439].

To not collide with anything at row 10 col 0, must be air. Good.

Plan:
- Ground row 11 with hazards
- Lower platform at row 9 cols 11-15 (or similar) for jumping
- Higher platform at row 7 cols 12-13 (small ledge)
- Trophy on row 7 col 13 (collected by standing on row 7 ledge)

Wait, if player stands on row 7 col 13 ledge, player y range = [240, 279]. Trophy at row 6 col 13, y range = [240, 279]. Overlap. Collected.

So:
```
Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  T  .  .  .  .  .  .
Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  1  1  .  .  .  .  .  .
Row 8:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 9:  .  .  .  .  .  .  .  .  .  .  .  .  1  1  1  1  .  .  .  .
Row 10: .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 11: #  #  #  #  #  F  #  W  W  W  #  #  #  #  #  #  #  #  E  #
```

Trophy at row 6 col 13 (above the row 7 ledge).

Player path:
- Start at col 0 row 11 (ground)
- Walk right past fire (col 5 is fire, jump over it). 1 tile fire, easy to jump over from ground.
- Continue to water pit (cols 7-9). Jump over (3 tile gap). Can player jump 3 tiles? Earlier calc: ~4 tiles. Yes.
- Continue right to col 10/11. Jump up onto row 9 platform (cols 12-15). 1 tile up + some horizontal. Easy.
- Walk right on row 9 platform to col 12 or 13. Jump up to row 7 ledge (cols 12-13). 2 tiles up.
- Stand on row 7 ledge, trophy collected (row 6 col 13).
- Walk back left or jump down. Get to exit at col 18 row 11.

Enemy on row 9 platform, patrolling cols 12-15. Player must time the jump.

Let me verify jumping to row 7 from row 9 (2 tiles = 80px):
- 0.25t² - 11t + 80 = 0
- t² - 44t + 320 = 0
- t = (44 - sqrt(1936 - 1280))/2 = (44 - 25.6)/2 = 9.2

At t=9.2, horizontal distance = 9.2 * 4 = 36.8 px ≈ 1 tile.

So from col 12 (player x=484..519 with h=40, wait 40 means player is 1 tile wide), player at col 12 has x=480..519. Jumping right at vx=4:
- At t=9.2, x = 480 + 4*9.2 = 480 + 36.8 = 516.8 = col 12.9. Lands on col 13.
- At col 13, y = 7*40 - 40 = 240. Player range [240, 279]. Row 6 col 13 (trophy) y range [240, 279]. Overlap! Collected.

Great.

Player can also jump from col 14 to col 12 (other direction). Let me leave it open.

Now jumping from row 9 down to ground at col 18:
- From col 15 (x=600..639), player y = 9*40 - 40 = 320, range [320, 359].
- Jump right with vx=4, vy=-11 (slight upward first).
- Player needs to land at col 18 row 11 (ground). Player on ground = y=400..439.
- dy = 80 px downward. But player also jumps up first.
- y(t) = 320 - 11t + 0.275t²
- Lands when y >= 400:
  - 0.275t² - 11t - 80 >= 0
  - t² - 40t - 290.9 >= 0
  - t = (40 + sqrt(1600 + 1163.6))/2 = (40 + 52.5)/2 = 46.2
- At t=46.2, x = 600 + 184.8 = 784.8 = col 19.6

Hmm player lands past col 18. But row 11 col 19 is solid (ground). So player lands on col 19, walks left to col 18 (exit). Fine.

Actually wait, player could just jump from row 9 with less horizontal velocity? No, vx is fixed at max 4.

Let me check from col 12 of row 9:
- x=480, y=320, jump right
- Lands at t=46.2 (same, since dy is same)
- x = 480 + 184.8 = 664.8 = col 16.6

Lands on col 16 (or 17). Walk right to col 18. Good.

Alternatively, player can drop from row 9 (no jump) by walking off edge. From col 15, walk right off platform at row 9 col 15 (x > 640). Player falls. At vx=4, after a few frames player x = col 16+. But col 15 row 9 = solid, col 16 row 9 = air. Player walks off, falls down to row 11 ground.

Falling from row 9 (y=320) to row 11 ground (y=400):
- t² - 40t - 290.9 = 0 (from before), t=46.2 frames
- At t=46.2, x = 600 + 4*46.2 = 784.8 = col 19.6 (if vx=4)
- Wait, player can be moving at vx=4 when walking off. Yes.

Hmm but player can also stand still on edge and drop straight down to col 15 row 11. From col 15, player x = 600..639, drops down. Lands at col 15 row 11 (y=400..439, x=600..639). Then walks right.

But col 16 row 11 is solid (ground). So player can walk from col 15 to col 16 to col 17 to col 18 (exit). 

OK plan is solid. Let me code it up.

Player height 40, width 32 (slightly narrower for cleaner collision).

Actually width doesn't matter much as long as it's <= 40. Let me use 32x40.

Player size 32 wide, 40 tall:
- On tile row r (standing on top), player y = r*TILE - 40, x = some_value, range x..x+31, y..y+39.
- Player x range must be within tile range [col*TILE, col*TILE+39].
- If player is on col c, x = c*TILE + 4 (centered), range [c*TILE+4, c*TILE+35].

For collision check, I check all tiles overlapping player AABB. With player x range [c*TILE+4, c*TILE+35], it covers col c only (since player is narrow).

When player on top of row 8, player y range = [320, 359]. Tiles overlapping: row 8 only. Pillar at row 7 col 13 doesn't overlap.

But wait, pillar row 7 is at y range [280, 319]. Player y range [320, 359]. No overlap. 

OK let me finalize with player size 32x40.

Actually one issue: when jumping from col 12 of row 9, the pillar approach. Let me redo:

Player on row 9 col 12 (platform). Player x = 12*40 + 4 = 484, range [484, 515]. Player y = 360 - 40 = 320, range [320, 359]. 

Tile row 7 col 12 = 1 (ledge). Tile row 7 col 13 = 1 (ledge). Player jumps up to ledge.

Jump: vy=-11, vx=+4 (right).
- y(t) = 320 - 11t + 0.275t²
- x(t) = 484 + 4t

Lands on row 7 when y reaches 280 (top of row 7 - 40 = 240, but player y on row 7 = 280 - 40 = 240, so player y range = [240, 279]). Wait, player on row 7 means player y = 7*40 - 40 = 240. So player y = 240 when landed.

So player y(t) = 240 when landing:
- 320 - 11t + 0.275t² = 240
- 0.275t² - 11t + 80 = 0
- t² - 40t + 290.9 = 0
- t = (40 ± sqrt(1600 - 1163.6))/2 = (40 ± 20.94)/2
- t = 9.53 or 30.47

At t=9.53, x = 484 + 38.1 = 522.1. That's col 13 (520..559).

So jumping from col 12 (x=484..515), at t=9.53 player x = 522..553 (after moving 38 px right). Player overlaps col 13 (520..559). Lands on row 7 ledge at col 13.

Trophy at row 6 col 13 (y range [240, 279]). Player on row 7 col 13 (y range [240, 279]). Overlap. Collected!

Let me verify: player on row 7 col 13 means player y = 7*40-40 = 240, range [240, 279]. Trophy at row 6 col 13 y range [240, 279]. Overlap.

OK now I realize the trophy is right above the row 7 ledge. When player stands on the ledge at col 13, they collect trophy. No need to jump again.

The "challenge" is reaching the row 7 ledge. That requires a jump from row 9 platform. Good enough.

Enemy patrolling row 9 platform makes the jump trickier. Player must time it or jump over enemy.

Now let me check enemy position: row 9 col 12-15. Enemy y = 9*40 - 32 = 328. Enemy range y [328, 359]. Hmm wait, if enemy height is 32, enemy on row 9 means enemy y = 360 - 32 = 328.

Enemy patrols col 12 to col 15 (within row 9 platform). Player jumps from row 9 col 12 to row 7. If enemy is at col 12, player must dodge.

Make enemy patrol speed slow (e.g., 1 px/frame). It takes 4*40 = 160 frames to cross the platform. Slow enough to time.

Let me finalize the code. Let me also add the original simple platforms I had (cols 2-3 row 8) to give the level more visual interest, even though player doesn't need them.

Actually let me keep it simple — fewer platforms, clearer path.

Final level:
```
Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  T  .  .  .  .  .  .
Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  1  1  .  .  .  .  .  .
Row 8:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 9:  .  .  .  .  .  .  .  .  .  .  .  1  1  1  1  .  .  .  .  .
Row 10: .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 11: #  #  #  #  #  F  #  W  W  W  #  #  #  #  #  #  #  #  E  #
```

Where:
- 1 = solid platform
- # = ground (solid)
- F = fire
- W = water
- T = trophy
- E = exit

Player start: col 0 row 10 (y=400, x=4)
Enemy: patrols row 9 cols 11-14

Player needs to jump over fire (col 5) and water pool (cols 7-9), then climb up to row 9, jump to row 7 ledge, collect trophy, drop down, go to exit.

Wait, can player walk through fire/water? No, fire and water are tiles 2 and 3. They don't block movement (isSolid returns false for them), but they kill the player on contact.

So player can walk through fire if they jump over it. Walking into fire = die. Same for water.

Player start at col 0. Walking right: cols 1, 2, 3, 4 are ground. Col 5 is fire. Need to jump over.

From col 4 ground (x=160..199), jump right with vx=4, vy=-11:
- Land when y=400 (back to ground level). dy=0. 
- y(t) = 400 - 11t + 0.275t² = 400 when 0.275t² - 11t = 0, t(0.275t - 11) = 0, t = 0 or 40.
- So airtime = 40 frames. Horizontal = 4*40 = 160 px = 4 tiles.
- From col 4 (x=160), at t=40, x = 160 + 160 = 320 = col 8. Lands on col 8.

Hmm landing on col 8 which is WATER. Need to clear water pit (cols 7-9, 3 tiles wide = 120 px).

From col 4, jump over fire+water: fire at col 5 (40 px), water at cols 7-9 (120 px). Total to clear = 4 tiles (cols 5-8) = 160 px. With airtime 40 frames * 4 px/frame = 160 px. Lands on col 8.

But col 8 is water. So lands ON water = die.

Need to jump further. From col 4 (x=160), land at col 9 or 10. Need x = 360 (col 9) or 400 (col 10). With airtime 40 frames and vx=4, lands at x=320. Not enough.

Need higher vx or jump further. Let me increase move speed to 5 px/frame:
- Airtime still 40 frames, horizontal = 200 px. From col 4 (x=160), lands at x=360 = col 9. Still water.

v=6:
- horizontal = 240 px. Lands at x=400 = col 10. Yes!

But moving at 6 px/frame is fast. Let me try other approach.

Alternative: have a step/platform before water pit. Or have fire as 1 tile (jump over), water as 2 tiles.

Let me make water pit 2 tiles (cols 7-8) and fire 1 tile (col 5). So gap = cols 5, 6, 7, 8 = 4 tiles. Hmm still 4 tiles.

Or fire at col 5, water at cols 8-9 (3 tiles gap of normal ground at col 6-7). Then to clear fire+normal+water:
- Fire at col 5: jump over, land on col 6 (ground)
- Continue walking on col 6, col 7
- Jump over water cols 8-9 (2 tiles = 80 px), land on col 10

From col 7 (x=280..319) jump: airtime 40 frames, horizontal 160 px. Land at x=440 = col 11. That's past col 10. OK lands on col 11 (ground).

Hmm that requires precise jumping. Or have more ground.

Let me just simplify: make water pool smaller.

Actually let me reconsider the layout:

```
Row 11: #  #  #  #  #  F  #  W  W  #  #  #  #  #  #  #  #  E  #
```

Fire at col 5, water at cols 7-8 (2 tiles). Player jumps from col 4 over fire to col 6 (ground). Then walks to col 6. Then jumps from col 6 over water to col 9 (ground).

From col 6 (x=240), jump: horizontal 160 px = 4 tiles. Land at x=400 = col 10.

OK that works. Let me update:

```
Row 11: #  #  #  #  #  F  #  W  W  #  #  #  #  #  #  #  #  E  #
```

Cols 0-4 ground, col 5 fire, col 6 ground, cols 7-8 water, cols 9-17 ground, col 18 exit, col 19 ground.

OK let me finalize and code.

Hmm wait, the task says "at least one patrolling enemy". I have one. Good.

Let me also add a small platform somewhere on the left side for visual interest. Like:

```
Row 9:  .  .  .  .  1  1  .  .  .  .  .  .  .  .  .  .  .  .  .  .
```

Small platform at row 9 cols 4-5. Just visual. Or skip it.

Let me also add a small upper platform on the left:

Actually let me keep it simple and add visual interest through tile rendering.

Let me write the final code now. I'll be careful about the physics.

One more consideration: gravity 0.55, jump velocity -11. Let me reconsider max jump height:
- Peak height = 11² / (2*0.55) = 121 / 1.1 = 110 px = 2.75 tiles

So player can jump up 2.75 tiles. From row 9 to row 7 is 2 tiles up — within jump range. From row 9 to row 6 is 3 tiles up — too high.

But player only needs to jump to row 7 (2 tiles), then collect trophy (which is at row 6 — collected by standing on row 7). 

Actually let me re-examine: trophy at row 6 col 13. Player on row 7 col 13 (y range [240, 279]). Trophy at row 6 col 13 (y range [240, 279]). Overlap yes.

But wait, the player standing on row 7 col 13 means player bottom = 280 (top of row 7). Player y = 240 (top of player). Player y range = [240, 279]. Trophy tile at row 6 col 13 = y range [240, 279]. They are at the same y range! Both are between y=240 and y=279.

So player AABB [240, 279] overlaps trophy AABB [240, 279] exactly. rectOverlap returns true. Trophy collected. 

OK let me write the final code.

Actually let me also think about "visual distinguishability" of trophy and exit.

Trophy: yellow cup with handles, sparkles. Visible.
Exit: green door with "EXIT" text. Visible.

Both clearly distinguishable.

Now coding:

Actually one issue I realized — when player jumps straight up from col 12 row 9, lands at col 13 row 7 (per earlier calculation). But the ledge at row 7 is only 2 tiles wide (cols 12-13). So player can land on either col 12 or col 13. Either way they collect trophy (which is at col 13). If they land on col 12, walk right to col 13 to collect.

Let me ensure the ledge is wide enough. 2 tiles should be fine.

OK let me write the code:

```javascript
// (full code as before with these adjustments)
```

Let me also handle the case where player touches trophy BEFORE the proper physics update. Trophy check should be after movement.

Also need to ensure restart resets enemy position. Let me make sure.

Let me finalize and write the file. Time to write it!

Actually one more thought: make sure to handle the "trophy first" feedback properly. If player reaches exit without trophy, show "you need the trophy" message. After collecting, exit becomes "armed".

Let me use a transient message that fades.

OK time to write. Let me also add some particle effects for visual polish.

Let me also reconsider exit interaction. Should the exit trigger win even if player JUST touches it? Yes, on touch.

Player on ground at col 17 row 11 (x=680..719, y=400..439). Walks right. Next frame player x=684..723. Player overlaps col 17 (680..719) and col 18 (720..759). rectOverlap with exit tile (720..759, 400..439) is true. Win.

Good.

OK writing now.

Actually I realize one potential issue: I want a small "pillar" or decoration to make the level more interesting. Let me add some background platforms.

Final level:

```
Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  T  .  .  .  .  .  .
Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  1  1  .  .  .  .  .  .
Row 8:  .  .  1  1  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 9:  .  .  .  .  .  .  .  .  .  .  .  1  1  1  1  .  .  .  .  .
Row 10: .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 11: #  #  #  #  #  F  #  W  W  #  #  #  #  #  #  #  #  E  #
```

Adding small platform at row 8 cols 2-3 for visual interest (not needed for path).

OK let me write it!

I should also confirm player can jump from ground col 4 (or 6) over water. Let me re-verify.

Fire at col 5, water at cols 7-8.

From col 4 (x=160..199), jump:
- vy=-11, vx=4
- Airtime 40 frames, horizontal 160 px
- Land at x=320 = col 8

Col 8 is water. Lands on water = die.

Hmm. From col 6 (x=240..279), jump over water cols 7-8:
- Land at x=240+160=400 = col 10 (ground). 
- But during jump, player passes over cols 5 (fire, but only 1 tile) and 6 (ground, where they jumped from) and 7-8 (water).
- Actually player JUMPS so they're airborne over the water. Touch water while airborne?

If water tile only kills on overlap, then while airborne, player doesn't overlap water tile. Only on landing. Player lands at col 10, no water overlap.

But what about fire at col 5? Player jumps from col 4 to col 8 (or further). Path crosses col 5. If player AABB overlaps col 5 fire tile while airborne, die.

Player at x=160..199 (col 4) at t=0. As player moves right, at some time t, player x = 200..239 (col 5). When does that happen?

Player x(t) = 160 + 4t, player range = [160+4t, 199+4t]. Player overlaps col 5 (200..239) when 160+4t <= 239 and 199+4t >= 200. So 160+4t <= 239 → t <= 19.75, and 199+4t >= 200 → t >= 0.25. So during t=0.25 to 19.75, player overlaps col 5.

During this time, what's player's y? 
y(t) = 400 - 11t + 0.275t²

At t=0.25, y = 400 - 2.75 + 0.017 = 397.27. Player range [397.27, 437.27].
At t=19.75, y = 400 - 217.25 + 107.5 = 290.25. Player range [290.25, 330.25].

Fire at col 5 row 11 = y range [440, 479]. Player y range never reaches that high (max 437.27 at t=0.25). So player doesn't overlap fire while jumping.

OK so player safely jumps over fire from col 4 to col 6 (or further).

Wait my calculation said player lands at col 8 from col 4 with horizontal=160px. Let me recheck.

Player x at t=40 (landing): x = 160 + 160 = 320. Player range [320, 359]. That's col 8 (320..359).

Col 8 is water. Lands on water.

Hmm, let me re-examine the airtime. Player y(t) = 400 - 11t + 0.275t² (assuming start at y=400). Wait, player starts at y=400 (top of row 10 if on row 11). Player falls to ground? Actually player is already on ground. So at t=0, player.y = 400.

Player jumps: vy = -11, position changes. y(t) = 400 + (-11)*t + 0.275*t² (using vy integration with gravity).

Wait, gravity is 0.55/frame, vy increases by 0.55 each frame. Position y(t) = y0 + sum of vy over time. 

If vy(0) = -11, vy(t) = -11 + 0.55*t (continuous approximation).
y(t) = y0 + integral of vy = 400 + (-11)*t + 0.275*t²

At t=0, y=400. Then y decreases (going up) until vy=0, then increases (coming down).

y(t) = 400 - 11t + 0.275t²

To land back at y=400: 0.275t² - 11t = 0, t(0.275t - 11) = 0, t = 40.

So total airtime 40 frames. At t=40, x = 160 + 4*40 = 320 = col 8.

Hmm. So jumping from col 4 with vx=4 lands at col 8. Col 8 = water.

This is a problem. Player will land in water.

Options:
1. Increase vx max speed (e.g., 5 or 6)
2. Reduce water pit width
3. Add a stepping stone
4. Reposition hazards

Let me increase max speed to 5. Then horizontal = 200 px from col 4, lands at x=360 = col 9. Still water (cols 7-8 = water, col 9 = ground).

Wait my layout has water at cols 7-8, so col 9 = ground. Land at col 9. 

vx max 5:
- 4*40 = 160 (vx=4): land at col 8
- 5*40 = 200 (vx=5): land at col 9
- 6*40 = 240 (vx=6): land at col 10

vx=5 gives landing at col 9 (ground). Good.

But wait, I had water at cols 7-8 in the layout above. Let me re-check:
`Row 11: #  #  #  #  #  F  #  W  W  #  #  #  #  #  #  #  #  E  #`
Cols:        0  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19

So cols 7-8 = water (W W), col 9 = ground (#). Land at col 9 works.

But what about fire at col 5? Player at t=0.25 to 19.75 over col 5. Player y at t=0.25 = 400 - 11*0.25 + 0.275*0.0625 = 400 - 2.75 + 0.017 = 397.27. Player y range [397.27, 437.27]. Fire at row 11 = y [440, 479]. Player doesn't reach fire y range. Safe.

Player jumps from col 4 over fire (col 5) and water (cols 7-8) and lands at col 9.

Distance from col 4 to col 9 = 5 tiles = 200 px. With airtime 40 frames and vx=5, horizontal = 200 px. Lands exactly at col 9. 

But during flight, does player pass over water tiles? Yes, at t = (280-160)/5 = 24 to (320-160)/5 = 32 frames, player x = 280..320 (col 7) and x = 320..360 (col 8). Player y at t=24: y = 400 - 264 + 158.4 = 294.4. Player y range [294.4, 334.4]. Water at row 11 y [440, 479]. No overlap. Safe.

Great. vx=5 works.

Now let me reconsider. Player walks at vx=5 max. Walking from col 0 to col 18 = 18 tiles = 720 px at 5 px/frame = 144 frames = ~2.4 sec. Acceptable.

Hmm but I want max speed to feel "natural". Let me try vx=4 and reduce water width to 1 tile.

`Row 11: #  #  #  #  #  F  #  W  #  #  #  #  #  #  #  #  #  E  #`

Now water is just col 7 (1 tile). Fire col 5. Gap = cols 5, 6, 7 = 3 tiles (120 px). Player jumps from col 4 to col 8 (land at col 8). With vx=4, horizontal=160, lands at x=320 = col 8. 

Hmm wait, col 8 is ground in this layout. So lands on col 8. Good. From col 4 jumping over fire (col 5), ground (col 6), water (col 7), lands on col 8 (ground).

During flight, at some time player passes over col 7 (water). Player y at that time... at t=(280-160)/4=30, player x=280 (col 7). At t=30, y=400-330+247.5=317.5. Player range [317.5, 357.5]. Water at y [440, 479]. Safe.

And fire at col 5: at t=0.25-19.75, player y [397.27..437.27] to [290..330]. Fire at [440, 479]. Safe at start (t=0.25 y=397.27..437.27, below fire). 

Wait 437.27 vs fire top 440: player bottom (y+h-1) = 437.27 vs fire top 440. Player doesn't overlap fire (player max y = 437.27 < 440). Safe.

Hmm barely. Let me add a few px buffer. Or make fire 1 tile starting at col 6 (fire top y=440, player bottom max=437.27). Safe.

OK with vx=4 and 1-tile water, layout works:

```
Row 11: #  #  #  #  #  F  W  #  #  #  #  #  #  #  #  #  #  E  #
```

Wait that's different. Let me re-design:

Cols 0-4 ground, col 5 fire, col 6 water, col 7 ground (or col 5 ground col 6 fire col 7 water col 8 ground).

Actually let me think simpler:
- Ground cols 0-4
- Fire col 5 (1 tile)
- Ground col 6
- Water col 7 (1 tile)
- Ground cols 8-17
- Exit col 18
- Ground col 19

Player jumps fire at col 5 from col 4 to col 6. That's 2 tiles = 80 px. With airtime 40 frames and vx=4, horizontal = 160 px. Lands at x = 160 + 160 = 320 = col 8. That's 2 tiles past col 6. Lands on col 8 (ground).

Hmm wait, I want to land on col 6 (just past fire). 1 tile jump = 40 px = 10 frames * 4 px/frame? No, the airtime is fixed at 40 frames (jump up and come back down). So horizontal is fixed at vx * 40.

To land on col 6 (2 tiles from col 4), need 80 px horizontal. But airtime gives 160 px. So player overshoots to col 8.

Unless I allow player to release the jump key (variable jump height). The task says "jumping is allowed only while grounded", which means you can only initiate jump when grounded. Not variable height.

OK with full jump (always), airtime = 40 frames, horizontal = 160 px (vx=4) or 200 px (vx=5).

So player jumps 4 tiles in one jump. To jump over a 1-tile hazard, player has to jump from a position where they land 4 tiles away. The hazard is in between, so they fly over.

For fire at col 5: jump from col 4 (x=160), land at col 8 (x=320). Fire at col 5 is passed over.
For water at col 7: jump from col 6 (x=240), land at col 10 (x=400). Water at col 7 passed over.

But what if there's both fire and water close together? Player can't jump from col 4 over both fire (col 5) and water (col 7) and land safely. Because col 6 must be ground or platform for player to jump from.

If col 5 = fire, col 6 = ground, col 7 = water:
- Player at col 4 jumps over fire to col 6. Lands at col 8 (passed over col 6 in the air and landed past).
- Player at col 6 jumps over water to col 10 (lands past col 8).

So player can do two jumps to clear fire and water.

But that's two jumps, which is fine.

Layout: 
```
Row 11: #  #  #  #  #  F  #  W  #  #  #  #  #  #  #  #  #  E  #
```

Cols 0-4 ground, col 5 fire, col 6 ground, col 7 water, col 8+ ground, col 18 exit.

Player jumps fire from col 4 to col 8 (landing on col 8, passing over fire at col 5 and ground at col 6, 7 is water but they fly over it).

Wait, col 7 = water. Player lands at col 8. But during flight, player passes over col 7. At t when player x = 280..319 (col 7), player y at... let's compute. Player x(t) = 160 + 4t. Player x = 280 when t = 30. At t=30, y = 400 - 330 + 247.5 = 317.5. Player range [317.5, 357.5]. Water at row 11 y [440, 479]. Player y max 357.5 < 440. Safe.

So player can clear both fire and water in one jump from col 4.

Cool. Single jump from col 4 lands player on col 8 (ground). 

Now what about going further? Player on col 8 ground, can walk to col 10 ground (no obstacles cols 8, 9, 10). Jump from col 10 to col 14? Or just walk.

Player walks to col 10 (or 11), then jumps up to row 9 platform (cols 11-14).

From col 10 ground (y=400), jump up to row 9 platform (y=320). 80 px up. Airtime... at peak height 110 px (above row 11 ground). So player goes up 110 px then falls back. Lands at y=400. Total airtime 40 frames, horizontal 160 px. Lands at col 14 (x=560). 

Hmm let me check: jumping from col 10 (x=400..439) with vx=4. At t=40, x = 400 + 160 = 560 = col 14. Player y at landing = 400. But ground at row 11 — does player land on ground or platform?

Player at y=400 (top of player = 360), range [360, 399]. Row 9 platform covers y [320, 359]. No overlap. Player at y=400 is on ground level (row 11 covers [400, 439]). So player walks under platform? No, player is at row 11 level, platform is at row 9 level (above). Player doesn't hit platform.

Hmm. So jumping from ground at col 10 doesn't get player onto platform at row 9.

Player needs to jump onto platform. To land on platform row 9, player needs to be at y=320-40=280 (top of player). Land at y=280 (bottom of player at 320).

Jump from y=400 to y=280 (120 px up). Need vertical velocity that reaches y=280 then returns.

Peak height = 11²/(2*0.55) = 110 px. From y=400, peak = 400-110 = 290. Doesn't reach 280 (only reaches 290).

So player can't jump onto a 3-tile high platform from ground. Need a 2-tile high platform.

2 tiles high: from y=400 to y=320 (80 px up). Peak at 290, which is above 320. So player CAN reach 320 (overshoots and falls back). Land at y=320 when descending.

Actually let me think again. Player jumps with vy=-11. Player y(t) = 400 - 11t + 0.275t². Reaches y=320 when 0.275t² - 11t + 80 = 0, t² - 40t + 290.9 = 0, t = (40 ± sqrt(1600-1163.6))/2 = (40 ± 20.94)/2, t = 9.53 or 30.47.

So player reaches y=320 at t=9.53 (going up) and t=30.47 (coming down). Lands on platform when descending.

At t=9.53, player is rising (vy = -11+0.55*9.53 = -5.76). Player will continue up.
At t=30.47, player is falling (vy = -11+0.55*30.47 = 5.76). Player lands on platform.

At t=30.47, x = 400 + 121.88 = 521.88 = col 13. Lands on col 13 of platform row 9.

Great. Player can jump from col 10 ground to col 13 platform (with vx=4).

From col 10 (x=400), with vx=4, lands at col 13. So player jumps 3 tiles horizontally, lands on row 9 platform.

But what if player jumps straight up (vx=0)? Then player goes straight up to peak (y=290, which is row 7 area) and falls back to y=400. Doesn't reach any platform.

So player must move horizontally while jumping.

OK let me reconsider layout. The platform at row 9 cols 11-14. Player from col 10 ground jumps with vx=4, lands at col 13 (middle of platform). 

Actually let me also think: player must also be able to enter from the left side. If platform only exists at row 9 cols 11-14, player must jump from col 10 (left of platform) onto platform.

OK so the layout works. Let me finalize.

Actually one more issue: enemy on platform row 9. Player needs to dodge enemy while jumping onto platform. If enemy is at col 11 when player jumps from col 10, player flies over enemy (player y at platform level ~ 320, enemy y ~ 328 (top), range [328, 359]). Hmm enemy top y = 328, but player at landing y range [320, 359] overlaps enemy [328, 359]. Player touches enemy = die.

So player must time the jump to avoid enemy.

That's the gameplay challenge. Good.

OK enough planning, let me write the code.

```javascript
// final code
```

Let me also double-check trophy collection. Player on row 7 col 13 (y range [240, 279]). Trophy at row 6 col 13 (y range [240, 279]). rectOverlap(x, y, w, h):
- x: player x range vs trophy x range
- player x: 524..555 (col 13 with offset 4)
- trophy x range: 520..559

Player x [524, 555] overlaps trophy x [520, 559]. Yes overlap.

rectOverlap returns true. Trophy collected.

Now one more thing: after collecting trophy, exit unlocks. Player walks to exit (col 18 row 11). Exit at row 11 col 18 = tile 5 (solid, triggers win).

Player walks from col 17 (x=680..719) to col 18. Player x = 684..723 at next frame (vx=4 from x=680). Player overlaps col 17 (680..719) and col 18 (720..759). rectOverlap with exit at col 18 (x=720..759, y=400..439): yes overlap. Win.

Good.

Let me also add a small decoration platform somewhere for visual interest, maybe on the left.

OK writing now.

Actually let me also reconsider the small decoration. The original Dave style has multiple platforms. Let me add some.

Final level layout:

```
Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  T  .  .  .  .  .  .
Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  1  1  .  .  .  .  .  .
Row 8:  .  .  1  1  1  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 9:  .  .  .  .  .  .  .  .  .  .  .  1  1  1  1  .  .  .  .  .
Row 10: .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
Row 11: #  #  #  #  #  F  #  W  #  #  #  #  #  #  #  #  #  E  #
```

Adding platform at row 8 cols 2-4 (small decoration, doesn't affect path).

OK let me code now.

One more thing — I want to ensure the player can complete the level. Let me trace through:

1. Player start at (1*40+4, 10*40) = (44, 400). Player width 32, height 40.
   - x range [44, 75], y range [400, 439].
   - Standing on ground at row 11 (y [400, 439]). Player occupies row 10 ([400, 439]).
2. Walk right. Player moves with vx up to 4. Accel 0.6/frame, friction 0.78.
3. Approaching col 5 (fire at row 11, y [440, 479]). Player on row 10 (y [400, 439]). No overlap with fire. Player can walk over col 5 without dying.
   Wait! Player y range [400, 439] doesn't overlap fire y range [440, 479]. So player walking on ground at row 10 (which is row 10) doesn't touch fire at row 11.
   
   But the player is ON the ground. The ground is row 11, solid. Player stands on TOP of ground, so player y = top of ground - 40 = 400. Player y range [400, 439]. Below player is ground row 11. Fire is also at row 11 (same row). So fire is BELOW the player or AT the player's feet level.
   
   Actually no. Fire tile at col 5 row 11 means the fire is IN row 11 (y [440, 479]). Player on top of row 11 has player y range [400, 439]. Player is ABOVE row 11. So player doesn't overlap fire.
   
   But the task says "Touching a hazard or enemy causes a loss state". Does walking on top of fire count as touching?
   
   In Dave-style games, walking on top of fire usually kills you (fire is on the floor, you step in it). Let me reconsider.
   
   Actually I think fire should be visually distinct and the player should die when touching it (even walking over it).
   
   Hmm, but my current setup has fire at row 11 (ground level) and player at row 10 (standing on ground). Player doesn't overlap fire visually.
   
   Maybe I should make fire visually extend upward from the ground? Or place fire at the player's level.
   
   Let me place fire as a different element. Maybe fire at row 10 (where player walks). Then player walking on row 10 over col 5 would be on fire. Dies.
   
   Wait no, row 10 is empty air. Player walks at row 10 (on top of row 11 ground). If I put fire at row 10 col 5, fire is at y [400, 439], same as player. Player walking over col 5 row 10 overlaps fire. Dies.
   
   But then the ground at row 11 col 5 is solid. Player can't walk through ground at col 5. They'd be standing on ground col 5.
   
   Wait if player is at col 5 row 10, they're standing on ground at col 5 row 11. And fire is also at col 5 row 10. Player overlaps fire. Die.
   
   But that means player can't walk through col 5 even if fire is just decoration above ground. That's awkward.
   
   Alternative: fire fills the tile AND extends slightly upward visually, with the kill zone covering most of the player. Or fire is at row 10 col 5 and ground at col 5 row 11 is replaced with fire (no ground).
   
   Let me make fire REPLACE ground at col 5. So row 11 col 5 = fire (no ground). Player at col 5 has no ground below them — they fall.
   
   So fire tile IS the ground (passable collision? No, it kills on touch but isn't solid). Player can fall through it.
   
   Actually let me think differently. Let me make fire tiles not solid (player falls through them) but deadly on touch. So:
   - Fire at row 10 col 5 (visually flame on the floor)
   - Ground at row 11 col 5 (solid floor underneath)
   
   Player walking at row 10 col 5 overlaps fire (kill). Player can't pass.
   
   But visually the fire looks like it's on the floor. Player has to jump over it.
   
   So fire at row 10, ground at row 11, player on ground at row 11 (y [400, 439])... wait player is at y [400, 439] (row 10), so player overlaps fire at row 10.
   
   To jump over fire, player jumps. Player y range goes up (y decreases) as they jump. At some point, player y range [some value] doesn't overlap fire [400, 439].
   
   Player y = 400 means player top at y=400. Player y range [400, 439]. If player jumps and y decreases, player moves up. At y=360, player range [360, 399]. Below fire range. No overlap.
   
   But wait, what about while jumping? At t=0, player y=400, range [400, 439], overlaps fire [400, 439]. Touches fire. Die.
   
   Hmm. So jumping from col 4 to col 6 over fire at col 5: at t=0, player is still at col 4 (x range [164, 195]). Player doesn't overlap col 5. Fire at col 5 row 10. No collision. OK.
   
   As player moves right with vx=4, at t = (200-164)/4 = 9, player x = 200, range [200, 231]. Now player overlaps col 5. Player y at t=9: y = 400 - 99 + 22.275 = 323.275. Player range [323.275, 363.275]. Fire at y [400, 439]. No overlap (player max y 363 < fire min 400). Safe.
   
   So player safely jumps over fire.
   
   At landing (t=40), player x = 324, range [324, 355]. That's col 8. Player y = 400, range [400, 439]. Overlaps... col 8 row 10 = air. No fire there. Land on col 8 ground (row 11).
   
   OK so jumping from col 4 over fire at col 5, lands on col 8. Safe.
   
   But wait, between t=0 and landing, does player ever overlap fire? Player x overlaps col 5 when player x range [200, 231] to about [200+88, 231+88] = [288, 319]. During this time, player y is above 363 (at t=9 to t=29 approximately). Safe.
   
   Good. Fire at row 10 works.
   
   But I had fire at row 11 originally. Let me move fire to row 10 so it's more visible/closer to player.
   
   Actually let me have fire at row 10 col 5 (visible flame) AND ground at row 11 col 5 (player can land here if they fall from above).
   
   Hmm but then if player walks at row 10 col 5, they're in fire. If they fall to ground at row 11 col 5, they're safe (fire is at row 10). So fire only kills when player is at the same y level as fire (row 10). 
   
   Wait actually with my collision, fire only kills when player AABB overlaps fire AABB. Fire AABB at row 10 col 5 = (200, 400, 40, 40). Player AABB if walking on ground (y=400, range [400, 439]) overlaps fire (200..239, 400..439). Kills.
   
   OK so walking on ground (which is row 10 from player's perspective) at col 5 row 10 overlaps fire. Player dies.
   
   But then player walking on col 5 ground row 11 = no fire (fire is at row 10, not row 11). Hmm wait fire at row 10 col 5 = fire tile in row 10. Player at col 5 row 10 = standing at y [400, 439]. Player AABB overlaps fire AABB at row 10 col 5. Player touches fire. Dies.
   
   But ground at row 11 col 5 = solid. So player can't actually be at row 11 (they're standing on top, which is row 10).
   
   I think I'm confusing myself. Let me clarify:
   
   In a tile-based platformer:
   - "Ground" is the solid floor (row 11).
   - Player stands on top of ground, so player y = top of ground - player height = 11*40 - 40 = 400.
   - Player's AABB is at y [400, 439], which is "row 10" in tile terms (but player is standing on ground).
   - If there's a fire tile at row 10 col 5, fire is at y [400, 439] (same row as player's AABB).
   - Player walking over col 5 has player AABB overlap fire AABB. Dies.
   
   Yes, fire at row 10 col 5 kills player walking over it.
   
   To avoid fire, player jumps over col 5. Player y goes up (decreases), eventually y < 400, so player AABB [y, y+39] doesn't overlap fire [400, 439]. Safe.
   
   OK so fire at row 10 col 5, ground at row 11 col 5. Player walks on ground row 11 col 5? Wait ground is solid. If player walks to col 5 row 11 ground, they stand on top (player AABB at row 10). But row 10 col 5 has fire. So player AABB overlaps fire. Dies.
   
   Hmm so player can't even stand on col 5 ground because fire above them kills them. Effectively col 5 is impassable.
   
   But what about ground at row 11 col 5 — it's solid but unusable because of fire above.
   
   Alternative: fire at row 11 col 5 (no ground at col 5, fire replaces ground). Player can't stand on col 5 (no ground). Fire is at row 11, so player walking over col 5 (no, player can't be at row 11 if no ground).
   
   Hmm. Let me redesign:
   - Row 11 col 5 = fire (replaces ground). Player can't stand here (no solid tile).
   - Player approaching from col 4 must jump. Player jumps over col 5, lands on col 6 ground.
   
   But fire at row 11 is BELOW player when player jumps. Player jumping from col 4 to col 6: at t=0, player at col 4 (x [164, 195]) on ground. Player y=400. As player moves right, at t=(200-164)/4=9, player x = 200, range [200, 231]. Player overlaps col 5. Player y at t=9 = 323. Player range [323, 363]. Fire at y [440, 479]. No overlap (player max 363 < fire min 440). Safe.
   
   At landing (t=40), player at col 8 (x [324, 355]). Player y = 400. Player range [400, 439]. Overlaps col 8 row 11 = ground. Player stands on ground.
   
   So fire at row 11 (replacing ground) works. Player jumps over it, lands on ground past it.
   
   But visually, fire at row 11 (same level as ground) — does it look like the fire is on the floor? Yes, the fire tile replaces the ground tile, so visually it's a fire patch on the floor. Player jumps over it. Looks like Dangerous Dave.
   
   OK so let me have fire REPLACE ground (tile 2 at row 11). And water REPLACE ground (tile 3 at row 11).
   
   But then those tiles aren't solid. Player can fall through them. That's fine — fire/water are passable but deadly.
   
   For collision, I only treat tile 1 and tile 5 as solid. Fire (2), water (3), trophy (4), exit (5 - solid), air (0) are all passable.
   
   Wait I had exit as solid. Yes, exit (5) is solid for collision but also triggers win on touch.
   
   Let me update: only tile 1 (platform) and tile 5 (exit) are solid.
   
   OK this is fine. Player can walk on exit tile (solid ground).
   
   Let me update level:
   ```
   Row 11: #  #  #  #  #  F  #  W  #  #  #  #  #  #  #  #  #  E  #
   ```
   Where # = solid (1), F = fire (2, replaces ground), W = water (3, replaces ground), E = exit (5, solid).
   
   So at row 11:
   - Cols 0-4 = 1 (ground)
   - Col 5 = 2 (fire, deadly)
   - Col 6 = 1 (ground)
   - Col 7 = 3 (water, deadly)
   - Cols 8-17 = 1 (ground)
   - Col 18 = 5 (exit, solid)
   - Col 19 = 1 (ground)
   
   Player walks on cols 0-4 ground, jumps over fire at col 5, lands on col 8 ground (passes over col 6 ground and col 7 water).
   
   Wait, jumping from col 4 to col 8 with vx=4 and airtime 40 = 160 px. From col 4 (x=164), land at x=324 = col 8. 
   
   Actually player starts at x=164 (col 4 x range [164, 195]). At t=40, x=164+160=324 (col 8 x range [324, 355]). Lands on col 8.
   
   During flight, player passes over cols 5 (fire), 6 (ground), 7 (water). 
   - At col 5: player y range [?, ?]. At t=9, y=323, range [323, 363]. Fire at [440, 479]. Safe.
   - At col 6: ground. Player flying over. No effect.
   - At col 7: water at [440, 479]. Player y range [323, 363] at this time. Safe.
   
   Lands on col 8 (ground). 

   Now let me think about trophy reach. Player from col 8 walks right (cols 8, 9, 10, 11). At col 11, can jump onto row 9 platform.
   
   Wait platform at row 9 cols 11-14. Player from col 10 ground (y=400) jumps with vx=4. At t=30.47 (peak height reached when descending to y=320), x = 400 + 121.88 = 521.88 = col 13. Lands on row 9 col 13.
   
   Or from col 11 ground (x=444..475, y=400) jump: at t=30.47, x = 444 + 121.88 = 565.88 = col 14. Lands on col 14 of platform.
   
   Either way, lands on platform.
   
   Player then jumps from platform to row 7 ledge. From row 9 col 13 (x=524..555, y=320) jump with vx=0 (straight up): goes up to peak y=290-110... wait let me recompute.
   
   Player on platform y=320 (top of player). Jump vy=-11. y(t) = 320 - 11t + 0.275t². Peak when vy=0: t = 11/0.55 = 20. Peak y = 320 - 220 + 110 = 210. So peak at y=210 (row 5).
   
   Hmm too high. Player overshoots row 7 (y=240..279).
   
   At t=9.53, y=320 - 104.83 + 24.96 = 240.13. Player reaches row 7 top (y=240). Player range [240, 279]. 
   
   With vx=0, player stays at col 13. Player x range [524, 555] = col 13. So at peak descent, player lands on row 7 col 13. 
   
   Actually let me re-examine. y(t) = 320 - 11t + 0.275t². At t=9.53, y=240. Player range [240, 279]. Row 7 col 13 = solid. Player overlaps row 7 col 13. Player collides (moving up). Resolution: dy < 0, player.y = (r+1)*TILE = 8*40 = 320. Player snaps back to y=320. vy=0. Hmm that's wrong — player can't move up into row 7.
   
   Oh right, the player is BELOW row 7 ledge (player y=320, row 7 at y=240..279). Player moves up to y=240. At y=240, player top at 240. Player range [240, 279]. Player overlaps row 7 (240..279). 
   
   But row 7 is the ledge. Player moving up into the ledge should stop. With my collision logic: when entity overlaps solid and dy<0, snap to (r+1)*TILE = 320. Player back at y=320. Can't move up.
   
   But the player should LAND on TOP of the ledge, not bonk into it. The issue is the player is trying to land on row 7 from below, but my collision treats all solid overlap as blocking.
   
   The problem: player is below the ledge, jumps up, hits the bottom of the ledge. Should bonk (stop upward motion). Player y stays at the bottom of the ledge.
   
   Bottom of row 7 = (7+1)*40 = 320. So player snaps to y=320 (which is where they started). Bonked.
   
   OK so player can't jump up THROUGH the ledge. They bonk.
   
   So player needs to jump up beside the ledge (col 12 or 14) to land on top of ledge (col 12 or 13).
   
   Let me check. Player at row 9 col 12 (x=484..515, y=320). Jump with vx=+4 (right):
   - x(t) = 484 + 4t
   - y(t) = 320 - 11t + 0.275t²
   
   Player needs to land on row 7 (y=240..279). Lands when y reaches 240 (descending).
   - At t=9.53 (rising), y=240. Player range [240, 279]. Row 7 col 13 (520..559) is solid. Player x at t=9.53 = 484 + 38.12 = 522.12. Player x range [522, 553]. Overlaps col 13. Player collides with row 7 col 13.
   
   But row 7 col 12 is also solid (520..559? No, col 12 = 480..519). Player x range [522, 553] overlaps col 13 (520..559) only. Row 7 col 12 (480..519) not overlapped.
   
   So player at t=9.53 collides with row 7 col 13 (solid, dy<0). Resolution: snap to bottom of row 7 = 320. Player bonks.
   
   Hmm. Player can't jump from row 9 col 12 to row 7 col 13.
   
   Try jumping from row 9 col 11 (x=444..475, y=320) with vx=+4:
   - x(t) = 444 + 4t
   - y(t) = 320 - 11t + 0.275t²
   
   Lands on row 7 when y=240 (descending) at t=30.47. x = 444 + 121.88 = 565.88 = col 14. Player x range [566, 597]. Col 14 = 560..599. Overlap.
   
   But row 7 col 14 is AIR (only cols 12-13 are ledge). So no collision. Player at y=240 range [240, 279]. No solid at row 7 col 14. Player continues falling.
   
   Player keeps falling past y=240. y(t)=240 again at t=30.47 (going down past row 7). Player descends.
   
   At what y does player land? Continues until hits row 9 platform... wait player is above row 9. Player is going down. Eventually hits row 9 again? But player was on row 9 originally. They jumped up and now falling back.
   
   At t=40, y=320 (back to start). Player range [320, 359]. Row 9 col 11 (444..475) overlap. Row 9 col 12 (484..519)... wait x(t) at t=40 = 444+160=604. Player x range [604, 635]. That's col 15.
   
   Row 9 col 15 = air (platform only at cols 11-14). Player falls through to row 11 ground (y=400..439).
   
   So jumping from row 9 col 11 with vx=+4, player ends up on ground at col 15.
   
   That's not what we want.
   
   Try jumping straight up from row 9 col 13 (x=524..555, y=320):
   - vx=0
   - x stays at 524..555
   - y(t) = 320 - 11t + 0.275t²
   
   At t=9.53, y=240 (ascending). Player range [240, 279]. Row 7 col 13 (520..559) solid. Collision (dy<0). Snap to bottom of row 7 = 320. Bonks.
   
   So player can't jump straight up either. Bonks.
   
   To land on top of row 7 col 13, player must approach from the side. Specifically, jump from a horizontal position where they're next to the ledge, with enough horizontal velocity to clear the ledge's bottom.
   
   Ledge row 7 col 13 occupies y [240, 279] and x [520, 559]. To land on top, player must arrive at y=240 with x NOT overlapping the ledge (so player can pass beside it and then land on top).
   
   Alternative: jump over the ledge. Player approaches from left, jumps over the ledge (column 13), and lands on top of col 12 or 13.
   
   Hmm wait, "jump over" means going up and over. If player approaches from below and goes up past the ledge, they bonk.
   
   OK alternative layout: put the ledge such that there's an opening to the side. Like:
   ```
   Row 6: . . . . . . . . . . . . . T . . . . . .
   Row 7: . . . . . . . . . . . . . 1 . . . . . .  <- single tile pillar
   Row 8: . . . . . . . . . . . . 1 1 1 1 . . . . .  <- platform
   ```
   
   Player on platform row 8 cols 12-15. Jump to pillar row 7 col 13.
   
   Player on platform col 13 (x=524..555, y=320). Jump up. At t=9.53, y=240. Player range [240, 279]. Pillar row 7 col 13 (520..559) solid. Collision (dy<0). Snap to bottom of pillar = 320. Bonks.
   
   Same problem. Pillar is right above player.
   
   The issue is that the ledge/pillar is directly above the platform. Player can't jump up through their own column.
   
   Solution: player must jump from a horizontal offset. Like jump from col 12 to col 13 pillar.
   
   From col 12 (x=484..515, y=320) jump with vx=+4:
   - x(t) = 484 + 4t
   - y(t) = 320 - 11t + 0.275t²
   
   At t=9.53, y=240. x = 522.12. Player range [522, 553]. Pillar col 13 (520..559). Collision. Bonks.
   
   So player at col 12 with vx=+4 bonks at the pillar at t=9.53.
   
   What if player jumps with vx=+6?
   - x(t) = 484 + 6t
   - y(t) = 320 - 11t + 0.275t²
   
   At t=9.53, y=240. x = 541.18. Player range [541, 572]. Pillar col 13 (520..559). Overlap [541, 559]. Collision. Bonks.
   
   vx=+8:
   - x(t) = 484 + 8t
   - At t=9.53, x = 560.24. Player range [560, 591]. Pillar col 13 (520..559). Just past pillar. No overlap. Player clears pillar.
   - Player continues up (y still decreasing toward peak at t=20, y=210). Then descends.
   - At y=240 (descending), t=30.47. x = 484 + 243.76 = 727.76 = col 18. Off the platform.
   
   So player needs vx >= ~8 to clear pillar. That's too fast.
   
   OK my layout is fundamentally broken. Let me redesign.
   
   Alternative: make the ledge/pillar offset horizontally from the platform. Like platform at row 9 cols 10-13, ledge at col 15 row 7. Player jumps from col 13 to col 15 (diagonal).
   
   Or: have the platform NOT directly under the ledge. Like:
   ```
   Row 6: . . . . . . . . . . . . . . T . . . . .
   Row 7: . . . . . . . . . . . . . . 1 . . . . .  <- pillar at col 14
   Row 8: . . . . . . . . . . . . . . . . . . . .
   Row 9: . . . . . . . . . . . . 1 1 1 1 . . . . .  <- platform cols 12-15
   ```
   
   Player on platform col 13 jumps with vx=+4 to land on pillar col 14:
   - x(t) = 524 + 4t (col 13 x=524..555)
   - y(t) = 320 - 11t + 0.275t²
   - Lands on row 7 (y=240) descending at t=30.47
   - At t=30.47, x = 524 + 121.88 = 645.88 = col 16
   
   Lands on col 16. Not pillar (col 14).
   
   Try from col 12 (x=484..515) with vx=+4:
   - Lands at x = 484 + 121.88 = 605.88 = col 15
   - Col 15 row 7 = air. Falls through.
   
   Hmm.
   
   OK let me think differently. The pillar should be at a position reachable from the platform.
   
   From col 13 row 9 (x=524..555, y=320), need to land on col 14 row 7 (x=560..599, y=240..279). 
   - vx needed: at t=30.47 (descending to y=240), x = 524 + vx*30.47. Want x = 560+ to 599. vx*30.47 = 36 to 75. vx = 1.18 to 2.46.
   - But max vx = 4. So player can overshoot to col 17 or further.
   
   Alternatively, player jumps up with vx=1 (slower):
   - At t=30.47, x = 524 + 30.47 = 554.47. Just before col 14.
   
   Hmm but vx is controlled by player input, not directly settable.
   
   Let me try another approach: place the pillar/ledge such that player JUMPS UP beside it.
   
   Like:
   ```
   Row 6: . . . . . . . . . . . . . T . . . . . .  <- trophy
   Row 7: . . . . . . . . . . . . 1 1 1 . . . . .  <- small ledge cols 12-14
   Row 8: . . . . . . . . . . . . . . . . . . . .
   Row 9: . . . . . . . . . . . . . 1 1 1 1 . . .  <- platform cols 13-16
   ```
   
   Player on platform col 13 (x=524..555) jumps with vx=+4. Lands on col 16 (x=605.88). Hmm.
   
   This is hard. Let me try yet another layout.
   
   What if I make the platform wider so player has room to approach:
   ```
   Row 7: . . . . . . . . . . . . . . . 1 1 1 . .  <- ledge cols 15-17
   Row 9: . . . . . . . . . . . . 1 1 1 1 1 1 1 1 . .  <- platform cols 12-19
   ```
   
   From col 12 (x=484..515) with vx=+4:
   - Lands at x = 484 + 121.88 = 605.88 = col 15
   - Col 15 row 7 = solid. Lands on top.
   
   From col 13 (x=524..555) with vx=+4:
   - Lands at x = 524 + 121.88 = 645.88 = col 16
   - Col 16 row 7 = solid. Lands on top.
   
   Either works.
   
   Trophy at col 16 row 6 (above the ledge):
   ```
   Row 6: . . . . . . . . . . . . . . . . T . . . .  <- trophy col 16
   ```
   
   Player lands on row 7 col 16, then needs to get trophy. Trophy at row 6 col 16. Player range [240, 279] (standing on row 7). Trophy range [240, 279]. Overlap. Collected.
   
   Now from row 7 col 16, player drops to row 9 platform (4 cols away from exit). Or jumps to exit.
   
   From row 7 col 16 (x=644..675, y=240), drop to row 9 platform cols 12-19 (y=320). Falls down 80 px. But player also wants to get to exit at col 18 row 11.
   
   From row 7 col 16, jump right with vx=+4:
   - x(t) = 644 + 4t
   - y(t) = 240 - 11t + 0.275t²
   - Player falls. At y=400 (ground), t = ? 0.275t² - 11t - 160 = 0, t² - 40t - 581.8 = 0, t = (40 + sqrt(1600 + 2327.3))/2 = (40 + 62.75)/2 = 51.4
   - x = 644 + 205.6 = 849.6 = col 21 (off grid)
   - Player clamped to col 19. 
   
   Hmm overshoots. From row 7 col 15 (x=604..635) jump right:
   - x(t) = 604 + 4t
   - At y=400 (t=51.4), x = 604 + 205.6 = 809.6 = col 20.2. Clamped to col 19.
   
   From row 7 col 14 (x=564..595) jump right:
   - At y=400, x = 564 + 205.6 = 769.6 = col 19.2. Lands on col 19 (ground).
   
   OK player can drop from row 7 ledge and land on ground past exit (col 19), then walk left to col 18 exit.
   
   Or player can drop to row 9 platform from row 7 ledge. From row 7 col 16, fall straight down (vx=0): drops 80 px. Time: y(t) = 240 - 11t + 0.275t² = 320. 0.275t² - 11t + 80 = 0, t = (11 - sqrt(121 - 88))/0.55 = (11 - 5.74)/0.55 = 9.56 frames. Player lands at y=320 (row 9 platform). On col 16 row 9 (solid). 
   
   So player drops onto row 9 platform. Then walks left to col 12 or so. Then drops to ground.
   
   This is getting complex but works.
   
   Let me simplify and just have player drop from row 7 ledge to ground (skipping row 9 platform on the way down). Or place platform differently.
   
   Actually the simplest layout: ledge right above the platform. But then player can't reach it.
   
   Wait, what if the ledge is wider and extends to the side of the platform?
   ```
   Row 7: . . . . . . . . . . . . . . 1 1 1 1 . .  <- ledge cols 14-17
   Row 8: . . . . . . . . . . . . . . . . . . . .  <- empty
   Row 9: . . . . . . . . . . . . 1 1 1 1 . . . . .  <- platform cols 12-15
   ```
   
   Player on col 15 platform (x=604..635, y=320). Jump straight up (vx=0):
   - y(t) = 320 - 11t + 0.275t²
   - At t=9.53, y=240. Player range [240, 279]. Row 7 col 15 (600..639) solid. Collision (dy<0). Snap to bottom of row 7 = 320. Bonks.
   
   From col 14 platform (x=564..595, y=320). Jump with vx=+4:
   - x(t) = 564 + 4t
   - At t=9.53, y=240. x = 564 + 38.12 = 602.12. Player range [602, 633]. Row 7 col 15 (600..639) overlap. Collision. Bonks.
   
   From col 14 platform with vx=+8:
   - At t=9.53, x = 564 + 76.24 = 640.24. Player range [640, 671]. Row 7 col 16 (640..679) overlap. Collision. Bonks.
   
   From col 14 platform with vx=+12:
   - At t=9.53, x = 564 + 114.36 = 678.36. Player range [678, 709]. Row 7 col 16 (640..679) overlap. Collision. Bonks.
   
   From col 14 platform with vx=+16:
   - At t=9.53, x = 564 + 152.48 = 716.48. Player range [716, 747]. Row 7 col 17 (680..719) overlap [716, 719]. Collision. Bonks.
   
   Hmm player keeps bonking the ledge as long as they pass under it.
   
   To NOT bonk, player must not pass under the ledge while moving up. So player must be horizontally past the ledge before moving up.
   
   For row 7 cols 14-17 ledge, player must be at x >= 720 (past col 17) before jumping up past y=240.
   
   But the platform is at cols 12-15, so player max x = 15*40+35 = 635. Can't reach x=720 from platform.
   
   The ledge extends past the platform horizontally. So player can't reach it without passing under.
   
   The fundamental issue: if the ledge is directly above the platform, player can't jump up onto it (bonks the bottom).
   
   The only way to reach a ledge above a platform is if the ledge extends past the platform horizontally, allowing player to jump up outside the ledge's column and land on top.
   
   Example:
   - Platform at cols 10-12
   - Ledge at col 14 (single tile), so ledge x = 560..599
   - Player on platform col 12 (x=484..515). Jump right with vx=+4.
   - x(t) = 484 + 4t
   - At t=9.53 (y=240 ascending), x = 522.12. Player range [522, 553]. Col 14 (560..599) not overlapped. Player clears ledge horizontally.
   - Player continues up. At peak (t=20), y=210. Then descends.
   - At y=240 (descending), t=30.47. x = 484 + 121.88 = 605.88. Player range [606, 637]. Col 14 (560..599) not overlapped (player x > 599). Col 15 (600..639) not overlapped (no ledge at col 15).
   - Player continues down to y=320 (platform level). At t=40, x = 644. Player range [644, 675]. Col 16 (640..679) overlap. Col 16 row 9 = platform? If yes, lands.
   
   So player from col 12 platform with vx=+4 jumps over ledge at col 14 and lands on platform (extending to col 16?).
   
   Or lands on ground if platform doesn't extend to col 16.
   
   Hmm complicated.
   
   Let me try a different layout: a stepped pyramid.
   ```
   Row 6: . . . . . . . . . . . . . . T . . . . .  <- trophy
   Row 7: . . . . . . . . . . . . . . 1 1 1 . .  <- ledge cols 14-16
   Row 9: . . . . . . . . . . . 1 1 1 1 1 1 1 1 1 .  <- platform cols 11-19
   ```
   
   Wait if ledge at row 7 cols 14-16 and platform at row 9 cols 11-19, then ledge is above platform. Same issue.
   
   What if ledge is offset horizontally?
   ```
   Row 7: . . . . . . . . . . . . . . . 1 1 1 .  <- ledge cols 16-18
   Row 9: . . . . . . . . . . . 1 1 1 1 1 1 1 1 1 .  <- platform cols 11-19
   ```
   
   Ledge cols 16-18, platform cols 11-19. Ledge x range [640, 759]. Platform x range [440, 799].
   
   Player on platform col 15 (x=600..635). Jump right with vx=+4:
   - x(t) = 600 + 4t
   - At t=9.53 (y=240), x = 638.12. Player range [638, 669]. Col 15 (600..639) overlap [638, 639]. Col 16 (640..679) overlap [640, 669]. Row 7 col 15 = air. Row 7 col 16 = solid. Collision. Bonks.
   
   Hmm.
   
   From col 14 (x=564..595) jump with vx=+4:
   - At t=9.53, x = 602.12. Player range [602, 633]. Col 15 overlap. Col 16 (640..679) not overlap. Row 7 col 15 = air. No collision at y=240 (since row 7 col 15 air).
   - Player continues. At peak (y=210), x = 640. Player range [640, 671]. Row 7 col 16 (640..679) overlap. But player is moving up (vy still negative). Collision. Bonks.
   - Hmm bonks at col 16.
   
   From col 13 (x=524..555) jump with vx=+4:
   - At t=9.53, x = 562.12. Player range [562, 593]. Col 14 (560..599) overlap. Row 7 col 14 = air. No collision.
   - At t=10 (y=240+something), x = 564. Player range [564, 595]. Col 14 overlap. No collision.
   - At t=15 (y=320+something), x = 584. Player range [584, 615]. Col 14 (560..599) overlap [584, 599]. Col 15 (600..639) overlap [600, 615]. Row 7 col 14-15 = air. No collision.
   - At t=20 (peak), y=210, x=604. Player range [604, 635]. Col 15 overlap. Col 16 (640..679) not overlap. Row 7 col 15 = air. No collision.
   - At t=25 (descending, y=227.5), x=624. Player range [624, 655]. Col 15 overlap [624, 639]. Col 16 overlap [640, 655]. Row 7 col 15 air, col 16 solid. Collision. Player going down. Lands on top of col 16 ledge!
   
   Let me verify y at t=25: y = 320 - 275 + 171.875 = 216.875. Hmm let me recompute.
   
   y(t) = 320 - 11t + 0.275t²
   At t=25: y = 320 - 275 + 0.275*625 = 320 - 275 + 171.875 = 216.875
   
   Player range [216.875, 256.875]. Row 7 col 16 (640..679) overlap. dy > 0 (descending). Resolution: player.y = 7*40 - 40 = 240. Snap to top of row 7.
   
   So player lands on row 7 col 16 at y=240. 
   
   So from col 13 platform with vx=+4, player lands on row 7 col 16 ledge.
   
   Then trophy at row 6 col 16 collected (standing on row 7).
   
   OK this layout works!
   
   Let me finalize:
   ```
   Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
   Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  T  .  .  .  .
   Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  1  1  1  .  .
   Row 8:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 9:  .  .  .  .  .  .  .  .  .  .  .  1  1  1  1  1  1  1  1  .
   Row 10: .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 11: #  #  #  #  #  F  #  W  #  #  #  #  #  #  #  #  #  E  #
   ```
   
   Trophy at row 6 col 15.
   Ledge at row 7 cols 15-17.
   Platform at row 9 cols 11-18.
   
   Wait my earlier analysis had ledge cols 16-18 and trophy col 16. Let me adjust.
   
   Let me re-trace from col 13 platform with vx=+4:
   - Player lands on row 7 col 16 (calculated above).
   - Trophy at row 6 col 16. Player on row 7 col 16. Overlap. Collected.
   
   Let me also check from col 14:
   - x = 564. vx=+4. At t=25, x=664 = col 16. Lands on col 16. Same result.
   
   From col 15:
   - x = 600. vx=+4. At t=25, x=700 = col 17. Lands on col 17. Trophy at col 16. Player on col 17. Doesn't collect trophy. Player walks left to col 16 to collect.
   
   OK works. Player can approach from col 13, 14, or 15 of platform.
   
   But wait, what about getting back to exit? Player on row 7 ledge (cols 15-17). Need to get to exit at col 18 row 11.
   
   From row 7 col 17 (x=684..715, y=240), drop down:
   - Falls to ground at y=400. Player on ground at col 17 (or wherever). 
   - Then walk right to col 18 (exit).
   
   From row 7 col 17 with vx=+4:
   - x(t) = 684 + 4t
   - y(t) = 240 - 11t + 0.275t²
   - At y=400 (ground): 0.275t² - 11t - 160 = 0, t = (11+sqrt(121+176))/0.55 = (11+17.23)/0.55 = 51.33
   - x = 684 + 205.32 = 889.32 = col 22 (off grid). Clamped.
   - Player lands at col 19 (or wherever, clamped).
   
   Hmm overshoots. From row 7 col 15 (x=604..635) drop:
   - vx=+4, x(t) = 604 + 4t
   - At t=51.33, x = 604 + 205.32 = 809.32 = col 20.2. Clamped.
   
   From row 7 col 14:
   - Wait row 7 cols 15-17 are ledge. Col 14 is air.
   
   OK player drops from row 7 ledge, may overshoot exit but ends up on right side. Walks left to exit.
   
   Or drops to platform row 9. From row 7 col 15 (y=240, x=604..635), drop with vx=0:
   - y(t) = 240 - 11t + 0.275t²
   - At y=320 (platform), 0.275t² - 11t + 80 = 0, t² - 40t + 290.9 = 0, t = (40-sqrt(1600-1163.6))/2 = (40-20.94)/2 = 9.53 (or 30.47 going down)
   - Going down, t=30.47. Player lands on platform.
   - Then walks left on platform to drop to ground.
   
   This is more controlled. From col 15 platform, jump up to ledge, drop back to col 15 platform, walk left.
   
   Hmm getting complex but doable.
   
   Let me also reconsider: do I really need the trophy to be elevated? The task says "collect the trophy before the exit completes the level". It doesn't say trophy must require a jump. As long as player must navigate to the trophy.
   
   Let me simplify: put the trophy on the platform (row 9), reachable by walking on the platform. No need for elevated trophy.
   
   New layout:
   ```
   Row 6: . . . . . . . . . . . . . . . . . . . .
   Row 7: . . . . . . . . . . . . . . . . . . . .
   Row 8: . . . . . . . . . . . . . . . . . . . .
   Row 9: . . . . . . . . . . . . 1 1 T 1 1 1 1 .  <- platform cols 12-17 with trophy at col 14
   Row 10: . . . . . . . . . . . . . . . . . . . .
   Row 11: #  #  #  #  #  F  #  W  #  #  #  #  #  #  #  #  E  #
   ```
   
   Trophy at row 9 col 14 (on the platform). Player walks onto platform, collects trophy, walks to exit.
   
   Simple. But maybe too easy. Let me add some challenge.
   
   Actually with enemy patrolling the platform, trophy collection is challenging (player must dodge enemy).
   
   Let me go with this simpler layout.
   
   Final layout:
   ```
   Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
   Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 8:  .  .  1  1  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 9:  .  .  .  .  .  .  .  .  .  .  .  1  1  T  1  1  1  1  .  .
   Row 10: .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 11: #  #  #  #  #  F  #  W  #  #  #  #  #  #  #  #  #  E  #
   ```
   
   Where:
   - # = ground (1)
   - 1 = platform (1)
   - F = fire (2) at col 5
   - W = water (3) at col 7
   - T = trophy (4) at row 9 col 14
   - E = exit (5) at col 18
   
   Player start: col 0 row 10.
   Enemy: patrols row 9 cols 12-17 (the platform).
   
   Path:
   1. Walk right past fire (col 5) — fire at row 11 doesn't overlap player (player at row 10). Wait, fire at row 11 col 5 = y [440, 479]. Player walking at y [400, 439]. No overlap. Safe to walk over.
   
   Hmm but I want fire to be a hazard. If fire is at row 11 (below player), player doesn't touch it.
   
   Let me put fire at row 10 (where player walks) instead.
   
   Actually if fire is at row 11 (replacing ground), player can't walk on col 5 (no ground). So player has to jump over it. That's the hazard.
   
   Let me clarify:
   - Ground at row 11 is solid for collision. Fire (2) and water (3) at row 11 are NOT solid (passable, but deadly).
   - Player walking on ground stands at row 10 (top of ground). Player doesn't touch fire/water at row 11.
   - Fire/water at row 11 only kills if player is actually IN that tile (which they aren't when standing on ground).
   
   Hmm so my hazards don't actually kill. They're just visual.
   
   To make hazards kill, they should be at row 10 (where player walks). Or replace ground so player must jump over.
   
   Option A: Hazards at row 10, ground still solid at row 11. Player walking over hazard tile dies. Hazards block movement (must jump over).
   Option B: Hazards replace ground at row 11. Player can't walk over (no solid ground). Must jump over. Hazards don't kill directly because player isn't in those tiles.
   
   Wait option B doesn't kill. Let me think.
   
   Option C: Hazards at row 10 (visual), AND player must be in hazard tile to die. If player jumps over, they don't touch. If player walks, they touch and die.
   
   With Option C, hazards are at the player's walking level. To pass, player must jump.
   
   But also, ground at row 11 under hazard — is it solid? If solid, player could walk on the ground (row 11), and player AABB (row 10) would overlap hazard (row 10). Player dies.
   
   So with ground solid at row 11 and hazard at row 10, player dies when over the hazard column.
   
   To pass safely, player must JUMP so their AABB is above the hazard.
   
   Let me go with this. Hazards at row 10, ground at row 11 (solid). Player AABB at row 10 (when walking). Dies if over hazard.
   
   Hmm but if player jumps, their AABB goes UP (decreasing y), so AABB at y < 400 doesn't overlap hazard at y [400, 439]. Safe.
   
   Actually let me reconsider. Player AABB is 40 tall. When walking on ground (top of row 11 = y=400), player y = 360 (so AABB [360, 399]). Hmm let me recompute.
   
   If player y = top of player = 360, player AABB [360, 399]. Then player top of head at 360, bottom at 399. Player stands with feet at 400 (top of ground row 11).
   
   Wait that's the same as before. Player feet at 400, head at 360. Player AABB [360, 399]. Row 10 covers y [400, 439]. So player AABB doesn't overlap row 10 — player is at row 9 (y [360, 399]).
   
   Hmm I had this wrong earlier. Let me recompute tile ranges.
   
   Row r covers y from r*40 to (r+1)*40 - 1, i.e., y in [r*40, (r+1)*40 - 1]. 
   - Row 9: y [360, 399]
   - Row 10: y [400, 439]
   - Row 11: y [440, 479]
   
   Ground at row 11, player stands on top. Player bottom = top of ground = y = 440 (top edge of row 11). Player y = 440 - 40 = 400. Player AABB [400, 439]. That's row 10.
   
   OK so player AABB is at row 10 when standing on ground row 11. Player doesn't overlap row 9.
   
   Hazards at row 11 col 5 = fire. Player AABB [400, 439]. Fire AABB [440, 479]. No overlap. Player walking on col 5 ground (player AABB at row 10, ground at row 11) doesn't touch fire.
   
   So hazard at row 11 doesn't kill (player at row 10).
   
   To kill, hazard should be at row 10 (same as player AABB).
   
   But row 10 col 5 with hazard means hazard at y [400, 439]. Player AABB over col 5 = y [400, 439]. Overlap. Dies.
   
   But what about ground at row 11 col 5? It's solid. Player walks on it, AABB at row 10. If row 10 col 5 has hazard, player AABB overlaps hazard.
   
   So with both ground (row 11) and hazard (row 10) at col 5, player walking over dies.
   
   To avoid, player jumps. Player AABB goes up (y < 400), doesn't overlap hazard at y [400, 439].
   
   OK let me go with this: hazards at row 10, ground at row 11.
   
   New layout:
   ```
   Row 10: .  .  .  .  .  F  .  W  .  .  .  .  .  .  .  .  .  .  .  .
   Row 11: #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  E  #
   ```
   
   Wait this makes every "ground" column have both row 10 (air or hazard) and row 11 (solid). Player walks on row 11 (standing, AABB at row 10). If row 10 col is hazard, player dies.
   
   So hazards at row 10 (where player's AABB is) kill on overlap. Ground at row 11 is solid for collision (player can walk on it).
   
   But visually, the hazard at row 10 col 5 = y [400, 439] = same y level as player's body. Visually player walks INTO the fire/water.
   
   Yes! That's the classic Dave style. Player walks on the floor, fire/water on the floor.
   
   OK let me finalize:
   ```
   Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
   Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 8:  .  .  1  1  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 9:  .  .  .  .  .  .  .  .  .  .  .  1  1  T  1  1  1  1  .  .
   Row 10: .  .  .  .  .  F  .  W  .  .  .  .  .  .  .  .  .  .  .  .
   Row 11: #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  E  #
   ```
   
   Hazards at row 10 cols 5 (fire) and 7 (water). Player must jump over.
   
   Player start: col 0 row 10. Player AABB at y [400, 439]. But row 10 col 0 = air. Player on ground row 11 col 0 = solid. Player stands at y=400. OK.
   
   Actually player start should have air above. Row 10 col 0 = air. Player AABB at row 10 col 0. No hazard there. OK.
   
   Path:
   1. Walk right from col 0.
   2. At col 5, fire ahead. Jump.
   3. From col 4 ground (x=164..195), jump with vx=+4:
      - Airtime 40 frames, horizontal 160 px.
      - Land at x=164+160=324 = col 8 (x range [324, 355]).
      - During flight, player y < 400 (above hazard row 10).
      - At col 5 (x=200..239), player y at midpoint of flight: y = 400 - 11*20 + 0.275*400 = 400 - 220 + 110 = 290. Player AABB [290, 329]. Fire AABB [400, 439]. No overlap.
      - Safe. Lands at col 8.
   4. Walk right from col 8. At col 7 water — already past it. Col 9 onwards is ground.
   5. Walk to col 10 or 11. Jump onto platform row 9.
      - From col 10 (x=404..435, y=400) jump with vx=+4:
        - y(t) = 400 - 11t + 0.275t². Reaches y=320 (platform top - 40) at t=30.47 (descending).
        - x at t=30.47 = 404 + 121.88 = 525.88 = col 13. Player AABB [525, 556]. Col 13 row 9 (520..559) solid. Player lands on top.
   6. On platform, walk right to collect trophy at col 14. Watch for enemy.
   7. After trophy, walk to exit. Exit at col 18 row 11 = solid ground (replaces ground).
   8. From col 17 (x=684..715) platform, drop to ground at col 17. Walk right to col 18 (exit).
      - From col 17 platform (x=684..715, y=320), drop straight down (vx=0): falls to ground at y=400. Falls 80 px. Time: 0.275t² - 11t + 80 = 0, t=9.53 or 30.47. Lands at t=9.53.
      - Actually wait y(t) = 320 - 11t + 0.275t². At t=9.53, y = 320 - 104.83 + 24.96 = 240.13. That's row 6, not 320. Hmm.
      - Let me recompute. 0.275t² - 11t + 80 = 0 means y - 320 = 0 (since 320 = y0 and 80 = -dy). y(t) = 320 - 11t + 0.275t². y(t) = 320 when -11t + 0.275t² = 0, t = 40 (or 0). So at t=40, y=320. Same as start.
      - Actually I want y(t) = 400 (ground). -11t + 0.275t² = 80, t² - 40t - 290.9 = 0, t = (40 + sqrt(1600+1163.6))/2 = 46.2.
      - At t=46.2, x = 684 + 184.8 = 868.8 = clamped.
   9. Player clamped to col 19 (x=760..795). Then walks left to col 18 exit. Win!
   
   Actually wait the player would fall through row 9 col 17 — no, row 9 col 17 = platform (1). Player walking on it. To drop, player walks off edge.
   
   Player on col 17 platform (x=684..715, y=320). To drop, player walks right past x=719 (end of col 17 = 679..719). Player x > 719 means player is at col 18.
   
   Player AABB x [716, 747] at next frame (vx=4). Player overlaps col 17 (680..719) and col 18 (720..759). Row 9 col 17 solid (player still supported). Row 9 col 18 air (player falls).
   
   Hmm but my collision: if any tile in player AABB is solid, player is supported. Player AABB overlaps col 17 row 9 (solid). Player is supported. Doesn't fall.
   
   Wait, that's a problem. Player on the EDGE of a platform — half on, half off. My collision says player is still on platform. So player can walk past the edge without falling?
   
   Let me think. Player AABB [716, 747] (mostly off the platform). Player's left foot is at col 17 (last 4 px), right foot is at col 18 (no support).
   
   In real physics, player would tip and fall. In my simplified collision, player is supported as long as ANY part overlaps solid.
   
   For simplicity, let me make the platform snap to grid: player x is forced to align with tile boundaries? No, that would make movement jerky.
   
   Alternative: detect when player has mostly walked off platform and start falling.
   
   Hmm let me think. Actually the simplest fix: when player walks off, the part of player over the platform still gets collision support. Player doesn't fall until they're fully past the edge.
   
   So player at x [720, 751] (fully past col 17, now on col 18): player AABB x range [720, 751]. Row 9 col 18 = air. No support. Player falls.
   
   But during x=716..719 (still overlapping col 17), player is supported. Player doesn't fall yet. Then once x > 719, player falls.
   
   So player walks "off" the edge at x=720 (fully past col 17). Then falls.
   
   This means player can walk slightly off the edge (4 px) before falling. Acceptable.
   
   Actually wait, player at x=716..747 overlaps col 17 (last 4 px). Supported. Next frame x=720..751 — no overlap with col 17 (since col 17 ends at 719). Now player AABB only overlaps col 18 (720..759). Row 9 col 18 = air. No support. Player falls.
   
   So player falls starting from x=720. Player at edge of col 17 (x=716..719, partially over col 17) was supported. Now unsupported.
   
   This works. Player walks to edge, then 4 px more, then falls.
   
   OK that's fine. Let me also verify enemy AI: enemy patrols col 11 to col 16 (or 12 to 17) of platform row 9.
   
   Enemy on row 9 platform, y = 320 (top), height 32, so y = 320 (top), range [320, 351]. Hmm player on row 9 y=320..359. Enemy and player both at y=320..351 (overlap). 
   
   Actually enemy height 32, top at y=320, range [320, 351]. Player height 40, top at y=320, range [320, 359]. Both stand on row 9 platform.
   
   For visual clarity, make enemy smaller. Enemy height 32, slightly different y. Actually let me just have enemy same height as player (40) for simplicity.
   
   Or enemy height 32, standing on platform. Enemy y = 328 (so feet at 360). Player y = 320 (feet at 360). Both feet at 360. Visually similar.
   
   Let me use enemy height 32.
   
   OK enough planning. Let me code!
   
   Final code time. I'll write the index.html file now.
   
   Let me also re-examine my level one more time:
   ```
   Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
   Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 8:  .  .  1  1  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 9:  .  .  .  .  .  .  .  .  .  .  .  1  1  T  1  1  1  1  .  .
   Row 10: .  .  .  .  .  F  .  W  .  .  .  .  .  .  .  .  .  .  .  .
   Row 11: #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  E  #
   ```
   
   Hazards at row 10 (where player walks). Ground at row 11 (player stands on). Exit at col 18 row 11 (replaces ground).
   
   Player path verification:
   - Start col 0 row 11 (player AABB at row 10 col 0). Walk right.
   - Cols 1-4 safe. Col 5 fire at row 10 — overlap if walking. Must jump.
   - From col 4 (x=164..195) jump with vx=+4: lands at col 8 (x=324..355). Skips fire at col 5 and water at col 7.
   - Wait, lands at col 8 means player AABB over col 8 row 10. Row 10 col 8 = air. OK.
   - But also row 11 col 8 = solid ground. Player lands on it.
   - After landing, player at col 8 row 10 (AABB). Walk right.
   - Continue to col 10 or 11. Jump up to platform.
   - From col 10 (x=404..435, y=400) jump with vx=+4: lands at col 13 row 9 (x=525..556, y=320).
   - On platform, collect trophy at col 14. Watch enemy.
   - Walk to right edge of platform (col 17), drop down to ground.
   - Walk to col 18 exit. Win!
   
   Looks good. Let me code it.
   
   Actually wait, jumping from col 4 to col 8 skips both fire and water. Let me verify player doesn't hit anything during flight.
   
   At t when player x overlaps col 5 (x=200..239): t = (200-164)/4 = 9 to (239-164)/4 = 18.75. So t=9 to 18.75.
   At t=9, y = 400 - 99 + 22.275 = 323.275. Player AABB [323, 362]. Fire AABB [400, 439]. No overlap. Safe.
   At t=18.75, y = 400 - 206.25 + 96.7 = 290.45. Player AABB [290, 329]. Safe.
   
   At t when player x overlaps col 7 (x=280..319): t = (280-164)/4 = 29 to (319-164)/4 = 38.75.
   At t=29, y = 400 - 319 + 231.275 = 312.275. Safe (y < 400).
   At t=38.75, y = 400 - 426.25 + 412.86 = 386.61. Player AABB [386, 425]. Water AABB [400, 439]. Overlap [400, 425]! Player touches water.
   
   OH. At t=38.75, player y range [386, 425] overlaps water at row 10 col 7 = [400, 439] overlap [400, 425]. Player dies!
   
   Hmm. Let me recalculate. y(t) = 400 - 11t + 0.275t². At t=38.75:
   y = 400 - 11*38.75 + 0.275*38.75² = 400 - 426.25 + 0.275*1501.5625 = 400 - 426.25 + 412.93 = 386.68
   
   Player AABB [386.68, 426.68]. Water at y [400, 439]. Overlap [400, 426.68]. Yes overlap.
   
   So player dies in water at t=38.75.
   
   Player needs to clear water too. Either jump higher (not possible with fixed jump) or land past water.
   
   Player lands at x = 164 + 4*40 = 324 = col 8. Player at col 8 from t = (280-164)/4 = 29 (no, x=324 when t=40, x=280 when t=29). Player x range [324, 355] at t=40 (landing). So player is over col 8 only at t=40. Before that, player is over col 7.
   
   At t=40 (landing), y=400. Player AABB [400, 439]. Water AABB [400, 439] at col 7. Player x at col 8 (324..355), col 7 (280..319). Player x range [324, 355] overlaps col 8 (320..359) only, not col 7 (280..319). So at landing, no overlap with water at col 7.
   
   But during flight (t=29 to t=38.75), player is over col 7. At those times, player y range [386, 425] overlaps water at col 7 row 10 [400, 439]. Player dies.
   
   So jumping from col 4 to col 8, player passes over water at col 7 while descending, and touches water.
   
   I need to avoid this. Options:
   1. Move water further away (e.g., col 9 instead of col 7)
   2. Make water pool smaller (only 1 tile wide but where player doesn't fly over)
   3. Increase jump height so player clears water
   
   With current jump height (peak at y=290), player descends through y=400 at t=40. During descent from y=290 (t=20) to y=400 (t=40), player crosses y=400 at t=40. Just before landing, player is below y=400 (descending).
   
   When player y range [y, y+39] starts to overlap [400, 439]: when y+39 >= 400, i.e., y >= 361. So when player y reaches 361, player AABB starts overlapping water y range.
   
   y(t) = 361: -11t + 0.275t² = -39, t² - 40t + 141.8 = 0, t = (40-sqrt(1600-567.3))/2 = (40-32.05)/2 = 3.97 (going up) or 36.03 (going down).
   
   At t=36.03, y=361. Player AABB starts overlapping water. At t=40, player AABB [400, 439] fully overlaps water.
   
   So during t=36.03 to 40, player AABB overlaps water AABB IF player x range overlaps water x range.
   
   Player x range at t=36.03: x = 164 + 4*36.03 = 308.12. Player AABB [308, 339]. Water at col 7 (280..319) overlap [308, 319]. Yes overlap. Player dies.
   
   So this jump kills the player.
   
   Need to either:
   a) Land before t=36.03 (i.e., land while still above water y range)
   b) Have player x past water before t=36.03
   
   (a): Need y range not to reach 361 by landing. Landing y=400 means AABB [400, 439] always overlaps y=400+ unless... hmm.
   
   Actually if player lands at t<36.03 (i.e., before descending to y=361), then player hasn't entered water zone yet. But player can only land on solid ground. Ground is at row 11 (y=440..479, top at 440). Player lands when player bottom touches ground top (y=440), i.e., player y = 440 - 40 = 400. So landing y=400 always. And at y=400, player AABB [400, 439] overlaps water [400, 439].
   
   So as long as player x overlaps water x range at landing, player dies.
   
   To avoid: ensure player x range doesn't overlap water at landing. Land at col where there's no water.
   
   If water at col 7 only (1 tile), then to not overlap water, player x must be either < 280 or > 319. So player at col 6 (x=240..279) or col 8 (x=320..359) or further right.
   
   Landing at col 8 (x=320..359): no overlap with col 7 (280..319). Safe at landing.
   
   But during flight, player passes over col 7 (x=280..319) when player x range [280, 319]. From above analysis, this happens around t=29 to 34.75 (when player x range [280, 319]).
   
   Wait let me redo. Player x range [x, x+31] where x = 164 + 4t. Player x range overlaps col 7 (280..319) when x <= 319 and x+31 >= 280. So 164+4t <= 319 → t <= 38.75, and 164+4t+31 >= 280 → 4t >= 85, t >= 21.25. So t = 21.25 to 38.75.
   
   At t=21.25, y = 400 - 233.75 + 124.27 = 290.52. Player AABB [290, 329]. Safe (y < 400).
   At t=38.75, y = 386.68. Player AABB [386, 425]. Overlaps water.
   
   So during t=21.25 to 38.75, player x range overlaps col 7. Player y < 400 (above water) for most of this time. At t=36.03, player y = 361 (player AABB starts to overlap water y range). So during t=36.03 to 38.75, player touches water.
   
   Need to clear col 7 before t=36.03. Player x range must not overlap col 7 at t=36.03. Player x range [x, x+31] overlaps col 7 (280..319) when x <= 319 and x+31 >= 280. At t=36.03, x = 164 + 144.12 = 308.12. Player x range [308, 339]. Overlaps col 7 [280, 319] from 308 to 319. So overlap.
   
   To not overlap at t=36.03: x+31 < 280 → x < 249 (player past col 7 to the left, but then player is at col 6 max which doesn't reach col 7+). Or x > 319 (player past col 7 to the right). x > 319 means 164 + 4*36.03 = 308.12 < 319, so no. Player would need to be at x >= 320 at t=36.03. So x = 320, t = (320-164)/4 = 39. But we're looking at t=36.03.
   
   So player must have higher vx to clear water. With vx=4, can't make it.
   
   Let me try vx=5:
   - x(t) = 164 + 5t
   - At t=36.03 (y=361), x = 164 + 180.15 = 344.15. Player x range [344, 375]. Not in col 7 (280..319). Safe!
   - At t=40 (landing), x = 364. Player x range [364, 395]. Col 9 (360..399) overlap. Player at col 9. Row 10 col 9 = air. Player lands on row 11 col 9 ground.
   
   So vx=5 works. Player jumps from col 4 over fire (col 5) and water (col 7), lands at col 9 ground.
   
   But wait, what about col 6 (between fire and water)? Player flies over col 6 too. Col 6 is air, no hazard. Safe.
   
   So with max speed 5, player can clear both hazards.
   
   Let me set max speed = 5.
   
   But then jumping from col 10 to platform: from col 10 (x=404..435) with vx=+5:
   - At t=30.47 (y=320 descending), x = 404 + 152.35 = 556.35. Player x range [556, 587]. Col 13 (520..559) overlap [556, 559]. Col 14 (560..599) overlap [560, 587]. Row 9 col 13 solid, col 14 has trophy (passable).
   - Player AABB overlaps row 9 col 13 solid. Lands on top.
   - At landing, y=320, x range [556, 587]. Player AABB [556, 587, 320, 359]. Row 9 col 13 (520..559, 320..359) overlap [556, 559]. Row 9 col 14 (560..599, 320..359) overlap [560, 587]. Player lands on top of platform at col 13/14 area.
   - Trophy at row 9 col 14 (560..599, 320..359). Player AABB overlaps trophy. Collected!
   
   So jumping from col 10 with vx=5 lands player on platform and collects trophy in one motion. Nice.
   
   OK let me set max speed = 5.
   
   Hmm but then platform jumping from col 11 might overshoot:
   - From col 11 (x=444..475) with vx=+5:
     - At t=30.47, x = 444 + 152.35 = 596.35. Player x range [596, 627]. Col 14 (560..599) overlap [596, 599]. Col 15 (600..639) overlap [600, 627]. Row 9 col 14 trophy (passable). Row 9 col 15 solid.
     - Player AABB overlaps col 15 solid. Lands on top.
   - Trophy at col 14. Player at col 15 after landing. Doesn't auto-collect. Walk left to col 14.
   
   OK either way, player reaches platform and trophy.
   
   Now from col 14 with vx=+5:
   - At t=30.47, x = 564 + 152.35 = 716.35. Player x range [716, 747]. Col 17 (680..719) overlap [716, 719]. Col 18 (720..759) overlap [720, 747]. Row 9 col 17 solid, col 18 air.
   - Player AABB overlaps col 17 solid. Lands on top.
   - At col 17, no trophy. Walk left.
   
   OK works.
   
   Now max speed 5. Let me also verify walking speed is reasonable. Player walks at 5 px/frame from col 0 to col 18 = 18*40 = 720 px = 144 frames = 2.4 sec. Reasonable.
   
   Acceleration: 0.6/frame to max 5. Time to max: 5/0.6 = 8.3 frames. Quick.
   
   Friction: when no input, vx *= 0.78. After 1 frame, vx = 0.78 * 5 = 3.9. After 2 frames, 0.78 * 3.9 = 3.04. After 5 frames, ~1.5. Decent.
   
   OK let me finalize the code.
   
   Actually let me reconsider the level once more:
   
   Hazards at row 10. But row 10 is the player's AABB level when standing on ground. So hazards at row 10 = player touches them when standing on ground.
   
   But wait, what if there's a hazard at row 10 col 0 (player start)? Player starts at col 0 row 10 (AABB). Player would immediately die.
   
   Make sure player start column has no hazard. Col 0 row 10 = air (no hazard). OK.
   
   Final level:
   ```
   Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
   Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 8:  .  .  1  1  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 9:  .  .  .  .  .  .  .  .  .  .  .  1  1  T  1  1  1  1  .  .
   Row 10: .  .  .  .  .  F  .  W  .  .  .  .  .  .  .  .  .  .  .  .
   Row 11: #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  E  #
   ```
   
   I'll add a small upper platform on the right side for visual interest:
   ```
   Row 7: . . . . . . . . . . . . . . . . . 1 1 1 .
   ```
   Just for decoration. Or skip.
   
   Let me just add the simple platform at row 8 cols 2-3 (visual interest).
   
   Actually let me simplify and remove it. Cleaner level.
   
   OK final level (clean):
   ```
   Col:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
   Row 0:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 1:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 2:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 3:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 4:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 5:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 6:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 7:  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 8:  .  .  1  1  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .
   Row 9:  .  .  .  .  .  .  .  .  .  .  .  1  1  T  1  1  1  1  .  .
   Row 10: .  .  .  .  .  F  .  W  .  .  .  .  .  .  .  .  .  .  .  .
   Row 11: #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  E  #
   ```
   
   Small platform at row 8 cols 2-3 (decoration, optional, not needed for path).
   
   OK let me write the code.

Actually one more thing — the player size. With player h=40, player y range when on ground = [400, 439]. Row 10. But row 10 col 5 = fire. So player walks over col 5 ground at row 11, AABB at row 10 col 5, overlapping fire. Dies.
   
Yes that's the intended behavior.
   
Wait but my movement starts at col 0. Col 0 row 10 = air. Col 0 row 11 = ground (#). Player AABB at row 10 col 0. Player can walk right.
   
At col 1 row 10 = air. Player AABB at row 10 col 1. Walk.
...
At col 4 row 10 = air. Walk.
At col 5 row 10 = fire. Player AABB overlaps fire. Dies if walking.
   
But wait, player needs to be standing on ground at col 5 row 11 (solid). Player AABB at row 10 col 5 (over fire). Yes overlap. Player walking onto col 5 (over fire) dies.
   
To avoid, player jumps before reaching col 5. Jump from col 4 over col 5 to col 6+.
   
OK. Let me code.
   
Hmm actually wait, I realize: when player walks onto col 5 (player AABB over col 5 row 10 fire), player touches fire. But player also has ground at row 11 col 5 (solid). So player is supported AND touching fire. Dies from fire.
   
OK. Need to jump before reaching col 5.
   
Final code. Let me write it now. I'll be thorough and test it.
   
Actually one issue: hazards at row 10 (where player AABB is). The platform at row 9 is solid (player stands on top). Player on platform row 9, AABB at row 8 (top of player y = 320, AABB [320, 359]). Row 8 col 14 = air. Player on platform row 9. No hazards at row 8. Safe.
   
Wait row 8 has the decoration platform at cols 2-3. Player on row 9 platform isn't affected by row 8 decoration. OK.
   
Now hazard at row 10 col 14 — would player on platform row 9 col 14 touch hazard at row 10 col 14? Player AABB [320, 359]. Hazard AABB [400, 439]. No overlap. Safe.
   
Good. Hazards only affect player on ground level.
   
OK writing the code now!

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dave's Tile Adventure</title>
<style>...</style>
</head>
<body>
...
<script>
... complete game code
</script>
</body>
</html>
```

Let me write the full code with all the considerations.

Also, I want to ensure:
1. Player size 32x40 (or similar) for clean collision
2. Gravity 0.55, jump velocity -11
3. Max speed 5
4. Hazards at row 10 (where player AABB is when on ground)
5. Trophy on platform (collected by walking over)
6. Exit on ground (replaces ground tile)
7. Enemy patrols platform
8. Restart works

Let me write it out.

Actually I realize there's also the issue that player needs to be able to jump from a hazard tile. If player walks into fire, dies. So they can't recover from touching hazard.

But if player is jumping and momentarily over fire (in air), they don't die (AABB not overlapping fire). So jumping over is fine.

But once they land on hazard tile (e.g., land on fire), they die. Let me make sure that's handled.

OK code time.

Let me write a complete game now.

One more concern: with max speed 5 and ground friction 0.78, when player stops pressing direction, they slide a bit. That's fine.

Also, jumping only when grounded. Let me check my logic:
- onGround is set to true in moveY when player lands (dy > 0 and overlap).
- onGround is set to false when player is in air (dy > 0 and no overlap, or jumping up).
- Jump allowed only when onGround = true.

This should work.

Let me also think about coyote time / jump buffer. Not needed per spec. Just simple "jump only when grounded".

OK final code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dave's Tile Adventure</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: #05050d;
  color: #e8e8f0;
  font-family: 'Courier New', monospace;
  overflow: hidden;
}
body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 10px;
  background: radial-gradient(ellipse at top, #1a1a3a 0%, #05050d 100%);
}
h1 {
  font-size: 24px;
  letter-spacing: 4px;
  color: #ffcf4a;
  text-shadow: 2px 2px 0 #6a3a00, 4px 4px 0 #000, 0 0 20px rgba(255,207,74,0.3);
  margin-bottom: 8px;
}
#game-wrap {
  position: relative;
  border: 4px solid #2a2a4a;
  box-shadow: 0 0 30px rgba(80,80,160,0.4), inset 0 0 0 2px #000;
  background: #000;
  border-radius: 4px;
}
canvas {
  display: block;
  image-rendering: pixelated;
}
#hud {
  display: flex; justify-content: space-between; align-items: center;
  width: 800px; max-width: 100%;
  margin-top: 10px;
  padding: 8px 14px;
  background: #1a1a2e;
  border: 2px solid #3a3a5a;
  border-radius: 4px;
  font-size: 14px;
}
#hud .lbl { color: #8888aa; margin-right: 4px; }
#hud .val { color: #ffcf4a; font-weight: bold; }
#hud .item { display: flex; align-items: center; }
button {
  padding: 7px 20px;
  background: #ffcf4a;
  color: #1a1a2e;
  border: 2px solid #6a3a00;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s;
}
button:hover { background: #ffe07a; }
button:active { transform: translateY(1px); }
#controls {
  margin-top: 8px;
  font-size: 13px;
  color: #aaaacc;
  text-align: center;
  letter-spacing: 1px;
}
.key {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 2px;
  background: #2a2a4a;
  border: 1px solid #5a5a7a;
  border-bottom: 3px solid #5a5a7a;
  border-radius: 3px;
  color: #ffcf4a;
  font-weight: bold;
  font-size: 12px;
  min-width: 20px;
  text-align: center;
}
#overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  background: rgba(0,0,0,0.75);
  pointer-events: none;
  border-radius: 4px;
}
#overlay.show { display: flex; }
#overlay .msg {
  font-size: 38px;
  color: #fff;
  text-shadow: 3px 3px 0 #000;
  margin-bottom: 8px;
  letter-spacing: 3px;
  font-weight: bold;
}
#overlay .msg.win { color: #6cff6c; text-shadow: 3px 3px 0 #004400, 0 0 20px rgba(108,255,108,0.5); }
#overlay .msg.lose { color: #ff5050; text-shadow: 3px 3px 0 #440000, 0 0 20px rgba(255,80,80,0.5); }
#overlay .sub {
  font-size: 13px;
  color: #ffcf4a;
  background: #2a2a4a;
  padding: 6px 14px;
  border: 2px solid #ffcf4a;
  border-radius: 4px;
  letter-spacing: 1px;
}
#info {
  margin-top: 8px;
  font-size: 12px;
  color: #6a6a8a;
  text-align: center;
  max-width: 800px;
}
.fmsg {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
  color: #ff5050;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  letter-spacing: 2px;
}
.fmsg.show { opacity: 1; animation: flash 0.5s ease-out; }
@keyframes flash {
  0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
  30% { transform: translateX(-50%) scale(1.2); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
</style>
</head>
<body>
<h1>DAVE'S TILE ADVENTURE</h1>
<div id="game-wrap">
  <canvas id="game" width="800" height="480"></canvas>
  <div id="overlay">
    <div class="msg" id="overlay-msg"></div>
    <div class="sub">PRESS R OR CLICK RESTART</div>
  </div>
  <div class="fmsg" id="fmsg"></div>
</div>
<div id="hud">
  <div class="item"><span class="lbl">TROPHY:</span><span class="val" id="trophy-status">NOT COLLECTED</span></div>
  <div class="item"><span class="lbl">SCORE:</span><span class="val" id="score">0</span></div>
  <button id="restart">RESTART (R)</button>
</div>
<div id="controls">
  MOVE: <span class="key">&larr;</span><span class="key">&rarr;</span> or <span class="key">A</span><span class="key">D</span>
  &nbsp;&middot;&nbsp;
  JUMP: <span class="key">SPACE</span>
  &nbsp;&middot;&nbsp;
  RESTART: <span class="key">R</span>
</div>
<div id="info">Grab the trophy, then reach the green exit door. Avoid fire, water, and the patrolling enemy.</div>

<script>
(() => {
  'use strict';
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  ctx.imageSmoothingEnabled = false;

  const W = canvas.width, H = canvas.height;
  const TILE = 40;
  const COLS = W / TILE; // 20
  const ROWS = H / TILE; // 12

  // Tile types:
  // 0=air, 1=solid, 2=fire(hazard), 3=water(hazard), 4=trophy, 5=exit(solid)
  function buildLevel() {
    const grid = [];
    for (let r = 0; r < ROWS; r++) {
      grid.push(new Array(COLS).fill(0));
    }
    // Ground (row 11)
    for (let c = 0; c < COLS; c++) grid[11][c] = 1;
    // Hazards (row 10)
    grid[10][5] = 2; // fire
    grid[10][7] = 3; // water
    // Decoration platform (row 8)
    grid[8][2] = 1; grid[8][3] = 1;
    // Right platform (row 9)
    grid[9][11] = 1; grid[9][12] = 1;
    grid[9][14] = 1; grid[9][15] = 1; grid[9][16] = 1; grid[9][17] = 1;
    // Trophy on platform
    grid[9][13] = 4;
    // Exit (replaces ground)
    grid[11][18] = 5;
    return grid;
  }

  let level;
  let player, enemies, particles;
  let state, time, hasTrophy, score;
  let msgTimer = 0, msgText = '', msgColor = '#fff';

  const overlay = document.getElementById('overlay');
  const overlayMsg = document.getElementById('overlay-msg');
  const trophyStatus = document.getElementById('trophy-status');
  const scoreEl = document.getElementById('score');
  const fmsg = document.getElementById('fmsg');
  let fmsgTimer = 0;

  function showFlash(text, duration) {
    fmsg.textContent = text;
    fmsg.classList.add('show');
    fmsgTimer = duration;
  }

  function reset() {
    level = buildLevel();
    player = {
      x: 0 * TILE + 4, y: 10 * TILE,
      w: 32, h: 40,
      vx: 0, vy: 0,
      onGround: false,
      facing: 1,
      anim: 0,
    };
    enemies = [
      { 
        x: 11 * TILE, y: 8 * TILE,
        w: 32, h: 32, 
        vx: 1.5, 
        minX: 11 * TILE, 
        maxX: 17 * TILE - 32, 
        alive: true 
      }
    ];
    state = 'playing';
    hasTrophy = false;
    score = 0;
    particles = [];
    time = 0;
    msgTimer = 0;
    overlay.classList.remove('show');
    trophyStatus.textContent = 'NOT COLLECTED';
    trophyStatus.style.color = '#ff5050';
    scoreEl.textContent = '0';
    fmsg.classList.remove('show');
    fmsgTimer = 0;
  }

  // Input
  const keys = {};
  window.addEventListener('keydown', (e) => {
    keys[e.code] = true;
    if (e.code === 'KeyR') { reset(); return; }
    if (['Space','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.code)) {
      e.preventDefault();
    }
  });
  window.addEventListener('keyup', (e) => { keys[e.code] = false; });
  document.getElementById('restart').addEventListener('click', reset);

  function getTile(c, r) {
    if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return 0;
    return level[r][c];
  }
  function setTile(c, r, v) {
    if (r >= 0 && r < ROWS && c >= 0 && c < COLS) level[r][c] = v;
  }
  function isSolid(c, r) {
    const t = getTile(c, r);
    return t === 1 || t === 5;
  }
  function entityOverlapsSolid(entity) {
    const left = Math.floor(entity.x / TILE);
    const right = Math.floor((entity.x + entity.w - 1) / TILE);
    const top = Math.floor(entity.y / TILE);
    const bottom = Math.floor((entity.y + entity.h - 1) / TILE);
    for (let r = top; r <= bottom; r++) {
      for (let c = left; c <= right; c++) {
        if (isSolid(c, r)) return true;
      }
    }
    return false;
  }
  function moveX(entity, dx) {
    if (dx === 0) return;
    entity.x += dx;
    if (entityOverlapsSolid(entity)) {
      if (dx > 0) {
        entity.x = Math.floor((entity.x + entity.w - 1) / TILE) * TILE;
      } else {
        entity.x = (Math.floor(entity.x / TILE) + 1) * TILE;
      }
      entity.vx = 0;
    }
  }
  function moveY(entity, dy) {
    if (dy === 0) return;
    entity.y += dy;
    if (entityOverlapsSolid(entity)) {
      if (dy > 0) {
        // Find the topmost solid tile (smallest row index) overlapping
        const left = Math.floor(entity.x / TILE);
        const right = Math.floor((entity.x + entity.w - 1) / TILE);
        let topRow = Infinity;
        for (let r = 0; r < ROWS; r++) {
          for (let c = left; c <= right; c++) {
            if (isSolid(c, r)) topRow = Math.min(topRow, r);
          }
        }
        if (topRow < Infinity) {
          entity.y = topRow * TILE - entity.h;
        }
        entity.onGround = true;
      } else {
        const left = Math.floor(entity.x / TILE);
        const right = Math.floor((entity.x + entity.w - 1) / TILE);
        let botRow = -1;
        for (let r = ROWS - 1; r >= 0; r--) {
          for (let c = left; c <= right; c++) {
            if (isSolid(c, r)) botRow = Math.max(botRow, r);
          }
        }
        if (botRow >= 0) {
          entity.y = (botRow + 1) * TILE;
        }
      }
      entity.vy = 0;
    } else {
      if (dy > 0) entity.onGround = false;
    }
  }

  function rectOverlap(a, b) {
    return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
  }

  function spawnParticles(x, y, color, n) {
    for (let i = 0; i < n; i++) {
      particles.push({
        x, y,
        vx: (Math.random()-0.5)*5,
        vy: -Math.random()*5 - 1,
        life: 30 + Math.random()*20,
        color,
        size: 2 + Math.random()*3,
      });
    }
  }

  function update() {
    time++;
    if (fmsgTimer > 0) {
      fmsgTimer--;
      if (fmsgTimer <= 0) fmsg.classList.remove('show');
    }
    
    if (state !== 'playing') {
      for (let i = particles.length-1; i >= 0; i--) {
        const p = particles[i];
        p.x += p.vx; p.y += p.vy;
        p.vy += 0.3;
        p.life--;
        if (p.life <= 0) particles.splice(i, 1);
      }
      return;
    }

    // Player input
    const moveLeft = keys['ArrowLeft'] || keys['KeyA'];
    const moveRight = keys['ArrowRight'] || keys['KeyD'];
    const jump = keys['Space'];

    const accel = 0.7;
    const maxSpeed = 5;
    const friction = 0.78;

    if (moveLeft) {
      player.vx -= accel;
      player.facing = -1;
    }
    if (moveRight) {
      player.vx += accel;
      player.facing = 1;
    }
    if (!moveLeft && !moveRight) {
      player.vx *= friction;
    }
    if (Math.abs(player.vx) < 0.1) player.vx = 0;
    player.vx = Math.max(-maxSpeed, Math.min(maxSpeed, player.vx));

    if (jump && player.onGround) {
      player.vy = -11;
      player.onGround = false;
    }

    // Gravity
    player.vy += 0.55;
    if (player.vy > 13) player.vy = 13;

    moveX(player, player.vx);
    moveY(player, player.vy);
    if (Math.abs(player.vx) > 0.1) player.anim += Math.abs(player.vx) * 0.15;

    // Boundary
    if (player.x < 0) player.x = 0;
    if (player.x + player.w > W) player.x = W - player.w;
    if (player.y > H + 50) die('You fell!');

    // Trophy
    if (!hasTrophy) {
      const tR = 9, tC = 13;
      const tb = { x: tC*TILE, y: tR*TILE, w: TILE, h: TILE };
      if (rectOverlap(player, tb)) {
        hasTrophy = true;
        setTile(tC, tR, 0);
        score += 500;
        scoreEl.textContent = score;
        trophyStatus.textContent = 'COLLECTED!';
        trophyStatus.style.color = '#6cff6c';
        spawnParticles(tC*TILE + TILE/2, tR*TILE + TILE/2, '#ffcf4a', 25);
      }
    }

    // Hazards
    for (let r = 0; r < ROWS; r++) {
      for (let c = 0; c < COLS; c++) {
        const t = getTile(c, r);
        if (t === 2 || t === 3) {
          const hb = { x: c*TILE+2, y: r*TILE+2, w: TILE-4, h: TILE-4 };
          if (rectOverlap(player, hb)) {
            die(t === 2 ? 'BURNED!' : 'DROWNED!');
            return;
          }
        }
      }
    }

    // Exit
    const eR = 11, eC = 18;
    const eb = { x: eC*TILE, y: eR*TILE, w: TILE, h: TILE };
    if (rectOverlap(player, eb)) {
      if (hasTrophy) {
        score += 1000;
        scoreEl.textContent = score;
        win();
      } else {
        if (msgTimer <= 0) {
          showFlash('NEED THE TROPHY!', 60);
          msgTimer = 60;
        }
      }
    }

    // Enemies
    enemies.forEach(e => {
      if (!e.alive) return;
      e.x += e.vx;
      if (e.x <= e.minX) { e.x = e.minX; e.vx = Math.abs(e.vx); }
      if (e.x + e.w >= e.maxX + 32) { e.x = e.maxX + 32 - e.w; e.vx = -Math.abs(e.vx); }
      // Hmm enemy patrol bounds. minX = 11*40 = 440. maxX = 17*40-32 = 648. Enemy x in [440, 648-32=616]? Let me re-check.
      // Enemy width 32. minX is left edge (440). maxX is right boundary... 
      // Actually let me redefine. minX = left edge min, maxX = right edge max.
      // e.minX = 11*40 = 440. e.maxX = 17*40 = 680. Enemy x in [440, 680-32=648].
      // Hmm let me just clamp:
      e.x = Math.max(e.minX, Math.min(e.maxX, e.x));
      if (e.x === e.minX) e.vx = Math.abs(e.vx);
      if (e.x === e.maxX) e.vx = -Math.abs(e.vx);
      
      if (rectOverlap(player, e)) {
        die('CAUGHT BY ENEMY!');
      }
    });

    // Particles
    for (let i = particles.length-1; i >= 0; i--) {
      const p = particles[i];
      p.x += p.vx; p.y += p.vy;
      p.vy += 0.3;
      p.life--;
      if (p.life <= 0) particles.splice(i, 1);
    }

    if (msgTimer > 0) msgTimer--;
  }

  function die(msg) {
    if (state !== 'playing') return;
    state = 'dead';
    spawnParticles(player.x + player.w/2, player.y + player.h/2, '#ff5050', 35);
    overlayMsg.textContent = msg;
    overlayMsg.className = 'msg lose';
    overlay.classList.add('show');
  }

  function win() {
    state = 'won';
    spawnParticles(player.x + player.w/2, player.y + player.h/2, '#6cff6c', 50);
    overlayMsg.textContent = 'LEVEL COMPLETE!';
    overlayMsg.className = 'msg win';
    overlay.classList.add('show');
  }

  // Drawing
  function draw() {
    // Background
    ctx.fillStyle = '#0a0a1a';
    ctx.fillRect(0, 0, W, H);
    // Stars
    for (let i = 0; i < 60; i++) {
      const sx = (i * 137) % W;
      const sy = (i * 89 + 30) % (H - 60);
      const b = 0.5 + 0.5 * Math.sin(time * 0.05 + i * 1.7);
      ctx.fillStyle = `rgba(255,255,255,${0.1 + b*0.4})`;
      ctx.fillRect(sx, sy, 2, 2);
    }

    // Tiles
    for (let r = 0; r < ROWS; r++) {
      for (let c = 0; c < COLS; c++) {
        const t = getTile(c, r);
        const x = c*TILE, y = r*TILE;
        if (t === 1 || t === 5) drawSolid(x, y, c, r, t === 5);
        else if (t === 2) drawFire(x, y);
        else if (t === 3) drawWater(x, y);
        else if (t === 4) drawTrophy(x, y);
      }
    }

    // Enemies
    enemies.forEach(e => drawEnemy(e));

    // Player
    if (state !== 'dead') drawPlayer();

    // Particles
    particles.forEach(p => {
      ctx.globalAlpha = Math.max(0, Math.min(1, p.life / 50));
      ctx.fillStyle = p.color;
      ctx.fillRect(p.x - p.size/2, p.y - p.size/2, p.size, p.size);
    });
    ctx.globalAlpha = 1;
  }

  function drawSolid(x, y, c, r, isExit) {
    const isGround = (r === ROWS - 1);
    // Base
    if (isExit) {
      ctx.fillStyle = '#1a4a1a';
      ctx.fillRect(x, y, TILE, TILE);
      // Inner door
      ctx.fillStyle = '#2a8a2a';
      ctx.fillRect(x + 3, y + 3, TILE - 6, TILE - 3);
      // EXIT text
      ctx.fillStyle = '#fff';
      ctx.font = 'bold 11px "Courier New", monospace';
      ctx.textAlign = 'center';
      ctx.fillText('EXIT', x + TILE/2, y + TILE/2 + 4);
      ctx.textAlign = 'start';
      // Doorknob
      ctx.fillStyle = '#ffcf4a';
      ctx.beginPath();
      ctx.arc(x + TILE - 8, y + TILE/2, 2.5, 0, Math.PI * 2);
      ctx.fill();
      // Glow if trophy
      if (hasTrophy) {
        ctx.strokeStyle = `rgba(108,255,108,${0.5 + 0.4*Math.sin(time*0.15)})`;
        ctx.lineWidth = 2;
        ctx.strokeRect(x + 2, y + 2, TILE - 4, TILE - 4);
      }
    } else {
      ctx.fillStyle = isGround ? '#5a4030' : '#4a5a7a';
      ctx.fillRect(x, y, TILE, TILE);
      // Brick lines
      ctx.strokeStyle = isGround ? '#2a1a0a' : '#1a2a4a';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(x, y + TILE/2); 
      ctx.lineTo(x + TILE, y

Let me build a Dangerous Dave-inspired tile-based platformer quickly. I need to create a single index.html file with inline CSS and JS, procedurally drawn graphics, and all the required features.

Let me design the level layout:
- Tile size: 32x32
- Canvas: 800x600 (25 columns x 18.75 rows, let's use 20x15 tiles for simplicity, or scale)
- Actually let me use 25x18 tiles at 32px = 800x576

Level design (let me use a 25 wide, 18 tall grid):
- Row 0-2: sky (empty)
- Various platforms
- Trophy and exit
- Fire and water hazards
- Patrolling enemy

Let me code this up quickly.

I'll structure the level as a 2D array of tiles. Tile types:
- 0: empty
- 1: solid (platform)
- 2: trophy
- 3: exit
- 4: fire hazard
- 5: water hazard

Let me design a level:
```
..........................
..........................
....T.....................  (trophy on platform)
......1..........1....1...  (platforms)
..........................
....P........E............  (player start, exit)
.....1.....1..1..........
...........1.............
..........................  (fire/water hazards below)
..........4..........5....
.....4....4....4......5....
.....1....1....1......1....  (ground with hazards)
```

Let me think more carefully. Let me design a level that's reachable.

Width: 25 tiles, Height: 15 tiles. Tile size 32. Canvas 800x480.

Let me design:
```
Row 0:  ..........................
Row 1:  ..........................
Row 2:  ....T.....................
Row 3:  ...............E..........
Row 4:  ....111......111....111..
Row 5:  ..........................
Row 6:  .........P................
Row 7:  .....111....111..111.....
Row 8:  ..........................
Row 9:  ..4..........4.....5.....
Row 10: .........4......5.........
Row 11: ....4.....4......5.......
Row 12: .44444444444444444444444.  (ground)
Row 13: ..........................
Row 14: ..........................
```

Let me try again with a cleaner design:

```
Row  0: .........................   (sky)
Row  1: .........................   (sky)
Row  2: ....T....................   (trophy above platform)
Row  3: ...1.1..........1..1.....   (small floating platforms)
Row  4: ..........................
Row  5: ..........................
Row  6: P..........E..............   (P=player start, E=exit)
Row  7: .1....1.1.1...1.1....1....   (platforms between)
Row  8: ..........................
Row  9: ......4....4.....5.......   (hazards)
Row 10: ...4.....4....5......4...
Row 11: ..4...4....5.....4.......
Row 12: .4444444444444444444444.   (ground)
Row 13: ..........................
Row 14: ..........................
```

OK, let me just code it up. I'll keep the level design simple but functional.

Let me start writing the code now since we're running out of time.

Empty directory. Let me write the index.html file now.

Let me check the file and run it in the browser.

The level looks good. I can see:
- The player (Dave) on the left
- The trophy on a platform in the upper left
- The exit (green portal with arrow) on the right
- Brick platforms
- Fire hazards (orange flames) at the bottom and scattered
- Water hazards (blue) on the right side
- A purple patrolling enemy on a platform in the middle

Let me test movement by pressing right arrow key and seeing if the player moves and lands on a nearby platform.

The player moved right and fell into a fire pit! The fire hazards actually catch the player. This is good - it shows hazards are working. But the level design has fire pits everywhere making it hard to navigate. Let me check the level design:

Looking at my level:
- Row 9: "....4....4.......5......." - fire at col 4 and 8, water at col 15
- Row 10: "..4.....4....5.....4....." - fire at col 2, 8, water at 13, fire at 19
- Row 11: ".4...4....5.....4........" - fire at col 1, 5, water at 10, fire at 16
- Row 12: "4444444444444444444444444" - full ground of fire

That's way too many fire tiles at the bottom. The player started at row 6 (y=192) and gravity is 0.55, so they fall through the air until they hit row 12 (the fire ground) immediately.

Wait, but the player should have platforms to land on between row 6 and row 12. Let me re-check:
- Row 6: "......................E.." - no platforms (player is here)
- Row 7: ".....1.....1...1...1....." - platforms at cols 5, 11, 15, 19
- Row 8: "...........1............." - platform at col 11

So the player at row 6 falling - they would land on row 7 platforms at cols 5, 11, 15, 19. But since the player started at x=2*T=64 (col 2), they would fall and... wait, the player will fall straight down until they hit something. At col 2, the row 7 platform is at col 5, so they'd miss it and fall to row 12 (fire ground).

Actually that's the issue - the player starts at col 2 and there's no platform directly below them until row 12 which is all fire. So they'd always fall into fire.

I need to fix the level design to make a reachable route. Let me think about a better layout:

The player starts at (col=2, row=6). I need:
1. A platform directly below or near them at row 7 or lower
2. A clear path to the trophy
3. A clear path from trophy to exit
4. Hazards placed but not blocking the route

Let me redesign:
```
Row  0: .........................   (sky)
Row  1: .........................   (sky)
Row  2: ....T....................   (trophy)
Row  3: ....1....................   (platform with trophy)
Row  4: ..........................
Row  5: .........................
Row  6: P......................E..   (player start, exit at right)
Row  7: ...111.....111......1111.   (platforms to jump on)
Row  8: .........................
Row  9: ........4........5.......   (hazards below)
Row 10: ...4......4...5......4...
Row 11: ..4...4.....5....4.......
Row 12: 4444444444444444444444444   (fire ground - falling into this = death)
```

Wait, the issue is that the player has to be able to stand somewhere. They need a starting platform. Let me put one right under them or move them onto one.

Actually, looking at the first screenshot, the player is shown floating at row 6, between row 5 and row 7. If they have no platform directly below, they fall.

Let me redesign so the player starts ON a platform:

```
Row  0: .........................   (sky)
Row  1: .........................   (sky)
Row  2: ....T....................   (trophy on platform)
Row  3: ....1....................   
Row  4: ..........................
Row  5: ..........................
Row  6: P......................E..   (player start position)
Row  7: ..111......111...........   (start platform and middle platform)
Row  8: ..........................
Row  9: ....4......5.........4...   (hazards)
Row 10: ..4....4.....5.....4.....
Row 11: .4...4.....5.....4.......
Row 12: 4444444444444444444444444   (fire bottom)
```

But the player should be standing ON row 7 platform, so put them at y=7*T. Let me adjust to:
- Player at (col 1, row 6) - on top of platform at col 1 row 7

Actually let me make the player x at col 1 (x=32) and y at row 6 (y=192), and have a platform at row 7 col 1 directly below.

Wait, the player is 22 wide and 28 tall. At col 1, x=32, the player extends from x=32 to x=54. At row 6, y=192, player extends from y=192 to y=220. Row 7 platform is at y=224. So the player would be falling with feet at y=220, and the platform top at y=224. Gravity pulls them down.

Let me redesign the level to be more playable. I'll move the player onto a starting platform, ensure there's a path to trophy, then to exit.

Also, I noticed - the player.y reset is 6*T, but if there's no platform at row 7 directly below, they fall. Let me fix this by:
1. Putting a starting platform directly below the player
2. Adding stepping stones to the trophy
3. Adding stepping stones from trophy to exit

Let me also reduce the hazards so they don't cover everything.

New level design:
```
Row  0: .........................   (sky)
Row  1: .........................   (sky)
Row  2: ............T............   (trophy)
Row  3: ...........11............   (platform with trophy)
Row  4: ..........................
Row  5: ..........................
Row  6: P......................E..   (player start, exit right)
Row  7: 1111.....111.....1111.....   (platforms)
Row  8: ..........................
Row  9: .........................
Row 10: ...4..............5......   (some hazards)
Row 11: ..4.............5....4...   
Row 12: 4444444444444444444444444   (death floor)
```

Hmm but player at col 0, row 6 (x=0, y=192). Player feet at y=220. Platform at row 7 col 0-3 at y=224. Player would land on top. Good.

Then to reach the trophy at col 12-13 row 3, the player needs to jump from platform at cols 0-3 to next platform at cols 9-11. That's a 6-tile gap (cols 4-8) at 32px each = 192px. With jump velocity 9.2 and gravity 0.55, max jump height ≈ 9.2²/(2*0.55) ≈ 77 pixels ≈ 2.4 tiles height. Max horizontal jump distance ≈ 9.2 * 2 * (9.2/0.55) ≈ ... let me recalc.

Time to peak: v/g = 9.2/0.55 ≈ 16.7 frames. Total air time ≈ 33 frames. Max horizontal speed = 3.2. So horizontal distance ≈ 3.2 * 33 ≈ 105 pixels ≈ 3.3 tiles.

That's not enough to cross a 6-tile gap. Need closer platforms or higher jump.

Let me redesign with closer platforms and bigger jumps. Actually let me increase the jump velocity and reduce gravity for better feel.

Or, simpler: make the gaps smaller. Use platforms spaced 3 tiles apart.

Let me redesign:
```
Row  0: .........................
Row  1: .........................
Row  2: .........T...............
Row  3: ........11...............
Row  4: .........................
Row  5: ......................E..
Row  6: .........................
Row  7: ..1....1....1....1....1..   (stepping platforms)
Row  8: .........................
Row  9: P........................
Row 10: 1111111111111111111111111   (ground? but then no death)
```

Hmm, this is getting complex. Let me think simpler.

Let me make a simpler level where:
1. Player starts on left side on a platform
2. Trophy is on a higher platform reachable by jumping
3. Exit is on the right, also reachable
4. Hazards are below
5. Falling into hazards = death

```
Row  0: .........................   
Row  1: .........................   
Row  2: .........................
Row  3: ........T................   (trophy on a platform)
Row  4: ........1................   (trophy platform)
Row  5: .........................
Row  6: .................E.......   (exit)
Row  7: ........1............1...   (platforms)
Row  8: P.........................   (player start)
Row  9: .1111111111111111111111111   (starting platform = ground)
Row 10: ..4.......4..........5...   (hazards below ground)
Row 11: ..4..4....4.........5....
Row 12: ..4444444444444444445555.   (death floor)
```

But player at col 0 row 8 (y=256), needs to land on row 9 platform. Player feet at y=284, platform at y=288. They fall onto platform.

Then to reach trophy at col 8 row 4, they jump up from row 9 platform (y=288) to row 4 platform (y=128). That's a vertical jump of 160 pixels. With jump velocity 9.2 and gravity 0.55, max jump height ≈ 77 pixels. Not enough.

Need higher jump. Let me increase JUMP to 14 and check:
Max jump height = 14²/(2*0.55) = 196/1.1 = 178 pixels ≈ 5.5 tiles. Better!

Let me increase JUMP to 13.5 for balance.

Actually let me redesign the level with stair steps:

```
Row  0: .........................
Row  1: .........................
Row  2: .........................
Row  3: ............T............   (trophy high up)
Row  4: ............1............   (trophy platform)
Row  5: ........1.......1.......1.   (mid platforms)
Row  6: ......1.......1.......1...   (lower mid platforms)
Row  7: ....1........1.......1....   
Row  8: ..1..........1.......1....   
Row  9: 1111111111111111111111111   (ground)
Row 10: .........................
Row 11: ..4......4.......5.......   (hazards below if fall through cracks)
```

Hmm, but the ground at row 9 spans all cols so player can never fall to death. Unless I add some gaps.

Let me think differently. Make a simple level:
- Ground with gaps
- Platforms above
- Trophy on a high platform
- Exit on a platform
- Hazards at the bottom (below ground)

```
Row  0: .........................
Row  1: ............T............   (trophy)
Row  2: ............1............   (trophy platform)
Row  3: .........................
Row  4: ............1............   (exit platform high)
Row  5: .........................
Row  6: .....1.........1.........   (mid platforms)
Row  7: .........................
Row  8: ..1...........1..........   (lower platforms)
Row  9: P....................E...   (player start, exit entry)
Row 10: 1.1.1.1.1.1.1.1.1.1.1.1.1   (ground with gaps where hazards are)
Row 11: ..4......4.......5.......   (hazards below ground level)
Row 12: ..444....4......5....5...   (death pits)
Row 13: .........................
Row 14: .........................
```

This is getting complex. Let me simplify and just use a basic level design that I know works:

```
Row  0: .........................   
Row  1: .........................   
Row  2: .........................   
Row  3: .........................
Row  4: .........................   
Row  5: ............T............   (trophy)
Row  6: ............1............   (trophy platform)
Row  7: .........................
Row  8: ....1..............1.....   (stepping platforms)
Row  9: .........................
Row 10: ...1..............1......   (more platforms)
Row 11: P......................E.   (player and exit at bottom)
Row 12: 111.1.1.1.1.1.1.1.1.1111.   (ground with gaps)
Row 13: .........................
Row 14: ...4....4........5.......   (death pits below)
```

OK let me also fix the enemy placement. The enemy patrols on a platform above ground level.

Let me rewrite the level completely and increase jump height.

Actually, the cleanest fix is:
1. Put player on a starting platform
2. Make sure all platforms are within jump distance
3. Increase JUMP velocity

Let me use JUMP = -11 and GRAV = 0.5:
- Max height = 11²/(2*0.5) = 121 pixels ≈ 3.8 tiles
- Air time ≈ 22 frames * 2 = 44 frames  
- Max horizontal distance at MAX_SPEED=3.2: 3.2 * 44 = 140 pixels ≈ 4.4 tiles

That should let me span 4-tile gaps.

Let me redesign with 4-tile max gaps:

```
Row  0: .........................
Row  1: .........................   (sky)
Row  2: .............T...........   (trophy at col 13)
Row  3: .............1...........   (trophy platform)
Row  4: .........................
Row  5: ..............1..........   (mid right)
Row  6: .........1...............   (mid left)
Row  7: .........................
Row  8: ..1..................1...   (low stepping)
Row  9: ..........................
Row 10: 1111....1111....1111..1.1.   (ground with gaps)
Row 11: ..4......4.......5.......   (death pits in gaps)
Row 12: .........................
```

Hmm, this is getting complex. Let me just simplify and make a clear level:

```
Row  0: .........................
Row  1: .........................   (sky)
Row  2: ....T....................   (trophy at col 4)
Row  3: ....1....................   (trophy platform)
Row  4: ..........................
Row  5: .........................
Row  6: .........................
Row  7: ......1..........1.......   (mid platforms)
Row  8: .........................
Row  9: ..1..........1...........   (low stepping)
Row 10: ..........................
Row 11: P.................E......   (player start, exit)
Row 12: 1111.1111.1111.1111.1111.   (ground)
Row 13: ....4....5....4....4....   (death pits below)
Row 14: .........................
```

Player at col 0, row 11. Standing on row 12 ground at cols 0-3. Good.

To get to trophy at col 4 row 3:
- Jump from row 12 to row 9 platform at col 2-3. Distance 3 tiles up = 96 pixels. Jump height ≈ 121px. OK.
- Then to row 7 platform at col 6. Distance 2 tiles right, 2 tiles up. OK.
- Then to row 3 platform at col 4. Distance 2 tiles left, 4 tiles up. Hmm 4 tiles up = 128px > 121px max. Not reachable!

Let me move the trophy to row 5:
```
Row  2: .........................
Row  3: .........................   
Row  4: ....T....................   (trophy at col 4)
Row  5: ....1....................   (trophy platform)
Row  6: ..........................
Row  7: ......1..........1.......   (mid platforms)
Row  8: .........................
Row  9: ..1..........1...........   (low stepping)
Row 10: ..........................
Row 11: P.................E......   (player start, exit)
Row 12: 1111.1111.1111.1111.1111.   (ground)
Row 13: ....4....5....4....4....   (death pits)
```

Path to trophy:
- From row 12 col 0 to row 9 col 2: jump up 3 tiles (96px) - OK
- From row 9 col 2 to row 7 col 6: jump up 2 tiles (64px), right 4 tiles - OK 
- From row 7 col 6 to row 5 col 4: jump up 2 tiles (64px), left 2 tiles - OK

Path to exit from trophy:
- From row 5 col 4 to row 7 col 12 (mid right platform): jump up 2, right 8 - too far right
- Need another platform

Let me adjust:
```
Row  7: ......1......1...1......   (three mid platforms)
```

Or just make the platforms closer:
```
Row  7: ......1.......1.........   (mid platforms at col 6 and 13)
Row  9: ..1..........1...........   (low platforms at col 2 and 12)
```

From row 7 col 13 to row 9 col 12: jump down 2, left 1 - OK
From row 9 col 12 to row 11 col 18 (exit): jump down 2, right 6 - 192px distance. With air time ~44 frames * speed 3.2 = 140px. Not quite enough!

Need to either increase speed, reduce gravity, or add another platform.

Let me increase MAX_SPEED to 4.5 and keep everything else:
- Air time ≈ 44 frames
- Max horizontal: 4.5 * 44 = 198px ≈ 6 tiles

OK with MAX_SPEED=4.5 that works. But movement feels fast.

Or reduce GRAV to 0.4:
- Air time = 11/0.4 = 27.5 frames * 2 = 55 frames
- Max jump height = 11²/(2*0.4) = 151 pixels ≈ 4.7 tiles
- Max horizontal at MAX_SPEED=3.5: 3.5 * 55 = 192px ≈ 6 tiles

That works.

Let me use GRAV=0.4, JUMP=-11, MAX_SPEED=3.5.

Now the enemy: place it on a platform patrolling horizontally. Like row 7 col 8 to col 14.

Let me write the new level:

```
Row  0: .........................
Row  1: .........................
Row  2: .........................
Row  3: .........................   
Row  4: ....T....................
Row  5: ....1....................
Row  6: ..........................
Row  7: ......1.......1..........
Row  8: ..........................
Row  9: ..1..........1...........
Row 10: ..........................
Row 11: P.................E......
Row 12: 1111.1111.1111.1111.1111.
Row 13: ....4....5....4....4....
Row 14: .........................
```

Wait, row 13 has hazards below ground. But the ground at row 12 has gaps. If player falls through the gaps at col 4, 9, 14, 19, they'd fall into... well, row 13 has hazards. So falling into the gaps = death.

But if the player is on the ground and the gaps are right next to them, they need to jump carefully.

Actually let me put the hazards in the gaps so falling = immediate death. The hazard row would only show in the gap columns. Let me redesign:

```
Row 12: 1111.1111.1111.1111.1111.   (ground with gaps)
Row 13: ....4....4....4....4....   (hazards only in gap columns)
Row 14: .........................
```

This way the player falls into a gap and lands in fire/water.

But wait, there's no hazard in the columns where there IS ground. The hazards in row 13 are below row 12 ground tiles... no wait, row 13 has dots (.) at columns 0-3 (where row 12 has 1s) and 4 (the gap) has 4. So the hazards are only in the gaps, and the player only reaches them by falling through gaps. 

Actually wait, in row 12 "1111.1111.1111.1111.1111.":
- cols 0-3: 1 (ground)
- col 4: . (gap)
- cols 5-8: 1
- col 9: . (gap)
- cols 10-13: 1
- col 14: . (gap)
- cols 15-18: 1
- col 19: . (gap)
- cols 20-23: 1
- col 24: . (no need)

So 4 gaps. Row 13 should have hazards in those gap columns only:
Row 13: "....4....4....4....4....."

cols 0-3: . (no hazard since ground here)
col 4: 4 (hazard in gap)
cols 5-8: .
col 9: 4
cols 10-13: .
col 14: 4
cols 15-18: .
col 19: 4
cols 20-23: .
col 24: .

OK that works.

Let me put the enemy to patrol on a platform. Say row 7 col 6-10 area. Enemy size 24x24, placed at y = row * T - 24 (so feet at top of platform). 

Hmm, my enemy code has enemy.y = 7 * T - 24. So feet at y = 7*T - 24 + 24 = 7*T = 224. Wait, that puts the bottom of enemy at row 7 (y=224) but the platform top is at y=224. So enemy is sitting on the platform. Good.

Actually wait, the platform is at row 7 (y=224 to y=256). Enemy at y=7*T-24=200, with height 24, so bottom at y=224. That matches platform top. Good.

OK let me write the fix now. Time is limited.

Wait, the enemy at row 7 patrol platform - I placed enemy y = 6 * T + 4 = 192 + 4 = 196. The platform at row 7 starts at y=224. The enemy is 24 tall, bottom at y=220. So enemy is hovering 4px above the platform. That's not quite right but close. Let me adjust.

Actually wait, row 7 has platforms at cols 6 and 13. I set enemy to patrol at minX=6*T=192, maxX=12*T=384. The platform at row 7 col 6 spans from x=192 to x=224. So enemy minX is at the start of the platform. Good.

But the enemy.y=6*T+4=196 with height 24, bottom at 220. Platform top at y=224. There's a 4px gap. Not great but acceptable.

Actually let me put the enemy on a different platform. The row 7 platform at col 6 - it spans only 32px which is too narrow for an enemy patrolling between 6T and 12T (a 192px range). Let me make the platform longer or move the enemy to a different area.

Looking at row 9: "..1..........1..........." - platforms at col 2 and col 13. Too short.

Let me make a row 9 platform that spans more, like row 9 col 4-9. Or put enemy on the ground between gaps.

Actually, the simplest is to put the enemy on the ground (row 12) patrolling between two ground segments. The ground has gaps at cols 4, 9, 14, 19. So between cols 5-8 there's ground, then gap at 9, then ground 10-13.

Let me put enemy patrolling on row 12 ground between cols 10-13. Enemy at y = 12*T - 24 = 360.

Actually let me redesign the level to have a longer platform somewhere for the enemy. Add a row 10 platform spanning cols 4-9:

```
Row 10: ....111111................   (platform for enemy to patrol on)
```

Or keep it simple and put enemy on the ground row. Let me just put it on row 12 ground in one of the segments.

Actually, the enemy can patrol over the gaps but would just walk over them. That's fine, but unrealistic. Let me just put the enemy on a wider platform.

Let me put a longer platform at row 7:
```
Row  7: ......11111.....1.........
```

That spans cols 6-10 for enemy patrol.

Let me make this change too.

Wait, I need to verify - the enemy at y=6*T+8 = 200 with height 24, bottom at 224. The platform at row 7 is at y=224 to y=256. So enemy bottom is exactly at platform top. 

Now let me reload and test.

The level looks much better now! I can see:
- Player (Dave) on the left standing on the ground
- Trophy on a platform in the upper-left
- Exit (green portal) on the right
- A purple patrolling enemy on a longer platform in the middle
- Fire hazards in the gaps between ground segments

Let me test movement now - press right to see if the player moves and lands.

Hmm, the player doesn't seem to have moved. The image looks identical to the initial state. This is because the keydown event only triggers once and the player needs continuous press to move. Let me try a longer test - press the key and wait.

Actually the issue is that the screenshot is taken right after keydown which is just 1 frame. The player would be moving but the screenshot captures a moment. Let me try clicking on the canvas first to give it focus, then pressing keys.

Actually, looking at the screenshot, the player is in the same position. Maybe the keys aren't being registered. Let me check - in the keys object, I'm storing e.code values like 'ArrowRight', 'KeyA', 'Space', etc.

The check `keys['ArrowLeft'] || keys['KeyA']` should work for ArrowRight - oh wait, it's checking for ArrowLeft. Let me look at my code:

```js
if (keys['ArrowLeft'] || keys['KeyA']) move -= 1;
if (keys['ArrowRight'] || keys['KeyD']) move += 1;
```

OK that looks right. Let me try pressing and waiting.

Interesting - the enemy is moving (you can see it at different positions across frames) but the player is NOT moving even though I pressed ArrowRight.

This means the keydown event isn't being captured by my keydown listener, OR the keys are being captured but my key codes don't match.

Wait, looking at the player - in the first screenshot the player is at x=32 (col 1) standing on the ground. In all the screenshots, the player is in the same position. So the keypress isn't translating to player movement.

Looking at my code:
```js
document.addEventListener('keydown', (e) => {
    keys[e.code] = true;
```

The browser tool might be sending synthetic keydown events that don't have an `e.code` property, or have different values.

Wait, the enemy IS moving. That's not controlled by keys. So the game loop is running. The issue is that keys aren't being set.

Maybe the browser tool sends key events differently. Let me try clicking on the canvas first to give it focus, then pressing keys.

Or maybe the browser tool sends events to document but my listener checks e.code which might be undefined for synthetic events.

Let me check by adding both e.code and e.key handling, and also handle the case where e.code might be empty.

Let me also add a fallback for when e.code might be missing. Let me reload and test.

Now let me test movement.

The player still didn't move. The keydown event isn't being received or processed properly. Let me check by clicking on the canvas first to ensure focus, or maybe the browser tool sends events that aren't fully functional.

Let me check the console for any errors and inspect the DOM to see if keys are being captured.

Actually, the issue might be that the browser tool only sends a keydown event without a keyup event. My game loop only checks `keys['ArrowRight']` which is set true on keydown but never set to false. So the keydown registers but then since the keyup isn't sent, it stays true and the player should keep moving.

Wait but the player ISN'T moving even though the key is supposedly held. That means the keydown isn't being detected.

Let me think about this differently. The browser tool may be sending keys to a non-focused element. Let me make sure the canvas has a tabindex and focus.

Or maybe the browser tool sends the key as a string rather than a real keydown event. Let me try clicking on the canvas first.

The enemy is still moving, so the game loop is running. Let me check the console for errors.

No errors. Let me try the type action which may handle keyboard differently.

The 'd' key was sent via type but still no movement. The issue might be that the browser tool sends events to a specific element but the canvas is wrapped, and the events don't bubble to document.

Wait - maybe the issue is that browser tool's keypress sends the event to a different window or the iframe. Let me check what the actual behavior is by adding some debug output.

Actually, since I can't see console logs in real-time but only after an action, let me think about this differently.

Looking at my code:
```js
document.addEventListener('keydown', (e) => {
    const k = normKey(e);
    if (k) {
      keys[k] = true;
```

When 'd' is typed, e.key should be 'd'. My normKey function checks `k === 'd'` which would match. So `keys['ArrowRight']` should be true.

But the player isn't moving. Why?

Let me check the game loop:
```js
function loop(now) {
    const dt = Math.min(33, now - last);
    last = now;
    update(dt);
    draw();
    requestAnimationFrame(loop);
}
```

And in update:
```js
let move = 0;
if (keys['ArrowLeft'] || keys['KeyA']) move -= 1;
if (keys['ArrowRight'] || keys['KeyD']) move += 1;
```

If keys['ArrowRight'] is true, move = 1. Then player.vx += MOVE * 1 = 0.4. So vx becomes 0.4. Then `if (move === 0) player.vx *= FRICTION;` - no, move is not 0.

Then `player.vx > MAX_SPEED`? 0.4 > 3.6? No. OK.
Then collision check: rect.x += player.vx = 32 + 0.4 = 32.4. That's a small movement.

Wait! Maybe the issue is that the player IS moving but the screenshot is captured after the key release. The browser tool's `type` action might just send a single keydown then keyup quickly. With only 1 frame of movement (0.4 pixels), the player doesn't visibly move.

Let me test by simulating a long press. The browser tool's `type` sends each character quickly. I need to check if maybe the player is just moving slowly.

Actually, after multiple frames the player should accelerate to MAX_SPEED=3.6. But each frame, the vx increases by 0.4 until hitting MAX_SPEED. So in 9 frames it reaches max.

Hmm, let me check by looking at the diff. Let me try sending key as ArrowRight via `key` and check the position via inspection.

Actually, looking at the screenshots, I notice the trophy position. Let me check if the player has moved by inspecting.

Actually let me look at the screenshots more carefully. The player is at the very left in all screenshots. The position appears to be the same. Either:
1. The key events aren't being processed
2. The player is moving but very slowly (and screenshots happen to be at the same position)

Let me test by sending a key and immediately checking with inspect, or by adding visible movement logging.

Actually wait, looking at the player position - in all screenshots the player appears to be at roughly x=32 (col 1). If the player moved even 30 pixels, they'd be visibly to the right.

Let me try a completely different approach - I'll send the key event multiple times rapidly and screenshot:

The player is still not moving, but the enemy is. This means the game loop is running but keys aren't being processed.

Let me check by clicking on the canvas, then sending arrow keys. Or, more importantly, let me debug by writing the keys state to the screen.

Actually, since we have limited time, let me make the game more robust by:
1. Adding on-screen control buttons that work via click
2. Making sure the canvas can receive focus

Actually the best fix is probably to add an explicit keyDown handler on the canvas and also handle pointer events. Let me also add the canvas as the focus target with tabindex.

Wait, the issue might be that the browser tool's `key` action sends events to the document. If the iframe is sandboxed differently, the events might not reach the script.

Let me try a completely different approach: have the game auto-test by simulating a jump after a moment, OR add on-screen buttons that work via mouse.

Actually the simplest thing is to add on-screen controls that work via mouse, since the browser tool can click. And also expose a way to test via DOM inspection.

Let me add on-screen move/jump buttons AND a debug overlay that shows the current key state.

Actually, the cleanest solution is to add touch/click controls as a fallback, since those work reliably with the browser tool.

Now let me also add window event listeners to be safe, in case document is not the right target in the iframe.

Actually let me reload and test using the buttons.

Now I have on-screen buttons. Let me test by clicking the Right button.

The player has moved! He's now facing right (you can see the cap is on the right side now). The player has moved to the right by some amount. Let me check motion to see if he's still moving.

The player moved to the right a bit (about 1 tile = 32 pixels). He didn't go very far - probably because the click only registered briefly. The mousedown set the key to true, but mouseup was triggered when the click finished, releasing the key.

But this confirms the controls work. The movement was small because the click was quick. For continuous movement, the user would hold the button.

The player has moved right and is still on solid ground. The animation is working. Let me also test jumping.

Actually, let me verify the level is reachable. Looking at the layout:
- Player at (col 1, row 11) standing on ground
- Trophy at (col 4, row 4-5)
- Exit at (col 20, row 11)

The path should be: jump up from ground to row 9 platform at col 2, then to row 7 platform at col 6, then to row 5 platform with trophy. Then go right across platforms, down to ground, and across to exit.

Now let me also try the jump button.

But first, let me make sure the keyboard also works for the user (in a real browser). The on-screen buttons work, which is enough for testing.

Let me also check by testing the Restart button to make sure the level resets properly.

The player has moved further right (looks like 2 tiles now). The jump click may have happened but the player is still on the ground. The player did move from the click. Let me try to do a longer interaction.

Actually, I notice the issue is that the click is too quick - the key gets set true then false before the next game frame. So the player accelerates only briefly.

Let me test with a longer click or just check restart functionality.

Let me test the Restart button to verify the level resets.

The Restart button (which is at x=723, y=710) didn't get clicked - I clicked at (688, 710) which was the Restart button. Wait, looking at the screenshot, the player has moved further right. Hmm.

Actually looking at the player position more carefully - the player is now further to the right of the starting position. The Restart button at (723, 710) might have been clicked.

Wait, I see - the player appears to be at x ~ 2*T = 64. So the player has moved from x=32 to x=64. But the Restart should have put them back to x=32.

Hmm, maybe my click coordinates are slightly off. Let me check the buttons position by inspecting the DOM.

Actually looking at the screenshot more carefully - the player is at the same position as the previous screenshot (still slightly right of starting). So either:
1. Restart didn't trigger
2. Or it did but the player had moved off the start, then was reset, then moved again

Let me verify by checking the actual button positions. The Restart button should be around x=720-790, y=698-722.

Looking at the screenshot, the buttons are:
- "← Left" at roughly x=480
- "Jump" at x=550
- "Right →" at x=620
- "Restart (R)" at x=720

I clicked at x=688, y=710 which is between Right and Restart. So I might have hit Restart. Let me check by clicking precisely on Restart at x=720.

Actually, looking at the player position in the latest screenshot, it does appear to be at the same x as the previous one. Let me click Restart precisely.