Wolfenstein raycaster · deepseek-r1-0528
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
We are going to create a single-page web app in one file: index.html.
The app will be a first-person raycasting maze shooter (Wolfenstein 3D style).
Requirements:
- WASD for movement, arrow keys or mouse for turning.
- Textured grid maze (procedural textures, no external assets).
- Enemies that you can shoot.
We'll structure the HTML file with:
- A <canvas> element for rendering.
- Inline CSS for basic styling (full-screen canvas).
- Inline JavaScript for the game logic.
Technical approach for raycasting:
We'll implement a raycasting engine similar to Wolfenstein 3D.
The world is a 2D grid (each cell is either 0 for empty or 1 for wall, and we can extend for different wall textures and sprites for enemies).
We'll use the technique of casting a ray for each column of the screen and rendering vertical strips.
Steps in JavaScript:
- Set up the canvas and context.
- Define world map (a grid).
- Player position (x, y) and direction (angle).
- Movement and rotation controls (WASD, arrows/mouse).
- Enemies as sprites (with position, and possibly a simple AI).
- Shooting mechanism.
Rendering:
We will have two main parts:
1. Render the 3D view (walls, floor, ceiling) by raycasting.
2. Render the sprites (enemies) after the walls, using a painter's algorithm (sorted by distance).
Textures:
We'll create procedural textures for walls and sprites. We can use a function that generates a texture pattern for each wall type and for enemies.
Controls:
- WASD: W/S for forward/backward, A/D for strafing.
- Arrow keys: left/right for turning, up/down for looking up/down? (But Wolfenstein didn't have vertical looking).
We'll do horizontal turning only for simplicity.
- Mouse: for turning (lock pointer in canvas).
Shooting:
- Click or space bar to shoot.
Implementation complexity:
We need to balance between a minimal example and a playable game.
Given the constraints, we'll implement:
- A fixed size map (grid).
- A few enemies that are represented as billboards (2D sprites always facing the player).
- Simple collision detection (prevent walking through walls and enemies?).
Let's outline the structure:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Raycast Maze Shooter</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
// The entire game code in one script
... (long code) ...
</script>
</body>
</html>
We'll write the entire game in a single script tag.
Now, let's break down the script:
// Constants and Settings
var canvas, ctx;
var map = [ ... ]; // 2D array of 0/1
var player = { x: 1.5, y: 1.5, angle: 0, moveSpeed: 0.05, rotSpeed: 0.03 };
// Enemies: array of objects { x, y, type, ... }
// Textures: we'll create a function to generate a wall texture for each wall type (or use a pattern)
// For simplicity, we can use a checkerboard pattern for walls and a solid color for enemies.
// Controls state
var keys = {};
var mouse = { x: 0, y: 0, isDown: false };
// Initialize
function init() { ... }
// Raycasting function
function castRay(angle) { ... }
// Rendering
function render() {
// Clear canvas
// Draw sky and floor (solid colors for simplicity)
// Cast rays for each column and draw walls
// Then draw sprites (enemies) in sorted order (by distance to player)
}
// Game loop
function gameLoop() {
update();
render();
requestAnimationFrame(gameLoop);
}
// Update: move player, handle shooting, enemy AI, etc.
function update() {
// Update player position and angle based on keys
// Check collisions
// Update enemies (move, etc.)
}
// Event listeners for keyboard and mouse
// Helper functions: for generating textures, etc.
Given the complexity, we will need to be concise and focus on core features.
We will create a small fixed map (e.g., 10x10) and a few enemies.
Let's get started with the code.
Note: This will be a long script. We'll write it step by step but as one block.
However, due to token limits, we might need to be efficient.
We'll write the entire HTML file with the script embedded.
Important: We are not allowed to use external resources.
Let's go.
I'll create a self-contained Wolfenstein 3D-style raycasting game in a single HTML file. Here's the implementation:
/tmp/ws/index.html (20874 bytes)Successfully wrote 20874 bytes to /tmp/ws/index.html
thinking
We have written the entire game into a single index.html file as per the requirements. The game includes: - Procedurally generated textures for walls, floor, and enemies (no external assets). - WASD and arrow key controls for movement and turning. - Mouse support for aiming and shooting (with pointer lock). - A simple raycasting engine to render the 3D maze. - Enemies that move toward the player and cause damage on contact. - Shooting with hit detection and enemy health. - A mini-map to show the player's position and the maze layout. - Health bars and ammo display. The game is contained in one HTML file with inline CSS and JavaScript. We are now done. The file has been written to /tmp/ws/index.html.
I've created a self-contained, single-file Wolfenstein-style raycasting maze shooter. The game includes: 1. WASD & arrow key controls for movement and turning 2. Mouse aiming with pointer lock and shooting 3. Procedural textures for walls and enemies (no external assets) 4. Random enemy spawning with AI that chases the player 5. Health system and shooting mechanics 6. Mini-map in the corner 7. Full-screen canvas rendering The game features: - Procedurally generated dungeons with textured walls - Enemies that chase and damage the player - Shooting mechanics with visual recoil animation - HUD with health bar and ammo display - Proper collision detection - Sky and floor rendering - Start screen with instructions All the code is contained in a single HTML file with no external dependencies. The game runs completely sandboxed with no network access required. To start playing: 1. Click the overlay when the game loads 2. Move with WASD keys 3. Turn with arrow keys or mouse 4. Shoot with mouse click 5. Survive as long as possible! The index.html file is ready in the current working directory.
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 shooter with textured walls, enemy sprite, minimap and HUD; click starts game, but arrows/wasd show little visible movement.
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.