Wolfenstein raycaster · nemotron-3-ultra-550b-a55b
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 · 8 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
The user wants a first-person raycasting maze shooter in the style of Wolfenstein 3D. This is a complex project that needs: 1. A canvas-based raycasting engine 2. WASD movement + mouse/arrow turning 3. Textured grid maze (procedural textures only) 4. Enemies that can be shot 5. All in a single self-contained index.html file Let me build this step by step. I'll create a comprehensive raycasting engine with: - Raycasting for walls - Sprite rendering for enemies - Procedural texture generation - Enemy AI (simple) - Shooting mechanics - Minimap - Health/ammo UI This will be a large file but I'll make it self-contained.
/workspace/index.html (44392 bytes)Successfully wrote 44392 bytes to /workspace/index.html
thinking
The file has been created. Let me verify it works by checking if there are any syntax errors.
{"command":"cd /workspace && node --check index.html 2>&1 || echo \"HTML file - checking with head instead\"","timeout":10}node:internal/modules/esm/get_format:236 throw new ERR_UNKNOWN_FILE_EXTENSION(ext, filepath); ^ TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".html" for /workspace/index.html at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:236:9) at defaultGetFormat (node:internal/modules/esm/get_format:262:36) at checkSyntax (node:internal/main/check_syntax:67:20) { code: 'ERR_UNKNOWN_FILE_EXTENSION' } Node.js v24.18.0 HTML file - checking with head instead
thinking
The HTML file is created. Let me verify it looks correct by reading the beginning and end.
{"command":"head -50 /workspace/index.html && echo \"...\" && tail -30 /workspace/index.html","timeout":5}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Raycasting Maze Shooter</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000; overflow: hidden; font-family: 'Courier New', monospace; } canvas { display: block; } #ui { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } #health, #ammo, #score, #level { position: absolute; color: #0f0; font-size: 18px; text-shadow: 2px 2px 4px #000; } #health { bottom: 20px; left: 20px; } #ammo { bottom: 20px; right: 20px; text-align: right; } #score { top: 20px; left: 20px; } #level { top: 20px; right: 20px; text-align: right; } #crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; pointer-events: none; } #crosshair::before, #crosshair::after { content: ''; position: absolute; background: #0f0; } #crosshair::before { width: 2px; height: 12px; left: 11px; top: 0; } #crosshair::after { width: 12px; height: 2px; top: 11px; left: 0; } #minimap { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); border: 2px solid #0f0; background: rgba(0,0,0,0.7); } #message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #f00; font-size: 32px; text-shadow: 2px 2px 4px #000; display: none; text-align: center; } #gun { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none; } #gun canvas { display: block; filter: drop-shadow(0 0 8px #0f0); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } </style> </head> <body> <canvas id="screen"></canvas> <div id="ui"> <div id="health">HEALTH: <span id="healthVal">100</span></div> <div id="ammo">AMMO: <span id="ammoVal">50</span></div> <div id="score">SCORE: <span id="scoreVal">0</span></div> <div id="level">LEVEL: <span id="levelVal">1</span></div> <div id="crosshair"></div> <canvas id="minimap" width="150" height="150"></canvas> <div id="message"></div> <div id="gun"><canvas id="gunCanvas" width="200" height="150"></canvas></div> </div> <script> // ============ CONFIGURATION ============ const CONFIG = { MAP_SIZE: 32, TILE_SIZE: 64, FOV: Math.PI / 3, MAX_DEPTH: 20, MOVE_SPEED: 3.5, ROT_SPEED: 0.035, MOUSE_SENSITIVITY: 0.002, PLAYER_HEIGHT: 0.5, ... }); document.addEventListener('mousemove', e => { if (mouseLocked && !gameOver && !victory) { player.angle += e.movementX * CONFIG.MOUSE_SENSITIVITY; } }); canvas.addEventListener('contextmenu', e => e.preventDefault()); // ============ RESIZE ============ function resize() { width = window.innerWidth; height = window.innerHeight; halfWidth = width / 2; halfHeight = height / 2; canvas.width = width; canvas.height = height; } window.addEventListener('resize', resize); resize(); // ============ START ============ generateGunTexture(); initLevel(); requestAnimationFrame(gameLoop); </script> </body> </html>
thinking
The file looks complete and well-formed. It's a single self-contained HTML file with all the game logic, procedural texture generation, raycasting engine, enemy AI, shooting mechanics, etc. Let me provide a summary to the user.
Created `/workspace/index.html` - a complete Wolfenstein 3D-style raycasting maze shooter in a single self-contained file. **Features implemented:** - **Raycasting engine** with 320 rays, fisheye correction, textured walls (4 procedural wall types: brick, stone, tech, metal) - **Procedural textures only** - all generated at runtime (walls, floor, ceiling, enemies, gun) - **WASD + mouse/arrow controls** with pointer lock for smooth FPS movement - **3 enemy types**: Grunts (balanced), Fast (quick, low HP), Heavy (slow, high HP, armored) - **Enemy AI** with wander/chase/attack states and line-of-sight detection - **Shooting mechanics** with spread, ammo, fire rate, muzzle flash, screen shake - **Particle system** for bullet impacts, blood, muzzle flash, explosions - **Minimap** showing walls, enemies, player position/direction - **UI**: Health, ammo, score, level counter, crosshair, gun sprite - **Procedural maze generation** with recursive backtracking + loops + pillars - **Multiple levels** with increasing difficulty (more enemies, larger maps) - **Health/ammo pickups** on level complete **Controls:** - WASD / Arrow keys - Move/Strafe - Mouse / Left-Right arrows - Turn - Space - Shoot - Click canvas to lock mouse - Space to restart/continue after game over or level complete
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
Raycasted maze with textures, minimap, and HUD; drag/wheel turn view, health drains to GAME OVER after WASD.
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.