Dangerous Dave platformer · grok-4.20
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.
transcript · 4 messages
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.
thinking
The task is to build a playable tile-based platformer in the style of Dangerous Dave. It needs to be a single-page web app in one self-contained index.html file with CSS in <style> and JS in <script>....The task is to build a playable tile-based platformer in the style of Dangerous Dave on a single-page web app in one self-contained index.html file with CSS in <style> and JS in <script>. No external resources.
Key elements:
- Tile-based level on a canvas.
- Player character that can move left right, jump.
- Goal: grab a trophy, then reach the exit.
- Hazards: fire and water.
- Simple enemies.
- Procedural graphics only – draw everything with canvas primitives, no images.
I need to implement this in one HTML file.
First, structure the HTML:
<!DOCTYPE html>
<html lang=" en">
<head>
<meta charset="UTF-8">
<title>Dangerous Dave Clone</title>
<style>
body { margin:0; background:black; color:white; font-family:monospace; }
canvas { border:1px solid white; display:block; margin:auto; }
#overlay { position:absolute; top 0; left0; width100%; height100%; pointer-events:none; }
#instructions { position:absolute; bottom0; left0; width100%; text-align:center; padding-bottom:10px; }
</style>
</head>
<body>
<canvas id="c" width="800" height="480"></ canvas>
<div id="overlay">
<div id="instructions">Use arrows to move, space to jump. Collect trophy then exit. Avoid fire and water.</div>
</div>
<script>
// JS code here
</script>
</body>
</html>
Now, the JS part.
Define constants:
const TILE_SIZE = 32;
const COLS = 25; // width in tiles
const ROWS = 15; // height
const CANVAS_WIDTH = COLS * TILE_SIZE; // 800
const CANVAS_HEIGHT = ROWS * TILE_SIZE; // 480
let map = Array(ROWS).fill().index.html (32957 bytes)Successfully wrote 32957 bytes to index.html
thinking
The task is complete. I've built a single self-contained index.html file with a playable tile-based platformer inspired by Dangerous Dave.
The game has been built and saved to **index.html**. Open it in a browser to play (arrow keys/WASD + Space to jump; collect the trophy then reach the exit). All graphics, sound, physics, collisions, enemies, hazards, particles, and UI are fully contained with no external dependencies. Enjoy!
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
EVALUATION
Dangerous Dave-style platformer starts at menu, transitions to a tiled level with player, enemy, trophy, fire and water hazards; arrow/WASD moved player slightly.
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.