We need to produce index.html with CSS, JS in one file. Implement a simple first-person raycaster. This is a large task but we can produce a minimal working example with some placeholder textures using canvas patterns or simple colors. Procedural textures: maybe use noise or color patterns. Enemies: simple rectangles in world grid; shooting rays.

We need to make minimal but functional. We can create a 2D map array, player position and direction. Render 3D view using raycasting algorithm onto canvas. For textures, we can use simple color shades or patterns generated by Canvas API (e.g., perlin noise or simple stripe). Enemies could be small walls with different color. Shooting: mouse click triggers a ray to hit enemy cells, remove them.

Simplify: implement a map grid of integers where 1=wall, 2=enemies. Use basic step. For textures, use a simple vertical stripe pattern drawn onto wall slices. For enemy, maybe use a distinct color.

Implement controls: WASD for move forward/back, left/right strafe, arrow keys or mouse for turn. We'll use keyboard events. Mouse movement: track deltaX to change direction.

Rendering: For each vertical stripe of canvas, cast ray using DDA algorithm to find wall hit, compute distance, compute slice height.

We will have canvas full window.

Game loop with requestAnimationFrame.

Time limited.

Let's design.

File content: index.html containing HTML skeleton, style to make canvas full size, script to implement.

We'll need to adjust canvas size on load.

We also need to handle scaling to avoid flicker.

Simplify: use 2D arrays.

Procedural textures: we can use a simple pattern: create offscreen canvases for wall textures, e.g., checkerboard or color gradient.

Also we can create enemy sprite as colored square.

Shots: on click, we cast a ray along player direction? Or just use the ray cast algorithm again for the point of view? We can just detect if a ray from player in direction of mouse click hits enemy within a small distance. Or just cast a ray for each frame? Maybe easier: when click, compute a ray from player position along direction of mouse click to see if intersects enemy cell; if so, remove it.

But for simplicity, we can just detect collision with enemy cells along the same ray.

Alternatively, we can use simple shooting: cast a ray with small width (like bullet path) and if it hits an enemy cell, remove it.

Let's do: On mousedown, set shooting flag, in update compute a ray and check for enemy cell hit, if yes, mark it removed.

Also, we can use simple physics for player movement: speed constant, check collision with walls.

Implementation details:

Define constants: map width, height, tile size (1 unit), FOV 60°, canvas width, height.

Player: x, y, dirX, dirY, planeX, planeY.

For each frame, process input: WASD: move forward/back by speed; strafing.

Turn: left/right arrow or mouse movement changes angle; adjust dirX, dirY, planeX, planeY accordingly.

Rendering: for each vertical stripe x in canvas width:

calculate cameraX = 2*x/w -1;

rayDirX = dirX + planeX * cameraX;

rayDirY = dirY + planeY * cameraX;

mapX = int(px), mapY=int(py);

deltaDistX = abs(1/rayDirX), deltaDistY = abs(1/rayDirY);

stepX, sideDistX; stepY, sideDistY.

Then DDA loop until hit wall (map[mapX][mapY] >0). If map tile is wall or enemy.

Compute perpWallDist.

Compute lineHeight = height / perpWallDist.

Draw slice: fillRect(x, drawStart, 1, lineHeight) with color based on texture.

For textures: we can create a pattern color per wall type. For walls, use gradient. For enemy, maybe use red color.

To show enemies: if a wall tile is enemy and we hit it, we can display it with different color.

For shooting: if mousedown, we cast a ray along player's dir; if hit enemy tile, set it to 0.

Implement input.

Let's start writing code.

We should write index.html.

We'll produce a single file.

Let's create the content now.

We'll write the file content in write function.

We wrote a large file. Need to ensure it's a single page with procedural textures. Currently colors are simple; textures not used. But requirement: textured grid maze, procedural textures only. Also enemies you can shoot. We used tile=2 as enemies, with color red, can shoot to destroy. But not moving enemies, maybe fine. Also use mouse or arrow turning; we included arrow and mouse movement. Should use WASD for movement. Good.

But maybe need to add walls textures? Simple shading might be okay.

Check for potential issues: Use canvas width/height to be window size.

But need to mention using requestAnimationFrame; we included loop.

We need to ensure we included in file; all good.

Maybe add a simple 'enemy' spawn with shooting, maybe bullet effect? We just removed tile on hit.

Could refine texture generation using perlin noise? Not necessary.

The requirement: "procedural textures only, no external assets." We used solid colors. Might be okay.

But maybe to create more texture: we could use simple patterns like checkerboard for walls. Could modify rendering: use a function to generate color based on cell coordinates and side to simulate texture.

Let's add simple checkerboard texture by using parity of mapX+mapY. And for walls we can vary color.

Add texture logic: compute color based on cell and side.

Also maybe implement a simple 'enemy' bullet that moves.

But minimal is okay.

Let's just adjust to include a basic procedural texture for walls: e.g., color varying with mapX and mapY. Also maybe add simple brightness based on distance.

I'll edit the file to add texture generation.

We have a file index.html with a simple raycaster. Need to add enemies shooting? But requirement: first-person raycasting maze shooter with WASD, arrow or mouse turning, textured grid maze with enemies you can shoot. Procedural textures only, no external assets. Our current code includes map, enemies as tile 2, can shoot by mouseDown. But not display enemies? We only draw walls. We haven't drawn enemies in first person view. Also need HUD maybe.

Simplify: just add rendering of enemies as simple vertical bars? But typical Wolf3D includes sprite rendering. We can add simple enemy rendering as vertical lines with color maybe.

But requirement: first-person raycasting maze shooter. Probably enough minimal. However we might want to add enemy sprites in 3D. Let's add simple sprite rendering after walls.

Add sprite array from map positions where tile 2. After DDA, we will have a list of sprites with positions relative to player, sort by distance, then render.

Implement sprite rendering: collect all enemies positions from map into array. Each enemy at (x+0.5, y+0.5). In render loop we can compute for each column? That's complex. Maybe simpler: just draw 2D overlay of enemies as rectangles on top? But requirement is 3D shooter.

Given limited time, maybe okay as is? But we have shooting logic: removes tile 2. But not rendering them as visible.

Let's add simple sprite rendering using classic method.

Implementation steps: After calculating wall slice, we will compute sprite positions and render after loop or before? Usually after walls, for each sprite compute transformed coords, draw vertical stripe. But we need to maintain depth buffer.

Simpler: after all walls, we can compute sorted sprites and draw them with same algorithm.

Add a global array of sprite positions derived from map each frame. In render, after wall rendering, compute for each sprite:

- spriteX = spritePosX - posX
- spriteY = spritePosY - posY
- transform: invDet = 1/(planeX*dirY - dirX*planeY)
- transformX = invDet * (dirY*spriteX - dirX*spriteY)
- transformY = invDet * (-planeY*spriteX + planeX*spriteY)
- spriteScreenX = Math.floor((W/2) * (1 + transformX/transformY))
- spriteHeight = Math.abs(Math.floor(H / transformY))
- spriteWidth same.

Then draw stripe with shading. We need a zBuffer of perpWallDist per column from walls earlier. We can store in array. Modify render to build zBuffer.

Let's modify code accordingly.

We'll edit index.html. We'll insert new code near render().

Let's first find where wall rendering ends, after for loop. We'll add zBuffer array before loop.

Let's edit to add: let zBuffer = new Array(W);

During wall drawing, after drawEnd compute, store zBuffer[x] = perpWallDist;

Then after wall loop, compute sprite rendering.

Let's modify.