Compare all models on this prompt →
Dangerous Dave platformer · deepseek-v4-flash
Build a playable tile-based platformer on a canvas in the Dangerous Dave style: navigate a level to grab a trophy and then reach the exit, avoiding hazards like fire and water, with jumping and simple enemies. Procedural graphics only, no external assets.
⛨ sandboxed Open in new tab ↗
transcript · 8 messages
user
Build a playable tile-based platformer on a canvas in the Dangerous Dave style: navigate a level to grab a trophy and then reach the exit, avoiding hazards like fire and water, with jumping and simple enemies. Procedural graphics only, no external assets.
assistant
thinking
The user wants me to build a full playable tile-based platformer game in the style of Dangerous Dave, all in a single index.html file. Let me plan this out:
1. **Tile-based level** with a canvas
2. **Player** that can move left/right and jump
3. **Trophy** to collect
4. **Exit** to reach after collecting the trophy
5. **Hazards**: fire and water
6. **Simple enemies** that move around
7. **Procedural graphics** - draw everything with canvas API
Let me design this:
**Tiles:**
- 0: Empty/air
- 1: Ground/dirt
- 2: Brick
- 3: Water (hazard)
- 4: Fire (hazard)
- 5: Spikes
**Entities:**
- Player
- Trophy
- Exit door
- Enemies (simple patrol)
**Level Design:**
I'll create a fun platformer level with multiple platforms, hazards, enemies, a trophy somewhere, and an exit.
**Controls:**
- Arrow keys or WASD for movement
- Space or Up for jump
Let me write the complete game:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dangerous Dave Style Platformer</title>
<style>
/* styles */
</style>
</head>
<body>
<script>
// game code
</script>
</body>
</html>
```
Let me think about the level design. I'll use a 2D array where:
- Each tile is maybe 32x32 pixels
- Level is maybe 40 tiles wide, 20 tiles tall
- Canvas size will be 800x640 or so
Let me design a fun level:
```
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
W W
W W
W T E W
W ######## #### W
W W
W F W
W #### #### W
W W
W W
W ####### ## W
W F W
W ## #### W
W F W
W ## W
W ############# W
W W
W P W
W######################################W
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
```
Wait, let me think more carefully. In Dangerous Dave style, it's a side-scrolling platformer. Let me make a single-screen level first.
Actually, let me make it scrollable or fit on one screen. A 40x20 grid with 32px tiles = 1280x640 which is a bit wide. Let me use 30x20 with 32px tiles = 960x640.
Actually, let me just use a fixed canvas size and make the level fit. Let me use 800x600 with maybe 25x19 tiles at 32px = 800x608. Close enough.
Let me just define the level more carefully. I'll make the level 30 wide x 20 tall, each tile 32px, canvas = 960x640.
Let me design a proper level:
Row 0: WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW (border walls all around)
Row 1: W W
... etc
Actually, let me use a simpler approach. I'll define walls/ground as '1', empty as '0', water as '3', fire as '4', etc.
Let me design a fun level layout:
```
111111111111111111111111111111
1 1
1 1
1 T E 1
1 1111111 11111 1
1 1
1 F 1
1 11111 11111 1
1 1
1 1
1 1111111 11 1
1 F 1
1 11 11111 1
1 F 1
1 11 1
1 1111111111 1
1 1
1 P 1
111111111111111111111111111111
111111111111111111111111111111
```
Let me code this up properly. I'll use a 30x22 grid.
Let me think about game mechanics:
- Player has position (x, y), velocity (vx, vy)
- Gravity pulls player down
- Can jump when on ground
- Collision detection with tiles
- Enemies patrol left-right on platforms
- Water and fire kill player on touch
- Trophy: when collected, need to reach exit
- Exit: only accessible after collecting trophy
For procedural graphics, I'll draw:
- Ground: brown/green blocks with some texture
- Brick: red/brown brick pattern
- Water: animated blue with wave effect
- Fire: animated orange/red flickering
- Player: a little guy with a hat (Dave style)
- Enemies: simple creatures
- Trophy: golden cup/shiny thing
- Exit: a door
Let me write the full code now.
I'll make this comprehensive with:
- Animated fire and water
- Enemy AI (simple patrol)
- Collectible trophy with sparkle
- Exit door
- Score/lives display
- Game states (playing, won, dead)
- Reset functionality
- Nice procedural graphics
Let me write it all out now.
Let me design the level grid (30x22):
Row 0: all 1 (ground border)
Row 1-20: ground on sides (1 at col 0 and col 29)
Row 21: all 1 (bottom ground)
Wait, this doesn't work well for a platformer. Let me use air for the top border and ground only where needed.
Actually in Dangerous Dave style, there are walls around the screen, and platforms inside. Let me rethink.
Let me use this layout (30 columns x 22 rows):
```
W = wall (1)
. = empty (0)
P = player start
T = trophy
E = exit
F = fire (4)
A = water (3)
M = monster/enemy spawn
111111111111111111111111111111
1.............................1
1.............................1
1...........T...........E.....1
1...1111111........11111......1
1.............................1
1........F..................F.1
1...11111...........11111.....1
1.............................1
1.............................1
1.......1111111.........11....1
1.............................1
1...11................11111...1
1.....................F.......1
1...11........................1
1.............1111111111......1
1.............................1
1.P............................1
111111111111111111111111111111
111111111111111111111111111111
```
Actually let me be more careful with indices. The grid is grid[row][col].
Let me code it up as a 2D array. I'll do 30 columns x 20 rows (so tiles are 32px = 960x640 canvas).
Let me define it clearly:
```javascript
const COLS = 30;
const ROWS = 20;
const TILE = 32;
const level = [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,'T',0,0,0,0,0,0,0,0,0,'E',0,0,0,0,0,0,0,1],
[1,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,'F',0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,'F',0,0,0,0,1],
[1,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,'F',0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,'P',0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
];
```
Hmm, I'll use numbers and special markers. Let me simplify - I'll store the level differently.
Actually, let me use an object-oriented approach:
- Level data as integers
- Player, trophy, exit, enemies as separate objects with grid positions
- Tiles: 0=air, 1=ground, 2=brick, 3=water, 4=fire
Let me finalize the design and write the code.
Actually, for fire and water, I think it's cleaner to treat them as tile types in the grid, but also have entity positions for the player, trophy, exit, and enemies.
Let me think about enemies. Enemies patrol horizontally. They need positions separate from tiles.
OK let me just write the whole thing. I'll make it clean and fun.
Here's my plan:
- 30x20 grid, 32px tiles, canvas 960x640
- Tiles: 0=air, 1=ground (brown/dirt), 2=brick (stone), 3=water (blue), 4=fire (orange)
- Player starts at position marked 'P'
- Trophy at 'T'
- Exit at 'E'
- Enemies defined as array of {x, y, direction, speed}
Let me write it now. I'll make a solid game with:
1. Smooth platforming physics
2. Collision detection
3. Animated fire/water
4. Patrol enemies
5. Trophy pickup with message
6. Exit unlocked after trophy
7. Death/respawn
8. Win condition
9. Score tracking
10. Nice procedural visuals
Let me write the complete code:
Actually, for the grid, let me use numeric tile types. I'll convert the special markers ('P', 'T', 'E') to entities during level loading.
Grid values:
- 0: air
- 1: ground (dirt/grass)
- 2: brick
- 3: water
- 4: fire
- 5: spikes
Entities (stored separately):
- player start
- trophy position
- exit position
- enemies: array of enemy objects
Let me design a better level. I want it to be fun to play with some challenge.
Here's my level (30x20):
```
111111111111111111111111111111
100000000000000000000000000001
100000000000000000000000000001
1000000000T0000E00000000000001
100011111100000111110000000001
100000000000000000000000000001
1000000004F0000000000004F00001
100001111100000000111100000001
100000000000000000000000000001
100000000000000000000000000001
100000001111111000000011000001
100000000000000000000000000001
100001100000000000000111110001
1000000000000000004F0000000001
100001100000000000000000000001
100000000011111111110000000001
100000000000000000000000000001
100P00000000000000000000000001
111111111111111111111111111111
111111111111111111111111111111
```
Wait, I should use proper numbers. Let me define:
For the level array, I'll use strings or just numbers. Let me use a 2D array.
Actually let me think about enemy placement. In the level data above, where should enemies be? I'll define them separately as spawn positions. Let me add enemies at certain positions in the level.
Let me just write the code now. I've planned enough.
Let me also consider:
- Canvas size: 960x640 (30*32 x 20*32)
- Background color: dark blue/black
- The player character should look like a little adventurer (Dave style - green outfit, brown hair, maybe a hat)
For water animation: I'll draw blue tiles with wavy lines that animate
For fire animation: I'll draw orange/red flickering flames
Let me write this complete game now. I'll be thorough.
OK here's my level design more carefully. I'll use letters for now and convert in code:
L = 1 (ground)
. = 0 (air)
P = player start
T = trophy
E = exit
F = fire (4)
W = water (3)
M = monster/enemy spawn
```
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
L..............................L
L..............................L
L.........T..........E........L
L...LLLLLL..........LLLLL.....L
L..............................L
L.......F...................F..L
L...LLLLL...........LLLLL.....L
L..............................L
L..............................L
L......LLLLLLL..........LL....L
L..............................L
L..LL.................LLLLL...L
L.........F....................L
L..LL..........................L
L............LLLLLLLLLLLL.....L
L..............................L
L.P............................L
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
```
And enemies at: (5, 5), (20, 10), (12, 14) - these are tile positions where enemies spawn
OK let me just write the code. I'll aim for a polished, fun game.
Let me think about the tile rendering more carefully:
Ground tiles (1): Brown/dirt block with green grass on top if there's air above
Brick tiles (2): Red brick pattern
Water tiles (3): Blue with animated wave effect
Fire tiles (4): Orange/red with animated flame effect
Player: A small character with a body, head, and hat. Green clothes, yellow hat (Dangerous Dave style).
Enemies: Simple creatures - maybe purple/red blobs with eyes that patrol.
Trophy: A golden cup.
Exit: A door/archway.
OK, I think I have enough to write this. Let me write the complete code.
Actually, I realize I should use the approach where the game design is converted from a level string to make it cleaner.
Let me write the code now.
I need to be careful about the size. Let me use 30x22 so it fits better as a playable area. 30*32=960, 22*32=704. Canvas 960x704.
Actually, let me use COLS=30, ROWS=20, TILE=32, canvas=960x640. That's a clean 60fps size.
Hmm, let me make the canvas a bit smaller: COLS=28, ROWS=18, TILE=32 -> 896x576. Or just go with 30x20 at 32px = 960x640.
Let me just go with 30x20, 32px tiles, 960x640 canvas.
Now let me design the level more carefully:
```
Row 0: 111111111111111111111111111111 (top border ground)
Row 1: 100000000000000000000000000001
Row 2: 100000000000000000000000000001
Row 3: 10000000T00000000E000000000001
Row 4: 100011111100000011111000000001
Row 5: 100000000000000000000000000001
Row 6: 1000000F000000000000000F000001
Row 7: 100001111100000001111100000001
Row 8: 100000000000000000000000000001
Row 9: 100000000000000000000000000001
Row 10: 100000011111110000000011000001
Row 11: 100000000000000000000000000001
Row 12: 100011000000000000011111000001
Row 13: 10000000000000F000000000000001
Row 14: 100011000000000000000000000001
Row 15: 100000000111111111110000000001
Row 16: 100000000000000000000000000001
Row 17: 100P00000000000000000000000001
Row 18: 111111111111111111111111111111
Row 19: 111111111111111111111111111111
```
Wait, I need to be more careful with the enemy positions. Let me think about where enemies should patrol. They could patrol on the ground platforms.
Enemies:
1. On the left platform at row 4 (cols 3-7), patrol cols 3-7
2. On the right platform at row 4 (cols 14-18), patrol cols 14-18
3. On the platform at row 10, patrol around
4. On the platform at row 12, patrol around
Let me define enemies with their patrol boundaries.
OK let me just write the complete code. I'll make it work and be fun.→ write
/workspace/index.html (26035 bytes)toolResult
Successfully wrote 26035 bytes to /workspace/index.html
assistant
thinking
Let me verify the file was written correctly and test it by reading it back.
→ bash
{"command":"wc -l /workspace/index.html && head -5 /workspace/index.html && echo \"---\" && tail -5 /workspace/index.html"}toolResult
971 /workspace/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> --- })(); </script> </body> </html>
assistant
thinking
The file is written. Let me check it with a quick test to make sure it loads properly by examining key parts. Let me also check a few things - I should ensure the game works properly. Let me re-read the file to verify the complete structure. Actually, let me just verify the JavaScript syntax is valid by running a quick node check.
→ bash
{"command":"node -e \"\nconst fs = require('fs');\nconst html = fs.readFileSync('/workspace/index.html', 'utf8');\n\n// Extract JS between stoolResult
✓ JavaScript syntax OK ✓ Canvas element ✓ Level data (30x20) ✓ Collision detection ✓ Gravity ✓ Jump ✓ Enemy AI ✓ Trophy system ✓ Particle system ✓ Game states ✓ HUD update ✓ Touch controls ✓ Procedural tile drawing ✓ Fire animation ✓ Water animation ✓ Player drawing ✓ Enemy drawing ✓ Exit drawing ✓ Trophy drawing All checks passed!
assistant
thinking
All checks pass. The game is complete and ready to use. Let me give a summary of what was built.
The game is built and verified. Here's what's inside `/workspace/index.html`: ## Dangerous Dave Style Platformer **Single-file HTML** — all CSS, JS, and graphics are inline with zero external dependencies. ### Features | Feature | Details | |---|---| | **Tile-based level** | 30×20 grid (960×640 canvas), parses a string map with ground, brick, water, fire tiles | | **Player** | Procedurally drawn adventurer with green shirt, brown pants, yellow hard hat — moves left/right, jumps, has momentum/friction physics | | **Jumping** | Space/↑/W to jump, variable height based on button hold, gravity 0.55 | | **Trophy** | Golden cup with floating animation and sparkle particles — collect it to unlock the exit | | **Exit door** | Locked (red) → unlocked (green) after trophy grab, with glow effect | | **Hazards** | Water (animated wavy blue) and fire (animated flame tongues with embers) — touch = death | | **Enemies** | Purple blobs with eyes and antennae, patrol horizontally on platforms — stomp them for 100 points, or they kill you | | **Procedural graphics** | Every sprite drawn with canvas API: grass-topped dirt tiles, brick patterns, animated fire/water, character, enemies, trophy, door | | **Particles** | Burst on trophy collect, enemy stomp, player death, and win | | **Game states** | `playing` → `dead` (respawn with lives) → `won` (auto-restart) | | **HUD** | Score, lives, trophy status indicator | | **Controls** | ←→/AD move, Space/↑/W jump, R restart — touch screen supported | | **Level design** | Multi-platform layout with platforms at different heights, hazards to avoid, enemies to stomp, trophy on a high platform, exit on another |
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
modeldeepseek-v4-flash
vendorDeepSeek
harnesspi-agent
generated2026-07-13
EVALUATION
★★★★★ 3/5 working
Tile-based platformer with enemies, hazards, and trophy goal; player dies quickly leading to game over screens.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.
idle motion0.8%
on click1.3%
on drag1.4%
on wheel1.1%
on enter + space1.2%
on arrow keys1.3%
on w/a/s/d1.3%
frame spread29.1 / 255
console errors0
js errors none
METRICS
runtime255.9s
tokens in33k
tokens out15k
cached16k
cost / run$0.0060