We need to create a single-page web app index.html that implements a first-person raycasting maze shooter similar to Wolfenstein 3D, using canvas. It must be self-contained, with procedural textures (no external assets). Movement WASD, turning with arrow keys or mouse. Enemies that can be shot. Procedural textures only.

We need to write full index.html. Let's think about code.

We can implement a simple raycaster: map grid of integers representing wall types (0 empty, 1 walls). Use procedural textures: generate simple patterns like checkerboard for wall, floor, ceiling using code.

We need enemies: can be sprite rendering: simple colored squares in 2D view, with distance scaling.

Simplify: Map size small, e.g., 10x10. Player position (x, y, dir angle). Controls: WASD for forward/back/strafe left/right, mouse movement to rotate (optional), arrow keys left/right rotate.

Raycasting: cast vertical slices (column per pixel) across screen width. For each column compute ray direction, step through map using DDA to find wall distance, compute wall height, draw vertical slice with texture column. Use simple shading.

For enemies: store positions, each frame compute ray distance to player and angle, if within FOV and visible (no wall in between), draw sprite scaled by distance, with simple shading.

Procedural textures: for walls, we can compute color based on x,y coordinate within texture: e.g., generate a checkerboard pattern with modulo.

We need to do this in a single HTML file with <canvas>, <style>, <script>. Use requestAnimationFrame.

Let's create file. We'll write code manually.

Potential issues: performance: we can use a fixed canvas size, like 640x480.

Key handling: keydown and keyup.

Mouse: bind to canvas mousemove, compute deltaX to rotate.

Simplify by using arrow keys for turning.

Procedural textures: define function getWallTextureColor(texX, texY) returns rgb; e.g., checkerboard: if ((Math.floor(texX*8) + Math.floor(texY*8)) %2) ==0) light color else dark.

Floor/ceiling can be simple gradient.

Enemies: simple small squares with color.

Shooting: left mouse click or space key; cast a ray forward and check if enemy within small radius, mark dead.

We'll implement enemies array with {x, y, alive}.

When player shoots, ray will step along direction until max distance; if intersects enemy radius (circle) that is alive, mark dead.

We'll also render dead enemies as maybe bloody texture or just not draw.

Let's now write the index.html.

We'll embed style: body {margin:0; background:#000; overflow:hidden} canvas {display:block;}

Script: define constants: MAP_WIDTH, MAP_HEIGHT, map array.

Initialize player: posX, posY; dirX, dirY; planeX, planeY (camera plane for FOV). Using standard raycaster.

Controls: keys = {}; keydown sets true, keyup false.

Update: move speed ~5 units per second; rotation speed ~3 rad per sec.

Game loop: update player position based on keys; then render.

Rendering:

const ctx = canvas.getContext('2d');
let w = canvas.width, h = canvas.height;

For x from 0 to w-1:
 compute cameraX = 2 * x / w -1;
 rayDirX = dirX + planeX * cameraX;
 rayDirY = dirY + planeY * cameraX;
 // map position
 mapX = Math.floor(posX);
 mapY = Math.floor(posY);
 // length of ray from current position to next x or y side
 deltaDistX = Math.abs(1 / rayDirX);
 deltaDistY = Math.abs(1 / rayDirY);
 // step and initial sideDist
 if rayDirX<0 { stepX=-1; sideDistX = (posX - mapX) * deltaDistX } else { stepX=1; sideDistX = (mapX+1.0 - posX) * deltaDistX}
 similar for y.
 // DDA:
 var hit = 0, side;
 while(hit==0){
   if sideDistX < sideDistY { sideDistX+=deltaDistX; mapX+=stepX; side=0; } else { sideDistY+=deltaDistY; mapY+=stepY; side=1; }
   if(map[mapX][mapY] > 0) hit=1;
 }
 // calculate distance
 if side==0 { perpWallDist = (mapX - posX + (1 - stepX)/2) / rayDirX; } else { perpWallDist = (mapY - posY + (1 - stepY)/2) / rayDirY; }
 // calculate line height
 lineHeight = Math.floor(h / perpWallDist);
 // calculate draw start/end
 drawStart = -lineHeight/2 + h/2; if drawStart <0 drawStart=0;
 drawEnd = lineHeight/2 + h/2; if drawEnd >=h drawEnd=h-1;
 // texture coordinate
 if side==0 { wallX = posY + perpWallDist * rayDirY; } else { wallX = posX + perpWallDist * rayDirX; }
 wallX -= Math.floor(wallX);
 // x coordinate on texture
 texX = Math.floor(wallX * texWidth);
 if (side==0 && rayDirX>0) texX = texWidth - texX -1;
 if (side==1 && rayDirY<0) texX = texWidth - texX -1;
 // draw vertical line with shading based on side
 for y from drawStart to drawEnd:
   // compute texture y
   texY = Math.floor(((y - drawStart) / (drawEnd - drawStart)) * texHeight);
   // get color from procedural texture
   color = getWallColor(texX, texY);
   // apply shade
   if side==1 color = shade(color, 0.7);
   ctx.fillStyle = color; ctx.fillRect(x, y, 1, 1);
 // floor and ceiling: after wall drawing, we can do simple floor casting (optional). For brevity, we can fill background: ceiling dark gray, floor darker.

Simplify: fill entire canvas top half with ceiling color, bottom half floor color before drawing walls. That is okay.

Enemy rendering: after walls, iterate enemies not dead:
 compute dx = enemy.x - posX, dy = enemy.y - posY;
 distance = Math.sqrt(dx*dx+dy*dy);
 // angle between player dir and enemy
 invDet = 1.0 / (planeX * dirY - dirX * planeY);
 transformX = invDet * (dirY * dx - dirX * dy);
 transformY = invDet * (-planeY * dx + planeX * dy);
 if transformY > 0 { // in front
   spriteScreenX = Math.floor((w/2) * (1 + transformX / transformY));
   // sprite height
   spriteHeight = Math.abs(Math.floor(h / transformY));
   drawStartY = -spriteHeight/2 + h/2;
   drawEndY = spriteHeight/2 + h/2;
   // width
   spriteWidth = spriteHeight;
   drawStartX = -spriteWidth/2 + spriteScreenX;
   drawEndX = spriteWidth/2 + spriteScreenX;
   // render simple rectangle
   ctx.fillStyle = 'red';
   ctx.fillRect(drawStartX, drawStartY, spriteWidth, spriteHeight);
 }

Shooting: on mouse click or space: compute ray direction same as center column.

Perform ray casting step along ray: step size small, until maxDist. For each step, check distance to each enemy; if within enemy radius (maybe 0.3) and alive, set alive false.

Implementation details.

Procedural texture generation: can compute color string.

function getWallColor(texX, texY){
   // tex coordinates 0-63 if texWidth=64.
   let checker = ((Math.floor(texX/8)+Math.floor(texY/8))%2);
   let r = checker ? 200 : 150;
   let g = checker ? 200 : 150;
   let b = checker ? 200 : 150;
   return `rgb(${r},${g},${b})`;
}

Alternatively, we can add some variation using sin.

Also shading.

Now we need to write entire index.html.

We'll make canvas fill window: width=800, height=600.

Add event listener resize to adjust canvas size.

Let's write now.