We need respond by building file index.html in current dir. Need inspect? We have cwd /tmp/ws. Need create single file. Need satisfy user. We can implement raycasting maze shooter. Need no external resources. Need perhaps use canvas, CSS inline, JS inline. Need maybe include procedural textures via canvas patterns? Since no external assets. Need first-person raycasting Wolfenstein 3D style. Features: WASD movement, arrow or mouse turning, textured grid maze, enemies shootable. Need index.html present. We'll write comprehensive single HTML. Need maybe no network. Need use Canvas. Need include mouse lock pointer for mouse turning, keyboard arrows. Raycaster. Procedural textures only: wall textures generated via canvas patterns or procedural per-pixel drawing. Since "no external assets"; procedural textures can be generated by JS in code. Maybe draw walls with procedural stripes/bricks using offscreen canvas. Enemies as sprites (rectangles/crosshair) with health. Shooting via mouse click: raycast distance to enemy; if hit, damage. Could implement wall collision, floor/ceiling, fog, depth sort sprites. Need ensure works in sandbox.

Need maybe use file operations. Need create index.html. We can use write. Need maybe no need inspect. Let's craft robust code.

Need consider details:
- Fullscreen canvas maybe 960x540 scaled.
- Fixed FOV 60 deg, ray step count = width maybe.
- Map grid 2D array: 1 wall, 0 empty, 2 door? maybe not.
- Player pos, dir, plane.
- Movement: WASD relative to dir.
- Mouse turn: if pointer locked, dx * sensitivity.
- Arrow keys: left/right turn; up/down move? User says arrow or mouse turning, WASD movement. We'll implement arrow keys also turn left/right, Up/Down strafe? Or maybe Up/Down move? But WASD movement. Could make arrow up/down also forward/back. Better "arrow or mouse turning" maybe arrows turn left/right; maybe also up/down move. We'll include Up/Down move forward/back and Left/Right turn.
- Shooting: click canvas, if pointer locked? If not pointer lock? On first click, request pointer lock. But shooting while pointer locked. Also click to shoot. Need maybe "Click to lock mouse" overlay.
- Enemies: array of objects {x,y, hp, sprite?}. They move slowly toward player if line of sight? Could implement simple patrol and chase. Need avoid walls maybe simple movement toward player with collision if reachable. Could be enemies "you can shoot"; if not hit they approach. Need maybe raycast enemy if in front and no wall occlusion.
- Procedural textures:
  - Wall texture: create offscreen 64x64 canvas with procedural brick pattern using fillRect, random deterministic. Maybe draw stripes/bricks.
  - Floor/ceiling: draw gradient/checker.
  - For walls, draw projected texture from vertical strip based on wall type. Use texture draw to canvas. Need implement drawWallTexture(texture, x, y, w, h, shade). For each vertical pixel column? Since texture 64 high. We can draw per column using y mapping. For performance: For each screen x, calculate t = (textureY + height*0.5 - drawY) / height. But drawImage with source/dest scaling per column maybe costly but okay for 960x540. Better pre-render vertical columns? Simpler drawImage scaled per column:
```
for x=0; x<width; x++ {
  const t = (textureY + h*0.5 - y)/h;
  const sy = Math.floor(t*TEX_SIZE);
  ctx.drawImage(tex, 0, sy, TEX_SIZE, 1, x, y, 1, h);
}
```
This is many drawImage calls (width*height) too many. Instead use precomputed texture columns: for each x screen, y vertical pixel maps to sy. We can draw full texture scaled vertical to column:
```
const sy = Math.floor(t*TEX_SIZE);
ctx.drawImage(tex, 0, sy, TEX_SIZE, 1, x, y, 1, h);
```
Actually sy one row. h = top height. This uses 518k drawImage calls if per pixel; too much. Better drawImage scaled from full texture to column:
```
const t = (textureY + h*0.5 - y) / h;
const sy = t*TEX_SIZE;
ctx.drawImage(tex, 0, sy, TEX_SIZE, 1, x, y, 1, h)
```
Still per vertical pixel. Better draw per wall slice: For each wall x, compute sy = t*TEX_SIZE and dest height. DrawImage(tex, 0, sy, TEX_SIZE, 1, x, y, 1, h) is per pixel. But can draw texture scaled vertically to full column: sy = t*TEX_SIZE, dest sy? Actually drawImage from full texture to column with dest height h, but source y should be sy and source height 1? Need vertical scale h / 1. No, to map texture row sy to screen y..y+h, source row sy, dest y,h. So one drawImage per wall column (960), not per pixel. Good:
```
const sy = ((textureY + h*0.5 - y)/h)*TEX_SIZE;
ctx.drawImage(tex, 0, sy, TEX_SIZE, 1, x, y, 1, h);
```
This stretches one texture row across whole column; visible vertical pixelation but okay. Maybe better source height 8, dest h. sy = t*TEX_SIZE - TEX_SIZE/2; drawImage(tex, 0, sy, TEX_SIZE, TEX_SIZE, x, y, 1,h) but sy negative maybe allowed? drawImage negative source? Canvas supports negative? Maybe. Better create per-column texture sprites? Simpler: draw full texture scaled: sy = t*TEX_SIZE - TEX_SIZE/2; ctx.drawImage(tex, 0, sy, TEX_SIZE, TEX_SIZE, x, y, 1,h); if sy negative, drawImage will crop? It can use negative source. Maybe okay. But for each wall column. Need shade overlay: after draw column, create gradient? Could fill with semi-transparent black over column. But overlay per column using globalAlpha.
```
ctx.globalAlpha = shade; ctx.fillStyle = '#000'; ctx.fillRect(x,y,1,h);
```
Need reset.
- For floor/ceiling: draw base gradient and checkered lines? Could draw floor as perspective grid:
  - fill top half dark, bottom half dark.
  - draw horizon.
  - draw ceiling/floor triangular sectors from center to wall intersections? Simpler draw full gradient. Then draw grid lines:
```
drawGrid(ctx, isFloor)
```
Perspective grid: for y from 0 to height, t = (y - horizon)/(height - horizon), x line positions using projection of world grid lines. Need maybe draw floor grid: compute projection of world coords lines. Simpler draw radial stripes? But "textured grid maze" could mean walls have texture and floor grid. Implement grid lines via projection:
For each world grid line at integer positions from -max to max, draw projected line from near horizon to floor bottom. But not necessary? User says textured grid maze; maybe walls are grid. We can draw floor grid with perspective.

Need raycasting:
- For each x, rayDirX = dirX + planeX * 2*x/width - maybe formula.
- mapX floor(player.x), mapY floor(player.y)
- deltaDistX = abs(1/dirX), etc.
- sideDist = ...
- step/sideDist.
- hit wall, perpendicularDistance = if side==0 ? (mapX - player.x + (1-stepX)/2)/dirX : ...
- But if dir negative, formula okay? Standard.
- Draw wall: lineHeight = canvas.height / perpWallDist. drawStart = -lineHeight/2 + height/2 + wallOffset? Maybe adjust based on enemy? no.
- Texture: choose wall type map[mapY][mapX], maybe if side.
- Wall texture draw with shade = clamp(1 - perpWallDist/18, .15,1) and maybe fog color.
- Draw vertical shadows? no.
- Draw ceiling/floor.
- Draw sprites:
  - Need compute sprite positions relative to camera, sort by distance descending.
  - For each enemy not dead:
    transformX = invDirX*(enemy.x - player.x)+invDirY*(enemy.y - player.y)
    transformY = -dirX*(enemy.x - player.x) + -dirY*(enemy.y - player.y)
    if transformY <= 0 skip.
    spriteScreenX = Math.round((width/2)*(1+transformX/transformY))
    spriteHeight = abs(height/transformY)
    drawStartY = -spriteHeight/2 + height/2
    drawStartX = -spriteWidth/2 + spriteScreenX
    if drawStartX <0 etc skip.
    shade = clamp(1 - transformY/12, .25, 1)
    draw rectangle/shape: base body red, face, health bar. Could draw procedural sprite canvas 64x96? Simpler draw on main ctx with rectangles and ellipse, but perspective? Use ctx.save translate spriteScreenX center, scale(spriteHeight/96, spriteHeight/96), draw in local 0..96. Since canvas transform can draw. Need sort by distance.
  - Need shooting: on pointerdown, if not pointer locked requestPointerLock? But if pointerdown immediately lock, cannot shoot until second click. We can allow first click locks, second shoots. But user may expect click shoot. We can have click to shoot and request pointer lock if available; first click both maybe if pointer lock not granted? We can shoot first click, then request pointer lock after. But if pointer not locked, mouse movement no turning. Maybe "Click to lock mouse" overlay.
  - Raycast enemy hit: For each enemy in front? Need determine if shot hits enemy. We can cast a ray toward enemy center and check if enemy is closest before wall. Use same wall raycast, return hit distance. If enemy distance < wallHitDistance and center in view and not behind. Also need screen x within sprite width maybe. Simpler:
```
function raycastWall(px,py,angle) { ... return {hit, dist, mapX,mapY,side}; }
function shotHits(enemy) {
  const dx=enemy.x-player.x, dy=enemy.y-player.y; dist = sqrt; if dist > 12 return false;
  const angle = atan2(dy,dx)-player.angle; normalize; if abs(angle)>FOV/2 return false;
  const hit = castRay(enemy.x, enemy.y); // from player to enemy center, maybe if dist< hit.dist
  return dist < hit.dist - .1;
}
```
Need castRay from player angle to enemy center; if wall before enemy, no hit.
- Shooting animation: muzzle flash, recoil, shots, enemy hp.
- Enemies:
  - array with hp 3. Spawn at map positions (2,1), (5,6), (9,3), maybe open cells.
  - Move: if distance < 8 and line of sight, step toward player each 0.35s if target tile empty. Use simple grid movement: compute desired angle, if line of sight, move one tile toward player if empty; maybe if adjacent damage? Could not.
  - If no LOS, maybe wander: move forward or turn. Simpler: enemies move slowly toward player if in front (angle diff < 25 deg) and distance < 8; if hit, take damage and move slower.
  - Need not use external assets.
- Procedural textures:
  - function makeWallTexture(base, accent, line): create 64x64 canvas, fill base, draw brick pattern. Use deterministic pseudo random with sin. Need maybe use no random? Procedural random okay.
  - Texture per wall type.
  - Maybe enemy texture procedural? Could draw with shapes.
  - Crosshair maybe drawn in HTML overlay or canvas. Could draw crosshair at center.

Need include UI:
- Top HUD: health, ammo/infinite? Enemies, shots.
- Instruction overlay: WASD move, arrows/mouse turn, click shoot, E? maybe no.
- Mouse lock instructions.
- Pause? maybe P to pause, R restart.
- Need canvas CSS.

Need ensure file is self-contained. Use inline style and script.

Need maybe use `PointerEvent`? Need no external.
Potential issues:
- Canvas text font: system font okay.
- Pointer lock: requestPointerLock must be called from user gesture. We'll call on canvas click. Also need handle error.
- On mobile? Not necessary.
- Browser may not allow pointer lock in sandbox? It will if user gesture. Good.
- `canvas.requestPointerLock` availability.

Need create index.html. Let's craft carefully.

Need maybe test by running node? HTML no. Could use simple syntax check? Maybe use `node --check` on script? Need extract? Could use `python`? We'll write then maybe run `node --check`? But script has DOM references but syntax check okay. Need maybe not execute in browser. Could use `python`? We'll use `bash` maybe `node --check index.html` fails due HTML. Better maybe use `python` to parse? Not needed. But we can use `bash` to check file exists.

Need produce final concise with path. But before final, write file. Need maybe maybe inspect current dir? Not necessary but could `ls`. But user asks build. We'll write.

Need plan code. Let's design code in detail.

HTML structure:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Procedural Raycaster</title>
<style>
html,body { margin:0; height:100%; background:#050505; overflow:hidden; font-family:...; color:#f8f8f8; }
#game { display:block; width:100vw; height:100vh; image-rendering: pixelated; background:#000; cursor: crosshair; }
#hud { position:fixed; top:0; left:0; right:0; ... pointer-events:none; }
...
#crosshair { position: fixed; left:50%; top:50%; width:24px; height:24px; ... } maybe drawn in canvas? Use CSS. But if pointer locked, cursor hidden. Good.
#overlay { position:fixed; inset:0; display:grid; place-items:center; background:rgba(...); transition; pointer-events:auto; }
.hidden { opacity:0; pointer-events:none; }
...
</style>
</head>
<body>
<canvas id="game" tabindex="0"></canvas>
<div id="hud">...</div>
<div id="crosshair"></div>
<div id="overlay">...</div>
<script>
(() => {
'use strict';
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d', { alpha: false });
...
})();
</script>
</body>
</html>
```
Need maybe canvas size set to device pixel ratio? For performance, use CSS full viewport and internal fixed 960x540 scaled by CSS? If canvas width=960 height=540, CSS width 100vw height 100vh, browser scales. Good. But pointer coordinates maybe not needed.
Set canvas width=960 height=540. On high DPI maybe pixelated. Use `ctx.imageSmoothingEnabled = false`.

Map:
```
const MAP = [
"11111111111111111111",
"10000010000000100001",
...
"11111111111111111111"
];
```
Need ensure enemies positions open. Maybe 20x20.
Let's design map with corridors:
```
const MAP = [
"11111111111111111111",
"10000010000000100001",
"10111010111110101111",
"10100000001000001001",
"10101111101011111001",
"10001000100000001001",
"11101000111111101001",
"10000000001000001001",
"10111111101011111001",
"10000000100000001001",
"10111100101111101001",
"10001000101000000001",
"10101010101011111111",
"10101010000000100001",
"10100011111110101111",
"10000000001000000001",
"11111111101011111111",
"10000000000000100001",
"10111111111110101111",
"11111111111111111111"
];
```
Need check enemy positions:
(2,1) is row1 col2 = 0. (5,6) row6 col5? row6 "11101000111111101001": col5? indexes 0 1 2 3 4 5: 1 1 1 0 1 0 => open at col5? yes. (11,9) row9 col11? "10000000100000001001": col11 = 0. (16,12)? row12 col16? "10101010101011111111": col16 = 1, bad. Use (14,13) row13 col14? "10101010000000100001": col14 = 0. (3,18) row18 col3 = 0.
Need maybe walls around.

Player start: (1.5,1.5)? Need open. Row1 col1 = 0. Good.
Maybe enemy positions:
```
{ x:5.5, y:1.5, hp:3, maxHp:3}
{ x:5.5, y:6.5, hp:4}
{ x:10.5, y:9.5, hp:4}
{ x:14.5, y:13.5, hp:5}
{ x:3.5, y:18.5, hp:3}
```
Need avoid adjacent.

Movement:
```
const keys = {};
window.addEventListener('keydown', e => { keys[e.key.toLowerCase()] = true; if (e.key==='Escape') canvas.exitPointerLock?; ...; if ['ArrowUp'...].includes(e.key)) e.preventDefault();});
```
Need if e.key for ArrowLeft not lower? Use `const key = e.key.toLowerCase();`.
`keys['arrowleft']`? Actually lower ArrowLeft -> "arrowleft". But maybe easier keys[e.key]=true.
Movement update:
```
let move = 0, strafe=0;
if keys['w'] || keys['arrowup'] move += 1;
if keys['s'] || keys['arrowdown'] move -= 1;
if keys['d'] strafe += 1;
if keys['a'] strafe -= 1;
const speed = (keys['shift'] ? 2.2 : 1.35) * dt;
const cos = Math.cos(player.angle), sin = Math.sin(player.angle);
let nx=player.x + (cos*move + Math.cos(angle+PI/2)*strafe)*speed;
...
if (!hitWall(nx, player.y)) player.x=nx; ...
```
Need arrow left/right turning:
```
if keys['arrowleft'] player.angle -= turnSpeed*dt;
if keys['arrowright'] player.angle += turnSpeed*dt;
```
Mouse:
```
let lastX=0;
canvas.addEventListener('mousemove', e => { if (document.pointerLockElement === canvas) player.angle += e.movementX * MOUSE_SENSITIVITY;});
```
Click:
```
canvas.addEventListener('pointerdown', e => {
 if (document.pointerLockElement !== canvas) {
   canvas.requestPointerLock?.();
 }
 fire();
});
```
But if pointer lock request not granted, `mousemove` no. Maybe first click fires. Good. If pointer lock not available, can still shoot. Maybe overlay hides after first click? We can hide overlay always on pointerdown.

Need maybe prevent context menu.

Raycast functions:
```
function castRay(angle, fromX=player.x, fromY=player.y) {
 const dirX = Math.cos(angle), dirY = Math.sin(angle);
 const mapX = Math.floor(fromX), mapY = Math.floor(fromY);
 let deltaDistX = Math.abs(1 / dirX), deltaDistY = Math.abs(1 / dirY);
 let stepX, sideDistX;
 if (dirX < 0) { stepX = -1; sideDistX = (fromX - mapX) * deltaDistX; }
 else { stepX = 1; sideDistX = (mapX + 1.0 - fromX) * deltaDistX; }
 ...
 let hit=false, side=0, mapHitX=mapX, mapHitY=mapY;
 while (!hit) { if (sideDistX < sideDistY) ...; if (mapHitX<0... hit=true; else sideDistX += deltaDistX; ...}
 let perpWallDist;
 if (side===0) perpWallDist = (fromX - mapHitX + (1 - stepX)/2) / dirX;
 else perpWallDist = (fromY - mapHitY + (1 - stepY)/2) / dirY;
 return { hit, dist: Math.max(perpWallDist, 1e-6), mapX: mapHitX, mapY: mapHitY, side };
}
```
Need if dirX negative, perp positive. Standard.

Wall collision:
```
function isWallAt(x,y) { return MAP[Math.floor(y)][Math.floor(x)] === 1; }
```

Rendering:
```
function render() {
 ctx.imageSmoothingEnabled = false;
 drawBackground();
 drawWalls();
 drawSprites();
 drawMuzzleFlash();
 drawReticle();
}
```
Need maybe draw floor grid after walls? Floor grid should be behind walls; draw before walls. Ceiling before.
`drawBackground`:
```
const horizon = canvas.height * 0.5;
const grad = ctx.createLinearGradient(0,0,0,h);
grad.addColorStop(0, '#090909'); grad.addColorStop(.45,'#111'); grad.addColorStop(.5,'#050505')...
ctx.fillRect(0,0,w,h);
drawCeilingGrid(); drawFloorGrid();
```
Need draw grid lines. Use projection.
Function `projectLine(ax, ay, bx, by, color, alpha)`:
Given world line segment endpoints. Compute screen coords:
```
function project(wx,wy) {
 const relX = wx - player.x, relY = wy - player.y;
 const cameraX = invDirX*relX + invDirY*relY;
 const cameraY = -dirX*relX + -dirY*relY;
 if (cameraY <= 0.05) return null;
 return { x: (0.5 + cameraX/cameraY)*w, y: h*0.5 - (h*0.5*cameraY?)? }
```
Perspective projection formula: screenY = h/2 - (h/2)*(1/cameraY)? Wait if raycast uses transformY = -dirX*relX + -dirY*relY. For a world point, cameraY distance along view. The y coordinate in screen from horizon: horizon + h/2 / cameraY? In raycaster, for wall at distance d, lineHeight = h/d, y = h/2 - lineHeight/2. For a point at cameraY, y = h/2 - h/(2*cameraY). Yes.
```
y = h/2 - (h/2) / cameraY;
```
As cameraY -> infinity, y -> h/2. As cameraY -> 0.5, y -> -h/2. Good.
x = w/2 + (w/2)*(cameraX/cameraY).
```
drawLine screen.
```
For grid: For x from -10 to 10 draw vertical world lines from y=-10 to 10 maybe; for y similarly. Use alpha .1. But in a maze, floor grid should show through empty spaces. Draw before walls. Need maybe if lines pass behind walls, walls drawn later cover them. Good.
```
for (let i=-max; i<=max; i++) { project(i,-max) to project(i,max); ...}
```
But line endpoints far. Good.

Maybe draw floor color with checker? Could draw `drawFloorGrid` with horizon.

Walls:
```
for (let x=0; x<canvas.width; x++) {
 const cameraX = 2*x/canvas.width - 1;
 const rayDirX = dirX + planeX*cameraX;
 ...
 const dist = castRay(angle).dist;
 const lineHeight = canvas.height / dist;
 const drawStart = Math.floor(-lineHeight/2 + canvas.height/2);
 const drawEnd = ...
 const shade = Math.pow(Math.max(1 - dist/18, 0.1), 1.3);
 const texture = wallTextures[map[mapY][mapX]];
 drawWallColumn(x, drawStart, drawEnd+1, dist, texture, shade);
 // fog gradient overlay? 
}
```
Need set `ctx.imageSmoothingEnabled=false` before wall draw. `drawWallColumn`:
```
function drawWallColumn(x, y, h, dist, texture, shade) {
 const sy = ((h * 0.5 - y) / h) * TEX_SIZE;
 ctx.drawImage(texture, 0, sy, TEX_SIZE, 1, x, y, 1, h);
 if (shade < 1) { ctx.globalAlpha = (1 - shade) * 0.7; ctx.fillStyle = '#000'; ctx.fillRect(x,y,1,h); }
}
```
But sy should be negative? If y top maybe y negative; sy = (h*0.5 - y)/h * TEX_SIZE, if y negative sy > h/2, if y bottom sy negative. Negative source works? It can draw from negative source? Canvas drawImage source negative allowed? Spec: sx can be negative? I think yes, but source rect may be partially outside. It might throw? Negative values allowed. Good.
Need maybe draw entire texture one row to column. To make vertical texture not too pixelated, maybe use `ctx.imageSmoothingEnabled = false`. Good.
Maybe add texture horizontal seams? no.

Procedural texture:
```
function makeWallTexture(base, trim, mortar) {
 const c = document.createElement('canvas'); c.width=c.height=TEX_SIZE; const t = c.getContext('2d');
 t.fillStyle = base; t.fillRect(0,0,TEX_SIZE,TEX_SIZE);
 for (let y=0; y<TEX_SIZE; y+=16) {
   const offset = (y/16)%2 ? 8 : 0;
   for (let x=-offset; x<TEX_SIZE; x+=16) {
     t.fillStyle = base; t.fillRect(x,y,16,16);
     t.fillStyle = 'rgba(255,255,255,.08)'; t.fillRect(x+1,y+1,14,14);
     t.strokeStyle = mortar; t.lineWidth=1; t.strokeRect(x+.5,y+.5,15,15);
   }
 }
 // noise dots
 for i 0..2500: const v = ...; t.fillStyle = `rgba(${v},${v},${v},.08)`; t.fillRect(i%TEX_SIZE, Math.floor(i/TEX_SIZE)%TEX_SIZE,1,1);
 return c;
}
```
Need deterministic. Use `hash` maybe.
Wall texture colors:
```
const wallTextures = [
 makeWallTexture('#3a2d22','#6b442e','#17100a'), // brick
 makeWallTexture('#2f3b46','#4f6573','#172029'), // stone
 makeWallTexture('#4a3522','#6e4a2d','#160f08'), // metal?
 makeWallTexture('#26371e','#3f5c2e','#10180b')
];
```
Need procedural not external. Good.

Sprites:
`drawSprites()`:
```
const sprites = enemies.filter(e => e.hp > 0).map(e => ({...dist: hypot(...)})).sort((a,b)=>b.dist-a.dist);
for (const s of sprites) drawEnemySprite(s);
```
`drawEnemySprite(s)`:
```
const spriteScale = canvas.height / s.dist;
const spriteHeight = Math.max(1, spriteScale * 96);
const spriteWidth = Math.max(1, spriteScale * 48);
const screenX = canvas.width/2 + (s.transformX / s.transformY) * (canvas.width/2);
...
const shade = clamp(1 - s.dist/10, .25, 1);
ctx.save();
ctx.globalAlpha = shade;
ctx.translate(screenX, canvas.height/2);
ctx.scale(spriteHeight/96, spriteHeight/96);
ctx.imageSmoothingEnabled=false;
ctx.fillStyle = 'rgba(0,0,0,.35)'; ctx.fillRect(-24,48,48,8); // shadow
ctx.fillStyle = '#7b1e1e'; ctx.fillRect(-18,8,36,44);
ctx.fillStyle = '#9d2b2b'; ctx.fillRect(-16,12,32,30);
ctx.fillStyle = '#f0c37a'; ctx.fillRect(-12,0,24,16);
ctx.fillStyle = '#2a1010'; ctx.fillRect(-8,4,16,4); ...
ctx.strokeStyle = '#250'; ctx.strokeRect(-24,68,48,18);
ctx.restore();
draw health bar above if hp<max
```
Need maybe draw enemy facing player:
```
const faceDir = Math.atan2(player.y-e.y, player.x-e.x);
ctx.translate(e.x,e.y); ctx.rotate(faceDir);
```
But sprite can be simple.

Health bar:
```
const barW = Math.min(60, spriteWidth*0.8);
ctx.fillStyle='rgba(0,0,0,.7)'; ctx.fillRect(screenX-barW/2, drawStartY-10, barW,4);
ctx.fillStyle=e.hp/e.maxHp>0.5 ? '#22d15a' : '#ff4d3d'; ctx.fillRect(...);
```
Need maybe draw before/after sprite? Draw after restore.

Shooting:
- `fire()`:
```
const now = performance.now();
if (now - lastShot < 220) return;
lastShot = now;
muzzleFlash = 0.12;
recoil = 1;
const aimAngle = player.angle + Math.sin((Math.random()-.5)*0.08);
const wall = castRay(aimAngle);
let hitEnemy = null;
for enemy of enemies alive:
  if (enemyDistance(enemy) > wall.dist + .2) continue;
  const dx=..., dy=...
  const angleDiff = normalizeAngle(Math.atan2(dy,dx)-player.angle);
  if (Math.abs(angleDiff) > FOV/2 * 0.95) continue;
  const hit = castRay(aimAngle);
  if (hit.dist < dist - 0.15) { hitEnemy=enemy; break; }
if hitEnemy: damageEnemy(hitEnemy, 1 + (Math.random()<.2?1:0));
else maybe hit wall.
updateHUD();
```
Need raycast angle maybe center plus random. If using center, wall may block. Fine.
Damage:
```
function damageEnemy(enemy, amount) {
 enemy.hp -= amount;
 enemy.hitFlash = .18;
 if (enemy.hp <=0) { enemy.dead = true; score += 100; spawn sparks? }
}
```
Need maybe enemy removal? Keep dead? Could remove after death. But draw only hp>0.
Sparks:
- Procedural visual: muzzle flash and hit sparks maybe. Add particles? Not necessary but nice.
Implement particles array with x,y,vx,vy,life,color. Draw as small lines. Procedural.

Enemy movement:
```
let lastEnemyUpdate=0;
function updateEnemies(dt) {
 for e of enemies:
   e.hitFlash = Math.max(0,e.hitFlash-dt);
   const dx = player.x - e.x, dy = player.y - e.y;
   const dist = Math.hypot(dx,dy);
   const angle = Math.atan2(dy,dx);
   const diff = normalizeAngle(angle - player.angle);
   const canSee = castRay(angle).dist > dist - .3; // if no wall before
   const moving = Math.abs(diff) < 0.55 && dist < 8 && canSee;
   e.moveTimer -= dt;
   if (moving && e.moveTimer <=0) {
      e.moveTimer = .35;
      const nx = e.x + Math.cos(angle) * e.speed * dt;
      const ny = e.y + Math.sin(angle) * e.speed * dt;
      if (!isWallAt(nx, e.y) && !isWallAt(e.x, ny)) { e.x=nx; e.y=ny; }
      else { // try x or y separately
         if (!isWallAt(nx,e.y)) e.x=nx; else if (!isWallAt(e.x,ny)) e.y=ny; else { e.angle = player.angle + Math.PI + random?; }
      }
   }
```
Need maybe enemy speed units/sec .5. If dist < 2.2, damage player? Could implement:
```
if (dist < 2.2) player.hp = Math.max(0, player.hp - 10*dt);
```
Need if HP 0 game over overlay. But user didn't ask. Could include. Need not overcomplicate. But "shooter" maybe.
Need enemies chase only if in front; otherwise maybe wander to player? It's okay.

Maybe line of sight for enemy:
`castRay(angle, e.x,e.y).dist > dist - .5`.

Need collision with enemies? Player can pass through enemies. Fine.

Need update:
```
function animate(t) {
 const dt = Math.min((t-lastTime)/1000, .05); lastTime=t;
 update(dt);
 render();
 requestAnimationFrame(animate);
}
```
Need if paused? maybe P toggles.
```
if (keys['p']) paused = !paused;
if (paused) return;
```
But update still maybe.

HUD:
```
function updateHUD() {
 document.getElementById('hp').textContent = Math.ceil(player.hp);
 ...
 const alive = enemies.filter(e=>e.hp>0).length;
 document.getElementById('enemies').textContent = alive;
 document.getElementById('score').textContent = score;
}
```
Maybe call each frame for hp/death.
Need overlay:
```
const overlay = document.getElementById('overlay');
function startGame() { overlay.classList.add('hidden'); canvas.focus(); if (canvas.requestPointerLock) canvas.requestPointerLock(); }
canvas.addEventListener('pointerdown', () => { if (overlay not hidden) startGame(); else fire(); });
```
But if requestPointerLock called inside pointerdown, `canvas` might not focus. Good.
Need overlay click maybe pointerdown.
```
overlay.addEventListener('pointerdown', () => { overlay.classList.add('hidden'); fire(); requestLock(); });
```
But if overlay pointerdown, event target overlay not canvas. We can call fire. Need maybe request pointer lock on overlay.
Need if pointer lock fails due not user gesture? It is user gesture.
Need maybe after pointer lock, hide crosshair? CSS cursor hidden? Actually body cursor crosshair, but pointer lock hides. Good.
Need maybe prevent arrow scroll. `body { overflow:hidden; }`.

Need maybe draw crosshair in canvas or CSS. If pointer locked, CSS crosshair may be hidden? It's a div; pointer lock hides cursor, not div. It remains. Fine.
Need maybe if paused, overlay visible? Maybe not.

Potential issue: `ctx.drawImage(texture, 0, sy, TEX_SIZE, 1, x, y, 1, h);` if sy outside [0,TEX_SIZE] can crop. Good. But if sy is negative, source rect partly outside; okay. If sy + 1 > TEX_SIZE, okay. If sy is fractional, drawImage accepts. Good.
Potential issue: negative source drawing in Canvas? According to MDN, sx and sy can be negative? Yes, can specify negative. If source rect outside, pixels outside transparent. But with full width maybe source x=0, sy negative, height 1. It will draw bottom part? Hmm if sy negative, source row partly outside top, browser may crop, causing repeated top. Good enough. But to avoid negative, use texture wrapping? Could draw `sy = ((h*0.5 - y) % TEX_SIZE + TEX_SIZE) % TEX_SIZE` for vertical repeat. But for wall perspective, if sy negative at bottom, it wraps to top, maybe okay. Negative source with source height 1 maybe if sy -10, source rectangle from -10 to -9, fully outside, so no draw. That would make bottom invisible. So better use modulo wrap. But for perspective, bottom should show lower texture. Use:
```
const sy = (((h*0.5 - y) / h) * TEX_SIZE) % TEX_SIZE;
ctx.drawImage(texture, 0, sy, TEX_SIZE, 1, x, y, 1, h);
```
If sy is negative, modulo gives positive. This repeats texture. Good. But if sy+1 > TEX_SIZE, drawImage may crop. Better wrap:
```
const sy = ((...)*TEX_SIZE) % TEX_SIZE;
const sy2 = (sy + 1) % TEX_SIZE;
ctx.drawImage(texture, 0, sy, TEX_SIZE, 1, x, y, 1, h);
```
If sy near 63, source extends beyond texture; drawImage will crop to bottom, not wrap. Could use modulo source width:
```
if (sy < 0) sy += TEX_SIZE;
if (sy >= TEX_SIZE) sy -= TEX_SIZE;
const sourceX = Math.floor(sy);
const sourceY = Math.floor(sy);
...
```
But drawImage source height 1 at sy fractional. If sy 62.8, source row 62, height 1 within. If sy 63.2, source row 63, height 1 within. Use `Math.floor(sy) % TEX_SIZE`.
```
const sy = Math.floor((((h*0.5-y)/h)*TEX_SIZE) % TEX_SIZE + TEX_SIZE) % TEX_SIZE;
ctx.drawImage(texture,0,sy,TEX_SIZE,1,x,y,1,h);
```
Good.
Need maybe if drawStartY negative and drawEndY > h, clamp:
```
y = Math.max(0, y); h = Math.min(canvas.height, y+h)-y; if h <=0 return;
```
Need if ray misses? Map closed so hit. If dist Infinity? no.

Need maybe draw side color? no.

Need maybe implement "textured grid maze": maybe walls are grid cells. Could draw wall side with procedural texture. Good.

Need maybe avoid external network: no fonts, no images.

Need maybe final says "Saved to /tmp/ws/index.html".

Need maybe include code. But final can be concise. Since user asked build, not code explanation. We should mention created file. But maybe include no code? Usually coding assistant should produce file. The final should say path.

Need ensure no separate files. We'll write index.html.

Let's craft code carefully. Need maybe maybe use `script` with no module. Ensure no syntax errors.

Let's write file.

Need maybe inspect file? We can maybe run quick checks. Need maybe use bash `ls -l /tmp/ws/index.html` and maybe maybe `node --check` not possible. Could maybe use `python -m html.parser`? Not necessary. But perhaps there are bugs:
- `const invDirX = 1; const invDirY = -1;` These are constants, okay for camera matrix. In projectWorld, `cameraX = invDirX * relX + invDirY * relY; cameraY = -player.dirX * relX + -player.dirY * relY;`. For raycaster transform, invDirY should -dirY? Wait camera transform matrix:
```
cameraX = invDirX*relX + invDirY*relY
cameraY = planeX*relX + planeY*relY
```
But for sprites, if using cameraY = -dirX*relX - dirY*relY (dot with view dir), this is correct. `invDirY` not used. Fine.
- `drawWallColumn` source y modulo:
```
const texY = Math.floor((((height * 0.5 - y) / height) * TEX_SIZE) % TEX_SIZE + TEX_SIZE) % TEX_SIZE;
```
Operator precedence: `%` before `+`? In JS, `%` and `*` have higher precedence than `+`, but parentheses: `((((height...)*TEX_SIZE) % TEX_SIZE + TEX_SIZE) % TEX_SIZE)`. Actually `%` left associative and higher than +, so `a % TEX_SIZE + TEX_SIZE` okay. Good.
- `drawBackground` horizon H*0.5; floor grid lines project to y = H/2 - H/(2*cameraY). For cameraY = 1, y=H/2 - H/2=0, for cameraY=2, y=H/2-H/4=135. Good.
- In `drawWallColumn`, source y for wall columns: for y top negative, sy positive maybe >TEX_SIZE modulo. For y bottom positive, sy negative modulo. Good.
- `drawEnemySprite`: `ctx.translate(enemy.x, enemy.y)` after `ctx.scale`. Since transform order: translate(screenX...), scale, translate(enemy.x, enemy.y). The enemy.x/y are in sprite local coordinates, not world coordinates; this is wrong. It rotates around local enemy center, but x,y are 5, not -? It means local origin moved to (5,5) not center. Need fix maybe. We want rotate facing and draw body at origin. Should not translate by enemy.x/y; maybe translate to (0,0). But need bob? We already translated screen center. So change:
```
ctx.scale(...);
ctx.rotate(facing);
```
No `ctx.translate(enemy.x, enemy.y);`. Since body coordinates around origin. The body drawn from -25..25, y 0..66. Good.
But if no translate, y local 0..66, origin at center? We draw shadow at y=58, body y=10..46, head y=0..18, so center is maybe y=33. The sprite origin at center of sprite? But screen center is at H/2 + bob; body bottom y=66, top y=0. It will appear centered at H/2? bottom extends H/2+50, top H/2-50 (with bob). Good. No enemy world translate.
Need maybe draw shadow at y=58. Good.

- `drawEnemySprite` screenX maybe if spriteScreenX off, drawStartX check. Good.
- `drawSprites` sorted by `dist`, but `drawEnemySprite` recomputes dist. Fine.
- `shoot` line of sight: It loops enemies sorted in map order, not sorted by distance. If a wall behind an enemy? It checks wall distance and enemy angle. If enemy behind wall but closer in map? It can hit if enemyRay.dist < dist - .12, so if wall between player and enemy, enemyRay.dist is wall distance, dist is enemy distance, so false. If wall behind enemy, true. Good.
- `castRay` with angle exactly `Math.PI/2` etc: deltaDistX = abs(1/0) = Infinity. stepX maybe if dirX <0 else stepX=1. sideDistX = (mapX+1-startX)*Infinity = Infinity. okay. If dirX=0, sideDistX Infinity. Good. If dirY=0 similar.
- `projectWorld` for grid lines may draw lines through walls but walls cover. Fine.
- `updateEnemies`: `targetAngle = Math.atan2(dy, dx)` where dy=player.y-enemy.y. Movement vector cos(targetAngle), sin(targetAngle). Good.
- `isWallAt(nx, enemy.y)` if moving along y, not check intermediate; okay.
- `requestLock`: If canvas.requestPointerLock not available, overlayLocked true and msg hidden? Actually if no requestPointerLock, overlayLocked true and msg hidden because set before try. But browser likely has. Could adjust if not available. Not important.
- `msg.addEventListener('pointerdown')`: If msg hidden pointer-events none. Good.
- `resetGame`: msg hidden. Good.
- `pointerdown` on canvas while paused overlay? If paused, click request lock and shoot maybe not. It will shoot even paused? `shoot` no paused check. Could be okay. But if game over overlay visible, click requestLock and shoot. Maybe should not shoot when paused. But not necessary. Could add in `shoot` if paused return? But if paused overlay click maybe should not shoot. However user may click to resume? Not implemented. Better maybe if paused, click resumes? Could add. But not required.
- `modeEl.textContent = document.pointerLockElement === canvas ? 'LOCKED' : 'R3';` In reset, mode maybe R3. Fine.
- `keys[e.key] = true` for key 'ArrowLeft'. Good.
- `document.addEventListener('pointerlockchange')` no issue.
- `ctx.globalAlpha` in drawWallColumn reset? yes.
- `ctx.globalAlpha` in drawParticles restore. Good.
- `ctx.globalAlpha` in enemy health restore. Good.
- `ctx.globalAlpha` in muzzle restore. Good.
- `ctx.globalAlpha` in drawBackground? no.
- `ctx.imageSmoothingEnabled=false` only initial; drawImage wall column may still have smoothing? It was set false. But after drawing background gradients maybe smoothing? It remains false. Good.
- `canvas.getContext('2d',{alpha:false})` maybe okay.
- `drawWallColumn`: `const texY = Math.floor((((height * 0.5 - y) / height) * TEX_SIZE) % TEX_SIZE + TEX_SIZE) % TEX_SIZE;` If height*0.5-y over height = maybe 10, modulo 10; maps texture repeats. Good.
- Potential issue: `Math.floor((((... ) % TEX_SIZE + TEX_SIZE) % TEX_SIZE)` if first expression negative, adding TEX_SIZE once enough? Since modulo result in (-TEX_SIZE, TEX_SIZE), adding once positive. Good.
- Potential issue: `drawWallColumn` source height 1 stretched to column height. Vertical texture is only 1 row per column, giving horizontal bands maybe. But since drawImage source row at sy, destination height h. It stretches one row vertically. That is okay; because per column sy changes based on perspective, texture appears vertically scaled but each column has one row stretched. It may look like vertical stripes with horizontal texture details? Actually the procedural wall texture has brick horizontal lines at y positions. But because each column draws only one row from texture, the brick pattern's horizontal features are not preserved vertically; they are stretched. That's standard with column draw using 1-row source. It may look like vertical bands of solid-ish colors with horizontal noise? Wait source row includes horizontal pattern at one y, but when stretched, all vertical pixels are that row's color, so vertical bands may not show the full texture. A better approach is to precompute columns or use source height 8 and dest h, with sy maybe negative; but one row stretched is okay but not rich. Actually standard raycaster draws each column by scaling texture vertically from a row. Since texture row includes many horizontal variations due to procedural noise, the stretched row still contains horizontal variation across x, but vertical variation is lost. The brick horizontal mortar lines are not visible except as repeated color maybe. But acceptable.
Could improve by drawing from a source strip of height e.g. 8 and dest height h. If sy negative, drawImage negative source maybe allowed and source strip partly outside. But negative sy maybe okay. Let's use source height 8 maybe:
```
const texY = Math.floor((((height*0.5-y)/height)*TEX_SIZE - TEX_SIZE/2) % TEX_SIZE + TEX_SIZE) % TEX_SIZE;
ctx.drawImage(texture,0,texY,TEX_SIZE,8,x,y,1,height);
```
This uses 8 rows, source strip height 8. If sy negative, modulo. But if sy+8 > TEX_SIZE, drawImage may crop. Need maybe handle wrap or use negative source? Negative sy allowed maybe. But to avoid edge, use `ctx.drawImage(texture, 0, texY, TEX_SIZE, TEX_SIZE, x, y, 1, height);` with sy = ((...)*TEX_SIZE - TEX_SIZE/2). Negative source may be okay. Could use modulo for positive and if sy+8 > TEX_SIZE, drawImage with source height 8 and sy maybe >56. It will crop to bottom, not wrap; but still okay. Better maybe create `const sy = Math.floor((((height*0.5-y)/height)*TEX_SIZE) - TEX_SIZE/2);` and use negative. But uncertain. One row is fine.
Maybe wall texture procedural looks more like "textured grid maze" because procedural brick pattern. Good.

Need maybe fix enemy sprite translate. Use edit.

Need maybe run a quick syntax extraction? Could use `python` to check HTML? Maybe use `node --check` by extracting script. Let's do bash to extract script and node --check.

Oops python3 not found, command failed. Need maybe use perl/sed? We can use bash `node --check` on extracted script maybe using `awk`? Need maybe no. Could use `grep -oP`? But bash. Use `perl -0777 -ne 'print $1 if /<script>(.*?)<\\/script>/s'` maybe. Need check if perl installed. Let's use `perl` maybe.

Good. Need maybe maybe no final mention failed python? No. Need maybe final concise. But maybe we should inspect file? Not necessary. But maybe there are hidden issues. Let's think more. The user asked "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." We created. Need ensure "textured grid maze" maybe map walls and floor grid. Good.

Potential issue with `invDirX = 1; invDirY = -1` maybe used in projectWorld; for cameraX formula should use cameraX = invDirX*relX + invDirY*relY? Standard sprite transform uses:
```
const transformX = invDirX * (enemy.x - player.x) + invDirY * (enemy.y - player.y)
const transformY = planeX * (enemy.x - player.x) + planeY * (enemy.y - player.y)
```
Here `invDirY = -1` is not `planeY`; but for the camera coordinate system, `invDirY` should be -dirY? Wait camera basis:
- dirX = cos(angle), dirY = sin(angle)
- planeX = -dirY, planeY = dirX
- invDirX = 1, invDirY = -1? In Wolf3D, invDirY = -1 for orthographic camera? Actually cameraX = invDirX*relX + invDirY*relY with invDirY = -1 gives x = relX - relY, which is not standard. But we don't use cameraX for wall raycasting; we compute rayDir from cameraX separately. For sprite screenX, using cameraX = relX - relY is not correct. It will skew sprites horizontally. Need fix: compute cameraX using actual plane basis: `const cameraX = -player.dirY * relX + player.dirX * relY;` and cameraY = player.dirX * relX + player.dirY * relY. Then screenX = W/2 + W/2 * cameraX/cameraY. This is standard. The constants invDirX/invDirY are unnecessary. Need fix both projectWorld and drawEnemySprite. Use `const cameraX = -player.dirY * relX + player.dirX * relY; const cameraY = player.dirX * relX + player.dirY * relY;`.
Currently `invDirX=1; invDirY=-1` causes sprite screenX wrong. Need edit. Also maybe `projectWorld` grid lines maybe uses wrong cameraX, causing floor grid skew. Need fix.
Let's edit:
- Remove `const invDirX = 1; const invDirY = -1;` or leave unused. Better remove.
- In projectWorld and drawEnemySprite replace cameraX/Y.

Need edit.

Need syntax check again.

Need maybe maybe no need. But let's think further for correctness.

Potential issue in `drawWallColumn`: `ctx.drawImage(texture, 0, texY, TEX_SIZE, 1, x, y, 1, height);` with texture width 64, height 1, dest width 1. This draws a vertical column with one row stretched. Good. But because source row is one row, procedural texture horizontal details not visible. Could use pre-rendered columns for better. But maybe okay. However if want "textured grid maze", a one-row-per-column may produce vertical bands that look like stripes rather than texture. We can improve by drawing multiple source rows and dest height. Let's implement more efficient and visually richer.

Option: Precompute wall texture columns at render time? For each wall texture, create a 1xTEX_SIZE? Actually for each column x, we can draw a vertical slice from texture with source height 8 or 16. We can draw `ctx.drawImage(texture, 0, texY, TEX_SIZE, 16, x, y, 1, height);` This maps 16 texture rows to column height. If texY negative or >56, drawImage may crop. We can avoid negative by using modulo, but then if texY+16 > 64, drawImage crops. Could draw two strips if wrap:
```
function drawWallColumn(x, y, h, texture, shade) {
  const sy0 = Math.floor((((h*0.5-y)/h)*TEX_SIZE - TEX_SIZE/2) % TEX_SIZE + TEX_SIZE) % TEX_SIZE;
  const stripH = 8;
  let sy = sy0;
  let remainingH = h;
  let drawH = Math.min(stripH, TEX_SIZE - sy);
  ctx.drawImage(texture,0,sy,TEX_SIZE,drawH,x,y,1,Math.round(remainingH * drawH / stripH));
  remainingH -= ...
}
```
Complicated. Alternatively use negative source and source height 8:
```
const sy = Math.floor(((h*0.5-y)/h)*TEX_SIZE - TEX_SIZE/2);
ctx.drawImage(texture, 0, sy, TEX_SIZE, 8, x, y, 1, h);
```
Canvas drawImage allows negative source coords? Let's verify? It should. In JS Canvas, source rectangle can be outside canvas; negative values are allowed. I think yes. It will crop. Negative sy means the top of source rect outside; drawImage will draw bottom portion of source strip. That's okay. But if sy+8 > 64, it crops bottom. This can repeat texture by cropping? If sy near 60, source 60..68, only rows 60..63 drawn, missing rows 64..67. It doesn't wrap. But with sy negative modulo? We can use `const sy = Math.floor(((...)*TEX_SIZE - TEX_SIZE/2) % TEX_SIZE);` positive. Then if sy+8>64, crop. Could split. But maybe source height 8 with negative sy is okay and no wrap issue for most; near bottom, sy positive near 0, source 0..8, so texture wraps from top at bottom. That creates repeated texture at bottom, which is fine. Actually if sy = positive remainder, sy+8 >64 near bottom, drawImage draws rows sy..63, not rows 0..; missing wrap. But sy near 63, only rows 63, not wrap. But because source height 8 and dest huge, not huge issue? It may show top rows at bottom? Hmm.

Maybe pre-render each wall texture into a set of vertical columns of height TEX_SIZE? Since each column x maps to a texture row; but we can just draw a full texture scaled to column with source rectangle of height 64, dest height h. This maps entire texture vertically to column. We need source y = ((h*0.5-y)/h)*TEX_SIZE - TEX_SIZE/2. This can be negative. Use negative source y and source height 64. This draws full texture, cropped/wrapped? It maps rows -32..31 to dest y..h, so bottom may show rows 0.. etc. It will not wrap but can show texture bottom/top depending. For y bottom, sy negative, drawImage draws rows 0..63 from negative source, so bottom will show top half? Hmm standard raycaster uses sy = ((h*0.5-y)/h)*texSize; dest y,h and source height 1. For full texture, source y can be negative; drawImage crops. It's okay. We can use source height 64 and dest h; this will show full texture scaled vertically. Let's implement:
```
const sy = (((height*0.5-y)/height)*TEX_SIZE - TEX_SIZE/2);
ctx.drawImage(texture, 0, sy, TEX_SIZE, TEX_SIZE, x, y, 1, height);
```
If sy negative, source top negative, drawImage draws bottom part of texture at top? It should work. But if sy < -TEX_SIZE, source fully outside? At very bottom, sy = -32 maybe not fully outside. At extreme top, sy=32. So source y range [-32,32], always within -64..64. Good. This is standard. It maps texture from -32 to 32 to screen, so wraps not exactly but okay. Let's update drawWallColumn to full strip. This will draw 960 drawImage calls per frame, okay. Use `ctx.imageSmoothingEnabled=false` to keep pixelated. Good.
Need edit.

Need syntax check.

Need maybe maybe run in browser? Not available. Could maybe use `npx`? no network. Not needed.

Let's inspect relevant script maybe.

Need maybe maybe `drawWallColumn` uses `height` parameter shadows height variable? okay.
Potential issue: `drawWallColumn` `height` may be negative? In drawWalls drawEnd - drawStart +1 positive. Good.
Potential issue: `drawWallColumn` `texY` negative source y. Does Canvas drawImage allow negative source y? Need confirm. In browsers, yes, sx/sy can be negative? Let's verify mentally: CanvasRenderingContext2D.drawImage spec: if source rect is outside canvas, pixels outside are transparent; negative allowed. I think yes. If not, it may throw IndexSizeError? I think negative allowed. To be safe, we could avoid negative by using texture repeat via rendering a wider canvas? But no. Let's maybe implement a helper `drawImageTiledX`? But not needed.

Potential issue: `ctx.drawImage(texture, 0, texY, TEX_SIZE, TEX_SIZE, x, y, 1, height);` with `texY` negative and source height 64. If `texY` is -32, source rect extends from -32 to 32. It draws source rows 0..31 at dest top? Actually dest y..y+h, source height 64, dest height h. Browser maps source rows -32..31 to dest rows y..y+h. Rows -32..-1 are transparent, so top of column maybe transparent, then rows 0..31 map to upper part. That means top half of column missing. Wait if source y=-32 and source height=64, dest height huge. The source row 0 maps to dest y + h*32/64 = y + h/2. So rows -32..-1 are transparent at dest y..y+h/2, then rows 0..31 fill y+h/2..y+h. That would make top half transparent? But canvas context alpha false, transparent might show black? This is not what we want. Need not use negative source with full height; negative source crops top and can create transparent top. Better use modulo/wrap to avoid negative. Standard one-row drawImage with sy negative might also crop, but maybe if sy=-32 and source height 1, source row -32 outside, no draw; bad. Need handle wrap.

Let's design robust wall column drawing with repeated texture vertically. For each column, source y = ((height*0.5-y)/height)*TEX_SIZE. This can range -32..32. Need draw one row at sy with wrap. For full texture, source y = sy - TEX_SIZE/2, range -32..32. We can draw by wrapping source rows:
- We want map source rows from sy - 32 to sy + 32 (64 rows) to dest y..y+height.
- Instead of negative, we can draw two source strips if sy - 32 < 0 or sy + 32 > 64.
Let `start = sy - 32`, `end = sy + 32`, `total = end - start = 64`.
If start < 0:
  - draw top part from 0 to end with source height end, dest height height * (end/total).
  - draw bottom part from 0 to start+total (wrap) with source height -start, dest height height * (-start/total).
If end > 64:
  - draw top part from start to 64 with source height 64-start, dest height height * ((64-start)/total).
  - draw bottom part from 0 to end-64 with source height end-64, dest height height * ((end-64)/total).
Else draw one strip.
Need source y may be negative or >64. This is robust.
But drawing two drawImage calls per column maybe okay. Or simpler use modulo and draw one row; but full texture better. Let's implement helper `drawWallColumn` with wrap. Need careful with fractional y. Let's compute:
```
const sy = ((height * 0.5 - y) / height) * TEX_SIZE;
const start = sy - TEX_SIZE / 2;
const end = sy + TEX_SIZE / 2;
const total = TEX_SIZE;
function drawStrip(sx, sh, dh) {
  const y = Math.floor(sx);
  const h = Math.max(1, Math.floor(sh));
  ctx.drawImage(texture, 0, y, TEX_SIZE, h, x, yDraw, 1, dh);
}
```
But if `sh` fractional, use `const sy = Math.floor(sx); const sh = Math.max(1, Math.floor(sx+sh)-sy);`.
Dest height can be fractional; drawImage accepts. Need clamp dest y and h maybe already done.
```
function drawWrap(sx, sh, dh) {
  if (sh <= 0) return;
  const sy = Math.floor(sx);
  const h = Math.min(TEX_SIZE - sy, Math.ceil(sx + sh) - sy);
  const destH = dh * (h / sh);
  ctx.drawImage(texture, 0, sy, TEX_SIZE, h, x, y, 1, destH);
}
```
Then in drawWallColumn:
```
let start = sy - 32, end = sy + 32;
if (start < 0) {
  drawWrap(0, end, height * (end / 64));
  drawWrap(0, -start, height * (-start / 64));
} else if (end > 64) {
  drawWrap(start, 64 - start, height * ((64-start)/64));
  drawWrap(0, end - 64, height * ((end-64)/64));
} else {
  drawWrap(start, 64, height);
}
```
Need `end` maybe >0; if start<0 and end maybe <=0? Since sy range [-32,32], end >=0, okay. If sy=-32, end=0, first strip height 0, second height 64. If sy=32, end=64, else drawWrap(0,64,height). Good.
Need if `start` or `end` fractional, fine.
This is more code. But improves texture. Let's implement.

Need syntax check.

Potential issue in drawWrap: if sh <=0. If start<0 and end=0, sh=0. Good. If end maybe negative? not possible. If end > TEX_SIZE and start maybe >TEX_SIZE? not possible. Good.
Potential issue: `drawWrap` `ty` can equal TEX_SIZE? Suppose sx = 64 exactly, ty=64, th=max(1, min(0, ceil(64+sh)-64)) -> 0, return. Good.
Potential issue: `drawWrap` source height th can be 1 even if sh fractional less than 1. But sh maybe small; if end-start total 64 and height huge, dh*th/sh maybe okay. Good.
Potential issue: `drawWrap` dest height could be 0 if th=0, return. Good.
Potential issue: `drawWallColumn` if height is fractional, drawWrap dest height fractional. Fine.

Potential issue: `drawBackground` floor grid uses projectWorld with correct camera transform now. Good.

Potential issue: `drawEnemySprite` after no enemy translate, `ctx.rotate(facing)` rotates around origin. Body local y 0..66, so the origin is at center y ~33. Good. The shadow at y=58 rotates, but okay.
Potential issue: `drawEnemySprite` health bar y = drawStartY - 12. If drawStartY negative, bar may be above top, but okay.
Potential issue: `drawEnemySprite` `spriteWidth = spriteHeight * 0.52`; if screenX near edge, drawStartX check. Good.
Potential issue: `projectWorld` uses `cameraY = player.dirX*relX + player.dirY*relY`; if cameraY <=0.05 return. Good.
Potential issue: `drawWalls` map indexing `wallTextures[map - 1]`; if map char '1', map - 1 = 0. Good.
Potential issue: `MAP` char indexing. Good.

Potential issue: `resetGame` doesn't reset `lastTime`; okay.
Potential issue: `msg.innerHTML` with user input? no.
Potential issue: `requestLock` if pointer lock unavailable; maybe overlayLocked true and msg hidden. Could fix:
```
if (!canvas.requestPointerLock) { overlayLocked=true; msg.classList.add('hidden'); return; }
```
But no need.
Potential issue: `canvas.addEventListener('pointerdown', e => { requestLock(); shoot(); });` If paused and overlay visible, canvas behind overlay not clicked. If overlay visible, msg event handler calls requestLock and shoot. If paused, shoot still happens. Could add `if (!paused) shoot(); else msg.classList.add('hidden'); paused=false;`. But not necessary. However user may click overlay to resume; currently click shoots and remains paused? Actually `shoot` doesn't check paused, so it shoots. Then paused remains true. If game over, click shoots and still game over overlay. Maybe not ideal. We can improve.
Add in `msg.addEventListener('pointerdown', () => { if (!paused) { requestLock(); shoot(); } else { paused=false; msg.classList.add('hidden'); overlayLocked=false; }})` But if paused, click should resume and hide overlay. If game over, reset? User can press R. Maybe click overlay should hide overlay but not resume? Could be confusing. Maybe if paused, click resume; if game over, maybe click to restart? But not asked. Could leave.
Potential issue: `shoot` while paused after game over could still fire; maybe not. Add `if (paused) return;` in shoot. Then overlay click in paused does not shoot. But if paused and overlay click, it will request lock and shoot? We can handle.

Let's edit:
```
function shoot() {
  if (paused) return;
  ...
}
msg.addEventListener('pointerdown', () => {
  if (paused) {
    paused=false;
    msg.classList.add('hidden');
    overlayLocked=false;
    return;
  }
  requestLock();
  shoot();
});
```
But if game over, click resumes and hides overlay but hp 0; next frame game over overlay reappears. Could maybe reset? Maybe not.
Also canvas pointerdown should if paused maybe just hide overlay? But overlay covers.
Let's edit.

Need syntax check.

Need maybe maybe final. But before final, perhaps we should inspect final file size and maybe no temp files. We created _script_check removed. Good.
Need maybe maybe use `find /tmp/ws -maxdepth 1 -type f` to ensure only index? There may be no other files.