Wolfenstein raycaster · llama-3.1-8b-instruct

Output generated Cost / run $0.0019 Runtime 18.3s

Prompt for this run

Build a playable first-person raycasting maze shooter on a canvas in a Wolfenstein-inspired style. Use HTML, CSS, and JavaScript as needed. Write it to `index.html` in the current working directory using your file tools. Inline your own CSS and JavaScript. Do not use external assets, CDNs, or network requests. No third-party libraries are provided. Required behavior: - Render a textured grid maze through a raycaster, with perspective wall heights and visible enemies. Generate textures procedurally; do not load external assets. - Use W/S to move forward/backward, A/D to strafe, Left/Right arrows to turn, and Space to shoot. Display the controls. Mouse turning is optional and must not be required. - Use solid wall collision and a small level with a reachable exit and at least three enemies. Enemies must be occluded by walls; shots cannot damage an enemy through a wall. - Give the player health. Enemies can damage the player under a clear attack rule. Show health and remaining enemy count; zero health causes Game Over. - Defeating all enemies unlocks the exit; reaching it shows a win state. Provide Restart to restore the level, player, enemies, and health. Verify: Test movement and turning near the starting area, check collision against a nearby wall, and fire to inspect weapon feedback. Sample the scene for stable wall rendering, then use Restart and check the initial viewpoint and health.

⛨ sandboxed Open in new tab ↗

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

modelllama-3.1-8b-instruct

vendorMeta · Llama

harnesspi 0.87.1 · browser iteration

generated2026-10-23

METRICS

runtime18.3s

tokens in39k

tokens out7.7k

cached28k

cost / run$0.0019

Transcript · 25 messages

system

user

assistant

<write>{"path": "/tmp/job-PSkI87/index.html", "content": "<html><head><style>body { margin: 0; font-family: monospace; } canvas { border: 1px solid black; } #controls { position: absolute; top: 10px; left: 10px; } #controls p { margin: 0; font-size: 12px; } </style></head><body><canvas id=\"canvas\" width=\"800\" height=\"600\"></canvas><div id=\"controls\"><p>W/S: forward/backward, A/D: strafe, Left/Right: turn, Space: shoot</p></div><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');let player = { x: 100, y: 100, health: 100 };let enemies = [{ x: 150, y: 150, health: 50 }, { x: 200, y: 200, health: 50 }, { x: 250, y: 250, health: 50 }];let walls = [[100, 100, 200, 100, 200, 200], [150, 150, 200, 150, 200, 250], [100, 250, 200, 250, 200, 300]];let textureSize = 8;let texelSize = textureSize / textureSize;let exit = [300, 300, 300, 300, 300, 400];function generateTexture(x, y) { let color = '#' + Math.floor(Math.random() * 16777215).toString(16); return { color, x, y }; }function renderMaze() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < 60; y += 10) { for (let x = 0; x < 80; x += 10) { let texture = generateTexture(x, y); ctx.fillStyle = texture.color; ctx.fillRect(x * texelSize, y * texelSize, texelSize, texelSize); } } for (let wall of walls) { ctx.fillStyle = 'black'; ctx.fillRect(wall[0] * texelSize, wall[1] * texelSize, (wall[2] - wall[0]) * texelSize, (wall[3] - wall[1]) * texelSize); } for (let enemy of enemies) { ctx.fillStyle = 'red'; ctx.fillRect(enemy.x * texelSize, enemy.y * texelSize, texelSize, texelSize); } for (let exit of exit) { ctx.fillStyle = 'green'; ctx.fillRect(exit.x, exit.y, texelSize, texelSize); }}function raycast(x, y) { let angle = Math.atan2(y - player.y, x - player.x); let distance = 1000; let texture = null; let hitX = -10; let hitY = -10; for (let wall of walls) { let intersection = intersect(x, y, angle, distance, wall); if (intersection !== null && intersection.dist < distance) { distance = intersection.dist; hitX = intersection.x; hitY = intersection.y; texture = generateTexture(x, y); } } return { dist: distance, hitX, hitY, texture };}function intersect(x, y, angle, distance, wall) { let m1 = 0; let b1 = 0; let m2 = 0; let b2 = 0; if (wall[2] - wall[0] !== 0) { m1 = (wall[3] - wall[1]) / (wall[2] - wall[0]); b1 = wall[1] - m1 * wall[0]; } else { m1 = Number.POSITIVE_INFINITY; } if (wall[5] - wall[3] !== 0) { m2 = (wall[6] - wall[4]) / (wall[5] - wall[3]); b2 = wall[4] - m2 * wall[3]; } else { m2 = Number.POSITIVE_INFINITY; } let yInt = (b2 - m2 * wall[3]) / (m2 - m1); let xInt = m1 * yInt + b1; let dist = Math.sqrt((x - xInt) ** 2 + (y - yInt) ** 2); return { dist, x: xInt, y: yInt }; }function handleInput(event) { if (event.key === 'KeyW') player.y -= 10; else if (event.key === 'KeyS') player.y += 10; else if (event.key === 'KeyA') player.x -= 10; else if (event.key === 'KeyD') player.x += 10; else if (event.key === 'ArrowLeft') player.angle -= Math.PI / 16; else if (event.key === 'ArrowRight') player.angle += Math.PI / 16; else if (event.key === ' ') { let ray = { x: player.x, y: player.y, angle: player.angle }; let texture = raycast(ray.x, ray.y); if (texture !== null) { console.log('Hit at distance', texture.dist); } } renderMaze();}document.addEventListener('keydown', handleInput);renderMaze();</script></body></html>"}</write> <browser>{"action": "inspect", "toX": 400, "toY": 300}</browser> <browser>{"action": "screenshot", "toX": 400, "toY": 300}</browser> <browser>{"action": "reload", "toX": 400, "toY": 300}</browser>

→ read {"limit":10000,"offset":0,"path":"/tmp/job-PSkI87/index.html"}

toolResult

ENOENT: no such file or directory, access '/tmp/job-PSkI87/index.html'

assistant

→ write /tmp/job-PSkI87/index.html (583 bytes)

toolResult