Wolfenstein raycaster · muse-glimmer-30b
Build a first-person raycasting maze shooter on a canvas in the Wolfenstein 3D style: WASD movement and arrow or mouse turning through a textured grid maze with enemies you can shoot. Procedural textures only, no external assets.
transcript · 6 messages
Build a first-person raycasting maze shooter on a canvas in the Wolfenstein 3D style: WASD movement and arrow or mouse turning through a textured grid maze with enemies you can shoot. Procedural textures only, no external assets.
thinking
Build a first-person raycasting maze shooter on a canvas in Wolfenstein 3D style: WASD movement and arrow or mouse turning through textured grid maze with enemies you can shoot. Procedural textures only, no external assets.
Build single-page web app write it ALL into one self-contained file named index.html in current directory: CSS in style tag, JS in script tag, inline — do not create separate .css/.js files. Use NO external resources, CDNs or network requests: artifact runs fully sandboxed with no network. End with index.html present.
We need to create index.html with raycasting. Procedural textures only. WASD movement, arrow or mouse turning. Textured grid maze with enemies you can shoot.
We need to make a self-contained HTML. Use canvas. Raycasting like Wolfenstein. Use procedural textures generated via canvas.
We need maze procedural? Generate grid maze with walls. Enemies spawn.
Implement basic raycaster: for each column, cast ray, find distance, wall height = screenHeight / distance * something. Render walls with texture.
Procedural textures: generate checkerboard, gradient etc on the fly using canvas createPattern? Could just draw lines.
Simpler: generate small canvas textures for wall types, floor/ceiling gradient.
Enemies: simple sprites billboarded? Could be simple rectangles with distance check. Shooting: mouse click or space? Shoot ray from player direction, check intersection with enemies within angle.
WASD movement: move forward/back left/right with collision detection against maze grid.
Mouse turning: lock pointer? Might be tricky without external. Use arrow keys for turning, mouse move for turning when pointer locked? Might use mousemove relative.
Simplify: arrow keys left/right turn, WASD move.
Mouse for aiming? Could use click to shoot. Or mouse move to turn.
We can implement pointer lock on click to rotate with mouse delta. That's good.
Procedural maze: generate using DFS.
We need single file.
Let's create index.html with full code.
Implement:
Canvas full screen.
Map: 16x16 or 20x20.
Map array with 1 = wall, 0 = floor.
Generate maze using recursive backtracker.
Player: x,y, angle.
Raycasting: for x in 0..width-1: cameraX = 2*x/width -1; rayDirX = dirX + planeX*cameraX; rayDirY = dirY + planeY*cameraX; DDA.
Render walls: texture coordinate based on hit.
Procedural textures: define function createTexture(color1,color2). Return CanvasPattern or draw using pixel manipulation.
Simpler: draw wall column with gradient stripes.
We can create wall texture canvas 64x64 with checker pattern procedurally.
Same for floor/ceiling: gradient.
Enemies: array of {x,y, hp, angle?}. Render as billboards: project to screen based on distance. Simple rectangle with face.
Shooting: on click, cast ray similar to center ray, check if enemy within some angular threshold and distance.
Also simple AI: enemies move towards player occasionally? Maybe stationary.
Keep simple.
Implement game loop via requestAnimationFrame.
Add HUD: health, ammo, kills.
Need WASD movement with collision: check map grid cell at new position.
Turning with mouse: on mousemove when pointer locked, angle += deltaX * sensitivity.
Arrow keys also turn.
Controls: WASD move, mouse turn, click shoot.
Procedural textures only.
No external assets.
Make sure index.html is written.
Let's write file.
We need to ensure performance okay.
Implementation plan:
HTML structure:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Wolfenstein Raycaster</title><style>...</style></head>
<body><canvas id="game"></canvas><div id="hud">...</div><script>...</script></body>
JS:
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
resize to window.
Map generation:
size 21x21 with border walls.
Use DFS carving.
Simplified: create array filled with 1, carve passages.
Initialize player at 1.5,1.5.
Raycasting loop:
plane distance fov ~0.66
For each column:
...
hit distance.
Draw vertical stripe.
Use texture: create wall textures array of 4 types. Each is a canvas 64x64 drawn procedurally.
When drawing wall column, calculate texX from hit side and wallX.
Draw slice using drawImage.
Floor casting optional: draw floor with gradient.
Simplify floor: fill bottom half with gradient.
Enemies:
Create 10 enemies at random empty cells far from player.
Rendering enemies:
For each enemy:
dx = enemy.x - player.x
dy = enemy.y - player.y
angleToEnemy = atan2(dy,dx) - player.angle
normalize to [-pi,pi]
if abs angle > fov/2 skip
distance = sqrt(dx*dx+dy*dy)
screenX = (angleToEnemy / fov +0.5)*width
height = screenHeight / distance * constant
draw rectangle at screenX with height.
Shooting:
On click, cast central ray (like raycasting for column width 1). Find distance to wall? But we need hit enemy. Simpler: for each enemy compute angle diff and distance. If angle diff < threshold and distance < max, hit.
Threshold ~ 0.01 rad per pixel? Actually screen width.
Compute projected screen x difference between ray center and enemy. If < 10 pixels and distance < 10, hit.
Health/ammo.
Add simple crosshair.
Ensure procedural textures only.
We'll generate textures:
function makeTexture(w,h, drawFn) -> canvas.
Wall textures: brick pattern using lines.
Let's implement.
Edge cases: performance: raycasting for each column (800 columns) okay.
Let's write code.
Potential issues: pointer lock requires user gesture. On click, requestPointerLock.
Let's implement.
We'll produce final file.
Use write tool.
/tmp/ws/index.html (9611 bytes)Successfully wrote 9611 bytes to /tmp/ws/index.html
thinking
Successfully wrote file. Should confirm file present.
{"command":"ls -l /tmp/ws/index.html"}-rw-r--r--. 1 node node 9617 Aug 13 01:36 /tmp/ws/index.html
thinking
Done.
Created a self-contained Wolfenstein-style raycaster in `/tmp/ws/index.html`. It uses only procedural canvas textures, no external assets: * Procedural maze generation with DDA raycasting * WASD movement + Arrow keys / mouse turning, pointer-lock * Click to shoot, enemies rendered as billboards * Procedural brick/stone wall textures, floor/ceiling gradients * HUD for HP, ammo, kills Open `index.html` in a browser to play.
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
Raycasting maze corridor renders with textures only after mouse wheel input; canvas stays blank red until then, ammo count changes but view doesn't visibly shift with WASD/arrows.
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.