Wolfenstein raycaster · aion-2.0
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 · 4 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
Let's think step by step.
The user wants a single-page HTML file that implements a first-person raycasting maze shooter in the style of Wolfenstein 3D. Key requirements:
1. Single self-contained HTML file (index.html)
2. CSS in <style> tag, JS in <script> tag
3. No external resources, CDNs, or network requests
4. WASD movement, arrow or mouse turning
5. Textured grid maze with enemies to shoot
6. Procedural textures only (no external assets)
7. Canvas-based rendering
This is a complex project. Let me plan the architecture:
**Raycasting Engine:**
- Player position (x, y) and direction angle
- Cast rays from player position through FOV (e.g., 60°)
- DDA algorithm to find wall intersections
- Draw textured wall slices based on distance (fish-eye correction)
- Floor/ceiling rendering
**Map:**
- 2D grid (e.g., 16x16 or 24x24)
- 0 = empty, 1+ = wall types with different textures
**Textures:**
- Procedurally generated wall textures (brick, stone, wood patterns)
- Stored in offscreen canvases or ImageData
**Enemies:**
- Sprites placed in the map
- Billboard sprites that face the player
- Can be shot (click or spacebar)
- Simple AI: move toward player when in line of sight
**Controls:**
- WASD: forward/backward/strafe
- Arrow keys or mouse: turn
- Click/space: shoot
Let me build this step by step. I'll create a comprehensive implementation.
Let me think about the structure:
```
<!DOCTYPE html>
<html>
<head>
<style>
/* styles */
</style>
</head>
<body>
<div id="game">
<canvas id="canvas"></canvas>
<div id="hud">...</div>
</div>
<script>
// All game code
</script>
</body>
</html>
```
Key components to implement:
1. **Map generation** - Generate a maze-like map with rooms and corridors
2. **Player** - Position, direction, movement, collision detection
3. **Raycaster** - DDA algorithm, wall rendering with textures
4. **Texture generation** - Procedural brick, stone, wood, door textures
5. **Enemy system** - Sprite rendering, AI, health, shooting
6. **Controls** - Keyboard and mouse input
7. **HUD** - Health, ammo, minimap
Let me write the full implementation. This will be a substantial file.
I'll implement a maze generator using recursive backtracking or a simpler approach. For the textures, I'll generate pixel patterns procedurally.
Let me code this up now. I'll make it playable and fun with:
- A generated maze map
- Multiple wall texture types
- Enemy sprites that chase the player
- A gun/weapon display
- Health and ammo system
- Minimap
Let me write the complete implementation:
```javascript
// Maze generation - recursive backtracking
// Raycasting engine with DDA
// Texture generation for walls
// Sprite rendering for enemies
// Weapon rendering
// HUD overlay
```
I'll write this as a single comprehensive file. Let me code it now.
Actually, let me think about the maze generation more carefully. I'll use a simple approach: generate a grid where cells are either walls or passages, using a recursive backtracking algorithm to create a proper maze. Then I'll carve out some rooms and place enemies.
For the raycasting, I'll use the standard DDA (Digital Differential Analyzer) algorithm which is efficient and handles arbitrary grid sizes.
For textures, I'll create them on offscreen canvases:
- Brick texture: alternating rows of bricks with mortar lines
- Stone texture: random noise with some structure
- Wood texture: vertical grain lines
- Door texture: horizontal planks
For enemies, I'll render them as billboard sprites using textured quads. I'll generate a simple humanoid shape procedurally.
Let me start writing the code. This will be long but complete.
Let me think about the structure more carefully:
```
// --- Constants ---
const MAP_W = 16;
const MAP_H = 16;
const TEX_SIZE = 64;
const FOV = Math.PI / 3; // 60 degrees
const HALF_FOV = FOV / 2;
// --- Map Generation ---
function generateMaze(w, h) { ... }
function carveRooms(map) { ... }
// --- Texture Generation ---
function generateBrickTexture() { ... }
function generateStoneTexture() { ... }
function generateWoodTexture() { ... }
function generateEnemyTexture() { ... }
// --- Player ---
let player = { x: 1.5, y: 1.5, angle: 0, health: 100, ammo: 20 };
// --- Raycasting ---
function castRay(angle) { ... }
function render() { ... }
// --- Enemies ---
class Enemy { constructor(x, y) { ... } }
function updateEnemies(dt) { ... }
function renderEnemies() { ... }
// --- Weapons ---
function renderWeapon() { ... }
// --- HUD ---
function renderHUD() { ... }
// --- Input ---
// keyboard and mouse event handlers
// --- Game Loop ---
function gameLoop(timestamp) { ... }
```
Let me write the full implementation now. I'll be thorough.
For the maze, I'll generate a 24x24 grid to have a good-sized map.
Actually, let me make it configurable and generate a reasonable size.
Let me write the complete file now.
One thing to consider: the texture generation needs to produce usable textures for the raycasting. I'll generate textures as arrays of pixel data (RGBA) that can be used directly when drawing wall slices.
For the raycasting with textures, I need to:
1. Find which wall was hit and at what position along the wall
2. Use that position to sample the appropriate column of the texture
3. Scale the texture column to the height of the wall slice on screen
For enemies:
1. Calculate the angle and distance from player to each enemy
2. Sort by distance (far to near)
3. For each enemy, calculate the screen position and height
4. Draw the enemy sprite as a textured vertical strip
This is a well-known technique. Let me implement it.
I'll also add:
- A simple floor casting (draw floor and ceiling)
- A weapon overlay (a simple gun shape drawn procedurally)
- Sound effects using oscillators (optional - might skip for simplicity)
Let me write the code now. I'll aim for a polished experience.
Actually, I realize I should keep this manageable. Let me focus on:
1. Working raycasting with textured walls
2. Floor and ceiling
3. Enemies that you can shoot
4. WASD + mouse/arrow controls
5. HUD with health/ammo
6. Minimap
7. Procedural textures
Let me write it all now.
For the maze generation, I'll use a simple algorithm:
1. Fill the entire grid with walls
2. Use recursive backtracking to carve passages
3. Place the player at a starting position
4. Place enemies at dead ends or in open areas
Here's my plan for the maze:
- Grid size: 24x24 (each cell is 1 unit)
- Walls are at integer coordinates
- Passages are at half-integer coordinates (or vice versa)
- Player starts at a specific position
Actually, the standard approach for raycasting mazes:
- Use a grid where odd-numbered cells are walls and even-numbered cells are passages
- Or use a grid where 1 = wall, 0 = empty, and generate a maze
Let me use the simpler approach: generate a maze using a grid where walls and passages are separate cells.
I'll use a 24x24 grid where:
- Walls are cells with value 1
- Empty space is value 0
- Different wall types have different values (1, 2, 3 for different textures)
For maze generation, I'll use recursive backtracking on a 12x12 grid of rooms, then expand to 24x24 with walls between rooms.
Actually, let me use a simpler approach: generate a random maze by carving passages in a grid.
Let me write the code. I'll use a standard maze generation algorithm.
OK let me just start writing the file. It's going to be long but complete.
Let me think about the key rendering functions:
For the raycasting loop:
```javascript
for (let x = 0; x < SCREEN_W; x++) {
let rayAngle = player.angle - HALF_FOV + (x / SCREEN_W) * FOV;
let { dist, hitX, hitY, side, texId } = castRay(rayAngle);
let wallHeight = SCREEN_H / dist;
let texX = Math.floor((side === 0 ? hitY : hitX) * TEX_SIZE) % TEX_SIZE;
// Draw the wall slice using the texture
}
```
For enemies, I need to project them as sprites:
```javascript
for (let enemy of sortedEnemies) {
let dx = enemy.x - player.x;
let dy = enemy.y - player.y;
let angle = Math.atan2(dy, dx) - player.angle;
let dist = Math.sqrt(dx*dx + dy*dy);
let screenX = (angle / FOV + 0.5) * SCREEN_W;
let spriteHeight = SCREEN_H / dist;
// Draw the sprite
}
```
Let me now write the complete file. I'll be comprehensive and make it work well.
I'll also add a simple gun that fires when clicking or pressing space, with a muzzle flash animation.
For enemy AI:
- If enemy can see the player (raycast to check), move toward the player
- Otherwise, wander randomly
- When close enough, attack (reduce player health)
For shooting:
- Check if any enemy is within the crosshair (center of screen)
- Reduce enemy health
- Enemy dies when health reaches 0
Let me write the full implementation now.
I'll build a complete Wolfenstein 3D-style raycasting maze shooter as a single self-contained HTML file. This will include a procedurally generated maze, textured walls, floor/ceiling, enemies with AI, a weapon, and full controls.
/tmp/ws/index.html (28877 bytes)Successfully wrote 28877 bytes to /tmp/ws/index.html
thinking
The user's question is answered within the tags. The file has been written. Let me verify it's a complete, working single-page app by checking its size and doing a quick sanity check.
The file has been written to `/tmp/ws/index.html` (~29KB). Here's what it includes: **Wolfenstein 3D-style Raycasting Maze Shooter** - **Maze generation**: Recursive backtracking algorithm creates a random grid maze with added rooms and 3 wall texture types (brick, stone, wood) assigned randomly - **Raycasting engine**: Full DDA raycasting with fish-eye correction, textured wall slices, distance shading, and side-based darkening - **Controls**: WASD movement, mouse look (pointer lock on click), arrow keys for turning, click/Space to shoot - **Enemies**: 8 enemies spawn in the maze with chase AI (they see you via raycast line-of-sight), melee attacks, hurt flash, and death - **Weapon**: Hand-drawn pistol with muzzle flash, recoil animation, and firing cooldown - **HUD**: Health bar, ammo bar, score display - **Minimap**: Top-right corner shows the maze layout, enemy positions (red dots), and player position/direction (green) - **Death/Restart**: When health reaches 0, a death screen appears; press R to regenerate the maze and respawn - **Procedural textures only**: Brick, stone, wood, and enemy sprites are all generated with code — no external assets or CDNs Open `index.html` in a browser and click the canvas to lock the pointer, then 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 renders with minimap, HP/ammo HUD; mouse drag/wheel turn view, WASD/arrows less visibly responsive.
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.