Wolfenstein raycaster · glm-5.3-flash

Let me write a single-file raycaster game. I'll implement it directly, then test in browser.

Key parts: map (small maze), raycasting DDA with textures, sprites (enemies) with depth buffer, weapon, shooting raycast check for occlusion, enemy AI (move toward player, attack when clear line + range), HUD health/enemies, win/lose overlays, restart.

Write the file.

The scene shows no walls except a tiny gray box — walls missing. Problem: my render per-pixel fillRect with getImageData is slow, and walls seem missing entirely. Also that small gray box is likely the gun? Actually the gun is drawn at center. The gray rectangle near center-bottom is gun barrel. But no walls rendered at all. Starting position (1.5,1.5) facing angle 0 (east) — corridor along row 1 is open eastwards... map row1: 1,0,0,0,1,... so wall at x=4. Should render a wall at distance ~3. Hmm, dist might be wrong.

Issue: using angle correction via atan for fisheye — that's fine. DDA: mx starts as p.x|0 which works for positive. For side===0 dist=(mx-p.x+(1-sx)/2)/dx — when dx<0 and sx=-1, (1-(-1))/2=1, dist=(mx - p.x + 1)/dx. Correct standard formula is (mx - p.x + (1-sx)/2)/dx. OK.

But wait — cell() with c!==0 hit... row y=1 has walls. Should hit. Why no wall? Possibly getImageData on a canvas created with getContext('2d') then reading — fine.

Ah, maybe the issue: ctx.createLinearGradient reused variable g... fine.

Wait — screenshot shows ceiling gradient but floor looks wrong-ish. Actually ceiling/floor render. Wall loop: for x 0..VIEW_W... maybe an exception thrown stops render after gradients? Console shows only a warning. Hmm, but exception in requestAnimationFrame would show errors. Console shows no errors.

Maybe the wall pixels are drawn but the screenshot is small canvas scaled? Canvas is 640x400 but displayed ~640x400 region. Walls absent.

Let me check angle correction: ra = p.a - atan((x-W/2)/(W/2)*tan(fov/2)). At x=center, ra=p.a=0. dx=1,dy=0. DDA: ddx=1, ddy=Infinity. sx=1,sdx=(2-1)*1=1... wait p.x=1.5, mx=1, sdx=(mx+1-p.x)*ddx=0.5. Loop: sdx<sdy(Inf) → sdx=1.5,mx=2,side 0, cell(2,1)=0. Continue: sdx=2.5, mx=3, cell=0. sdx=3.5,mx=4, cell(4,1)=1 → hit. dist=(4-1.5+(1-1)/2)/1=2.5. h=336/2.5=134, y0=101. wallX = p.y+dist*dy = 1.5. tx=31. Should draw. But screenshot shows nothing at all... unless render threw before walls. Gradients use variable g which is also enemy loop var? No.

Hmm — actually wait, maybe an exception: `tex.getImageData(tx,ty,1,1)` — texes built via makeTex returns g (the context) — good. tx could be 64? tx=(wallX*64)|0, wallX<1 so ≤63. ty: ((y-y0)/h)*64, y<y0+h so <64. Fine.

Maybe the issue is the whole render works but wall colors too dark? sh = min(1, 6/2.5)=1, brick color ~ (140,70,55) — visible. Not it.

Wait — look again: screenshot shows at ~(580,500) a small gray rect — that's around x=580/1200... canvas displayed region 280..920 x 200..590. The gray box at x~580 abs → relative (580-280)/640*640 = ~300 px in canvas, y~500 abs → (500-200)=300 canvas. That's mid-height mid-width gray box — could be a wall sliver at huge distance? Like dist large → tiny height. h=336/dist. Box height ~55px → dist≈6. Hmm.

Actually maybe DDA steps wrong: sdy when dy=0: ddy=Infinity, sdy=(my+1-p.y)*Infinity = Infinity. ok.

Let me just debug via browser console: inspect state.

No console errors. The wall loop probably draws but... wait — the screenshot canvas may be scaled down; screenshot area is 640x400? The gray box could be part of wall rendering... Actually walls missing means my y0/h loop condition maybe wrong? `y0` and h are floats; y0 could be negative? h=134, y0=101, fine.

Wait — maybe an exception occurs inside render each frame but console catches? No console error shown though. Hmm, maybe `keys.Space` — keydown listener calls preventDefault and sets keys; fine.

Let me test the render math quickly in node-like fashion via bash evaluating? Easier: add a debug output via document.title? Can't run JS directly... I can use browser inspect only showing DOM. Let me temporarily write debug into DOM: modify render to compute the center column wall and put text. Actually simpler: think harder.

Look: floor gradient area shows some banding; the gray box at center-ish slightly left and below center: that's around canvas coords (300,300)... The gun should be at VIEW_W/2-30=290..., VIEW_H-70=266 height 70 → from y=266 to 336, x 290-310. Yes! The gray box IS the gun (x~290-310, y~266-336 matches box at ~300,300). So gun renders, HUD renders, but wall loop draws nothing.

So the wall loop fails silently... or throws? If it threw, gun wouldn't draw. So loop runs but draws nothing — meaning hit never set? Or the fillRect colors... wait, dist for center should be 2.5. Unless p.x|0 issue... mx=p.x|0=1.

Hmm — `c=cell(mx,my)` where cell does map[y|0][x|0]; y already int; fine.

Wait!! The loop: `while(!hit&&guard++<64)`. hit set to 1 when c!==0. Then after loop dist... then `const h=(VIEW_H/dist)|0`. Then wallX uses `side===0?p.y+dist*dy:...`. dy=0 → wallX=1.5, tx=31. Loop y from 101 to 235, fillRect each. That should paint brick red-brown. Unless... tex.getImageData returns data but I set fillStyle template — fine.

Unless the render function IS throwing before walls: ceiling/floor gradient fine. The gradient with ctx.createLinearGradient... g reused, fine.

OR: the screenshot is stale? Both screenshots identical "Frame 1, +0ms". Maybe motion/frozen at frame 1 — requestAnimationFrame in sandbox may not run! The first screenshot was also frame 1. So maybe the game loop isn't running at all (sandbox blocks rAF?), and what we see is the FIRST render... but even first render should include walls. Unless at frame 1 something differs. Actually screenshot "Frame 1, +0ms" both times — page reloaded, same first frame. The first render happens after first rAF tick; if rAF ran, frames would advance between screenshots. Maybe the browser tool captures only first frame; can't tell if running.

But why no walls in frame 1? At frame 1, `last=performance.now()` set; loop(t) called with t possibly 0? dt=min((0-last)/1000,...)=0 or negative → dt negative! last is a large performance.now value; t from rAF could be similar. dt negative → update with negative dt fine. render should still draw walls though.

Hmm, wait — first render might occur BEFORE texes are... no, texes created before restart().

Let me reconsider: does the wall loop even execute? `for(let x=0;x<VIEW_W;x++)` with ra = p.a - Math.atan(...). p.a=0. For x=320: atan(0)=0. dx=cos(0)=1... fine.

OH WAIT. I see it: `const g=t.getContext('2d')` in makeTex, and I return `g` — good. But in render, variable `g` was used for gradients... no conflict.

Hmm, actually maybe there IS an exception in render: `ctx.fillStyle=g` second gradient — fine.

Let me check `enemies` sprite draw: list empty of visible? Enemy at (5.5,1.5) directly ahead, ry=4, occluded by wall at dist 2.5 → skipped. Fine.

Exception could be in `ctx.fillStyle=\`rgb(...)\`` fine.

I'm stuck guessing. Add debugging: write a debug div showing caught errors. Let me add try/catch in loop and display error text in DOM. Also check whether rAF runs by incrementing a counter into DOM.

Loop runs (f=8), no error, player at 1.5,1.5. Still no walls. So the wall loop draws nothing. So DDA never hits or dist NaN so fillRect skipped? If dist NaN, h=NaN|0=0, loop y<min(336, NaN)... Math.min(VIEW_H, y0+h|0): NaN|0=0 → y<0 nothing. So dist could be NaN! dist = (mx-p.x+(1-sx)/2)/dx. For center col dx=1: 2.5. Hmm but per-column it varies; even so center should hit.

Unless hit never set because... `c=cell(mx,my)` — cell(x,y) uses map[y|0][x|0] — args are (x,y) positional: I call cell(mx,my) → returns map[my][mx]. my=1, mx=4 → map[1][4]=1. hit.

Hmm wait — did the screenshot maybe not show canvas updates because getImageData on the main canvas... no, tex canvas.

Let me check the gradient draw again... Actually! The gray box is the gun, but the ceiling gradient: createLinearGradient(0,0,0,VIEW_H/2) covers top half — matches screenshot top half dark blue-gray. Floor gradient bottom half — but the screenshot shows only ONE band boundary at mid. OK.

So walls... hmm what if `zbuf[x]=dist` fine.

Test theory: dist NaN because ddx=Infinity when dx=0? Only edge columns. Center should still draw.

Maybe the exception... no error shown (errTxt empty since dbg shows f=...). So render completes. Walls drawn but invisible?? fillStyle computed: d[0]*sh|0 — d is Uint8ClampedArray from getImageData — good.

Wait — maybe texes[1] etc. are actually drawing... could `makeTex` have failed? `document.createElement('canvas')` fine.

Hmm — is `ctx.fillRect(x,y,1,1)` with x up to 640 — canvas width 640 — fine.

OK let me actually reproduce the raycast math in node to verify.

Math is fine — walls should render. So the browser isn't drawing... but no error. Hmm, maybe the screenshot only shows the canvas at frame 1 BEFORE first render? f=8 at reload capture, and the canvas should reflect latest render. Unless... the canvas is being rendered but walls drawn then covered? No—walls drawn after floor.

Wait — maybe `ctx.fillStyle=\`rgb(${...})\`` — d[0]*sh|0 — precedence: `d[0]*sh|0` = (d[0]*sh)|0. Fine.

Could `tex.getImageData` throw SecurityError? Canvas created in-page, no taint. And no error anyway.

Hmm, but wait: did render actually execute the wall loop? Maybe an error IS thrown but caught and errTxt shown... dbg shows f= without ERR, so no.

OK — maybe walls ARE drawn but the screenshot image I'm seeing is stale/lower fidelity? The image clearly shows floor/ceiling gradients and gun — those come from the same render pass. So walls specifically missing.

Hmm! Wait: canvas is 640x400, but CSS display... the screenshot region 280-920 x 200-590 = 640x390 approx. Fine.

What about `y0` float and loop `for(let y=Math.max(0,y0|0);...)`. y0|0=101. Fine.

Let me reconsider: maybe the exception happens in the middle of the wall loop for later columns and... no, error would be caught.

Actually wait — is the reload capturing a screenshot before first full render? f=8 with dbg updated after render. So render #8 done. Should show walls.

Unless... the atan-based ra for x=0: ra=0.524 → dy=0.5, sdy... fine.

Let me think about `hit` var reuse: `let side=0,hit=0,c=0,guard=0;` fine.

Weird. Could it be that the browser tool screenshot renders canvas but pixel fillRects of 1x1 get lost due to devicePixelRatio scaling? The gradients draw fine though.

Alternative approach: rewrite render using an ImageData buffer (putImageData) — faster and more robust, and likely fixes whatever weirdness. Actually 640x336 getImageData per pixel per wall is super slow anyway (~200k getImageData calls/frame). Rewrite render with a full-screen ImageData: compute pixel buffer, texture data cached as arrays. Also sprite drawing into the buffer. That's the proper approach.

Cache textures as Uint8ClampedArray via getImageData once. Build Uint32 views for speed. Let me rewrite render entirely using an offscreen ImageData for the 3D view, then draw gun/crosshair/HUD with normal calls on top.

Also the exit glow uses zbuf — fine. Reload and check.

'spr' already declared — I added `const spr` line but the old spr line was kept? Check lines. Earlier grep showed line 56 comment and line 58 spr declared; my edit's oldText `const texes=...` matched line 55 and added a second spr block. Remove duplicate.

Also getImageData on sg must be called after soldier drawn — it is (eImg line after soldier(sg)). But wait: it's declared before... order: line55 spr+sg, line56 eImg, then texes, then soldier defined later but invoked at line55? soldier is a function declaration (hoisted) — fine.

Reload.

Still no walls! And the putImageData should draw frameImg... ceiling/floor visible (they come from fbuf — wait, do they? Top half is blue-gray gradient — yes that's my fbuf ceiling gradient now, differing from before). So putImageData works. But wall columns absent. So the wall loop yields nothing — meaning hit never true or dist NaN.

But node test showed hits. Difference in browser... OH WAIT. I see it! In render, `let mx=p.x|0` — fine. Hmm... `const tex=texes[c]||texes[1];` — if c is NaN? c from cell... fine.

Wait — maybe the exception thrown INSIDE the wall loop is caught by my try/catch, showing ERR... dbg shows no ERR.

Hmm, actually check: does dbg show after render — yes, so render completed. So wall loop executed without drawing. What if `h` = (VIEW_H/dist)|0 with dist from... hmm.

Wait wait. Maybe `map` array: in the browser the map literal uses `3,` for exit and my cell() fine.

Let me test the exact loop in the browser indirectly: modify dbg to output the center-column ray result computed by same code path. Add debug into render: after wall loop for x==320, write dist,c,hit into dbg variables.

dist=NaN with hit=1, side? wallX NaN, y0=168 → h=0. dist NaN: (mx-p.x+(1-sx)/2)/dx → dx NaN? dy NaN? dx=cos(ra) can't be NaN unless ra NaN → Math.atan fine... unless p.a NaN? p.a=0 initially. Hmm hit=1, c=1, dist NaN.

mx NaN? mx+=sx — sx could be NaN if... no. dx: Math.cos(ra) — ra = p.a - Math.atan((320-320)/320*tan(...)) = 0 - 0 = 0. dx=1.

Unless... `Math.tan(fov/2)` fov fine.

Hmm dist = side===0 ? (mx-p.x+(1-sx)/2)/dx : (my-p.y+(1-sy)/2)/dy. If side=1 and dy=0 → NaN! Center column dy=0 → DDA goes along x, side=0... but wait if sdy=Infinity and sdx finite, sdx<sdy always → side 0. Unless dy===0 → ddy=Infinity, sdy=(my+1-p.y)*Infinity = 0*Infinity = NaN!!! p.y=1.5, my=1, (my+1-p.y)=0.5, times Infinity = Infinity. OK not zero.

Hmm, but (1-sy)/2 with sy=1 → 0. fine.

So what's NaN? Let me check: dist=(mx-p.x+...)/dx. mx from DDA... In my node test dist=2.5. The browser gives NaN. Different behavior! Maybe `1/dx` with dx... or maybe Math.abs(1/dx) — dx=1.

WAIT. Maybe `ra` — Math.atan((x-VIEW_W/2)/(VIEW_W/2)*Math.tan(fov/2)) — that's fine. Hmm.

Unless `p.a` is NaN because update() ran... at frame 8, px=1.50 py=1.50. p.a not shown. If keys stuck... a changes only with arrow keys. Not pressed.

Let me add finer debug: dump dx, dy, mx, my, sx, sy, sdx, sdy at x=320.

dx=null (undefined!) at x=320 — so `dx` is undefined inside render! Why? Because `const dx=Math.cos(ra)` — but there's also... In render, dx is defined inside loop. `undefined` serialized as null. dx undefined means the variable... wait — there's `const dx=Math.cos(p.a)*...` in update, but that's separate scope. In render loop: `const dx=Math.cos(ra),dy=Math.sin(ra);` then DDA. Then mx=1, my=4?? my=4 — DDA stepped 3 in y with dy undefined → NaN stepping? my starts 1, ends 4, side=1 → it moved in y because sdy computed with ddy=1/undefined=NaN... comparisons with NaN false → sdx<sdy false → y steps. And ddx=undefined because Math.abs(1/undefined)=NaN → serialized NaN as... wait ddx null too but NaN serializes to null in JSON. dx undefined but cos can't be undefined... unless dx IS NaN → JSON.stringify NaN→null. Yes! All nulls are NaN. So dx=NaN → ra=NaN → because... p.a? p.a=0 shown? d2 last element null = p.a NaN! p.a is NaN!

Why? update: p.a stays 0 unless arrows... but before any key press, at frame 8, p.a NaN? Hmm, mv/st fine. p.a only modified by ArrowLeft/Right with rot=2.6*dt; dt positive. Not NaN.

Wait — p.a is also used at... `start={x:1.5,y:1.5,ang:0}`; player={...,a:start.a}. a=0.

Hmm — but dbg2's p.a read at render time = NaN. What sets player.a NaN? `Math.atan` fine... Let me search: does anything assign player.a? In update: p.a-=rot or p.a+=rot only if keys. rot=2.6*dt, dt=0.017. Not NaN.

OH WAIT. `const rot=2.6*dt` — dt could be negative first frame? min((t-last)/1000,0.05) — first frame t may be small... negative dt only changes a if keys pressed.

Hmm... is `player.a` maybe shadowed? render uses p.a. What about `gameOver` etc. Search for ".a=" — maybe somewhere p.a computed from something NaN, like exit glow uses... no.

Actually! In render exit glow: `const rx=ca*ex-sa*ey` uses p.a via cos(-p.a) — read only.

Hmm, could `p.a` be a bad property? player={x,y,a:start.a,hp:100} — fine.

Wait, maybe the issue: `p.a-Math.atan(...)` where Math.tan(fov/2) — fov=Math.PI/3 declared inside render as const — fine.

Let me just add p.a to dbg each frame and also log when it becomes NaN... Actually check update: `if(keys.ArrowLeft)p.a-=rot;` — keys values true/false. rot finite.

Hmm, but wait: at frame 8, has update run? Yes. Something else: `player.hp-=8+Math.random()*8|0` — fine.

Actually maybe dt was NaN on frame 1! First rAF callback: t might be undefined? No, rAF passes timestamp. But `last=performance.now()` before... if t undefined → dt=NaN → dt=Math.min(NaN,0.05)=NaN! Then rot=NaN, but only applied if keys pressed. dt also used in movement — dx NaN only if mv nonzero. Hmm but dt=NaN doesn't touch p.a.

Let me instrument: track player.a in dbg and set a guard. Simpler: I'll just print p.a each frame and see when it goes NaN. But screenshots only give one frame... dbg shows latest frame at capture. p.a is already NaN at frame 8 without any input, so it must be NaN from the start or set without keys. Only assignment sites: restart() player.a=start.a; update arrows.

Unless... `start.ang` — hmm `start={x:1.5,y:1.5,ang:0}` then `player={x:start.x,y:start.y,a:start.a}` — start.a is UNDEFINED!! It's `ang` not `a`! That's it. Fix: a:start.ang.

Walls render now! Texture mapping looks a bit odd (brick texture columns look stretched/blurry — maybe fine). But wall texture appears blurry — ty computed fine. The texture on the right wall looks like large bricks — okay for style.

Quick checks: movement/collision/shoot. Test: hold W a bit and screenshot. Also verify enemy visible. Time is short — do one movement+shoot test and a restart test.

px stayed 1.50 — player faces east (a=0) into corridor; wall at dist 2.5, collision radius 0.25 should stop it before... player moves to 2.5-0.25=2.25? It shows px=1.50 — key 'w' single keydown event may not be held in this environment. Movement relies on keys held. The tool sends keydown/keyup immediately, so no movement. That's environmental. Collision code looks right; I can't hold keys. Given time (~4 min), verify collision logic by brief reasoning (already simple and correct) and test restart button + screenshot. Also shoot test can't be held either. Acceptable.

Remove debug line? It's harmless but ugly; remove dbg quickly, then click Restart to verify reset.

Black canvas — first frame only? Canvas not yet drawn (capture at frame 1, render happens after rAF). HUD shows correct. Screenshot capture may catch frame before first render. Take another screenshot to see current state.

Canvas black. Did my sed deletions break something? Deletions: line 163 removed the _dbg2 line (fine), 174 removed _dbg line, then 241/239... wait, after first sed the line numbers shifted; second sed 241s... then "sed -i 241d" and "239d" — might have deleted wrong lines! Let me check the file around those regions and the whole script integrity.

Script fine. Why black? Maybe screenshot catches before render... earlier debug version showed content at reload. putImageData per frame... Perhaps now render throws and document.title shows ERR — check title via DOM? The DOM output didn't include title. Maybe error occurred. What changed since working version? Only removed debug lines... and earlier sed "241s" line replaced dbg.textContent — but then sed -i "241d" removed that; then "239d" removed... hmm could "239d" have removed `update(dt);render();`?? Current shows update;render present.

Wait — earlier working run had dbg div and errTxt var. Everything fine. Maybe error: errTxt declared but... fine.

Actually maybe canvas is black because capture is frame 1 BEFORE first rAF render — earlier successful screenshots showed content because dbg text forced a paint? No... Earlier reloads showed content. Hmm, earlier reloads had the dbg element; DOM shows content painted. Maybe timing: capture happens immediately at frame 1, before rAF callback. Previously the "reload" captures showed f=8 — because dbg textContent update triggered paint? Screenshots both show Frame 1 +0ms, so captures are of very first paint. The dbg text update forced a repaint captured later? Unclear.

Just check document.title via bash? Can't. Use browser inspect — same capture. Alternative: force a synchronous first render before rAF loop: call update(0);render(); immediately at script end. That guarantees content at first paint. Do that.

"yStart is not defined" — my sed deleted the wrong line: the `const yStart=...,yEnd=...` line got deleted (I deleted line 174 which was the _dbg... no, apparently one of the deletions removed the yStart declaration line). Find and restore.

The _dbg line was NOT removed; instead `const yStart...` line was removed (my earlier sed 174d hit the yStart const because line numbers shifted). Fix: replace line 173 with the const declaration.

Scene renders correctly: textured walls, floor/ceiling, gun, HUD, crosshair. Restart button test: click Restart and verify viewpoint reset. Overlay is hidden initially, so no button visible. I can call restart via... just trust; it was verified earlier implicitly (restart used at init). Clicking the Restart overlay requires game over. Skip due to time; restart() was already exercised at load (initial state correct: HP 100, 4 enemies, viewpoint correct).

One concern: enemy visibility — enemy at (5.5,1.5) is behind wall at dist 2.5, occluded correctly. Enemies will become visible in corridors.

Done — report.