Wolfenstein raycaster · qwen3.5-9b
Output saved · Stopped by an API error Cost / run $0.0014 Runtime 238.7s
A model request failed and its retries ran out. The output is the HTML saved before that.
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.
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
METRICS
Transcript · 7 messages
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.
thinking
I need to build a first-person raycasting maze shooter in a single HTML file. Let me break down the requirements:
1. **Raycasting engine** - Render a textured grid maze with perspective wall heights
2. **Procedural textures** - Generate textures without external assets
3. **Controls** - W/S (forward/back), A/D (strafe), Left/Right arrows (turn), Space (shoot)
4. **Collision** - Solid wall collision, enemies occluded by walls, shots can't damage through walls
5. **Health system** - Player health, enemies can damage player on clear attack
6. **Win/Loss** - Defeat all enemies to unlock exit, reach exit to win, zero health = Game Over
7. **Restart** - Reset level, player, enemies, health
Let me build this step by step:
**Raycasting basics:**
- Cast rays from player position in all directions
- Find distance to nearest wall in each direction
- Draw vertical line with height proportional to 1/distance
- Use texture mapping based on ray angle and wall side
**Level design:**
- Simple grid-based map (0 = empty, 1 = wall, 2 = enemy, 3 = exit)
- Small but playable level
**Procedural textures:**
- Generate patterns using canvas or CSS gradients
- Different textures for different wall types
**Enemy system:**
- Simple AI (move toward player, shoot)
- Occlusion check before shooting
**Weapon:**
- Simple gun with muzzle flash
- Hit detection based on raycast
Let me start coding this:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS styles */
</style>
</head>
<body>
<canvas id="game"></canvas>
<div id="ui">
<!-- HUD elements -->
</div>
<script>
// Game logic
</script>
</body>
</html>
```
Now I'll implement the core mechanics:
**Game state:**
- Player position (x, y), direction (angle)
- Map array
- Enemies array
- Health, ammo, score
- Game state (playing, won, lost)
**Raycasting:**
- For each column of the screen, cast a ray
- Find first wall hit
- Calculate wall distance and side (north/south)
- Draw vertical line with appropriate height
**Texture generation:**
- Create canvas textures with patterns
- Use different colors for different wall types
**Enemy rendering:**
- Simple sprite rendering
- Check if player can see enemy (line of sight)
**Weapon:**
- Simple gun model
- Muzzle flash effect
- Hit detection
Let me write the complete code:
index.html (32981 bytes)Successfully wrote to index.html