engine.scope(({ start, cls, rectfill, pset, line, btn, circfill, caption }) => { const map = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1], [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1], [1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], ]; const mapSize = 16; const lamps = [ { x: 8, y: 2.5, radius: 4 }, { x: 2.5, y: 8, radius: 4 }, { x: 13.5, y: 8, radius: 4 }, { x: 8, y: 13.5, radius: 4 }, ]; const sprites = { wall: [ 6, 6, 6, 5, 6, 6, 6, 6, 6, 6, 6, 5, 6, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 5, 6, 6, 6, 6, 6, 6, 6, 5, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 5, 6, 6, 6, 6, 6, 6, 6, 5, 6, 6, 6, 6, ], }; const darken = [ 0, 0, 0, 0, 2, 0, 5, 6, 2, 4, 9, 3, 1, 1, 2, 9, ]; const bayer = [ 0 / 16, 8 / 16, 2 / 16, 10 / 16, 12 / 16, 4 / 16, 14 / 16, 6 / 16, 3 / 16, 11 / 16, 1 / 16, 9 / 16, 15 / 16, 7 / 16, 13 / 16, 5 / 16, ]; const FOG_START = 3; const MAX_DIST = 6; const TORCH_STRENGTH = 4; let px = 2.5; let py = 2.5; let pa = 0; const fov = 0.66; const moveSpeed = 0.05; const rotSpeed = 0.05; const cell = 2; const mapW = mapSize * cell; const mmX = 128 - mapW; const mmY = 128 - mapW; function update() { if (btn('ArrowLeft')) pa -= rotSpeed; if (btn('ArrowRight')) pa += rotSpeed; if (btn('ArrowUp')) { const nx = px + Math.cos(pa) * moveSpeed; const ny = py + Math.sin(pa) * moveSpeed; if (map[Math.floor(py)][Math.floor(nx)] === 0) px = nx; if (map[Math.floor(ny)][Math.floor(px)] === 0) py = ny; } if (btn('ArrowDown')) { const nx = px - Math.cos(pa) * moveSpeed; const ny = py - Math.sin(pa) * moveSpeed; if (map[Math.floor(py)][Math.floor(nx)] === 0) px = nx; if (map[Math.floor(ny)][Math.floor(px)] === 0) py = ny; } } function fogAmount(dist) { if (dist <= FOG_START) return 0; return Math.min(1, (dist - FOG_START) / (MAX_DIST - FOG_START)); } function applyFog(color, fogFactor, sx, sy) { const threshold = bayer[(sy % 4) * 4 + (sx % 4)]; if (fogFactor > threshold + 0.5) { return darken[darken[color]]; } else if (fogFactor > threshold) { return darken[color]; } return color; } function lampLight(hitX, hitY) { let light = 0; for (const lamp of lamps) { const dx = hitX - lamp.x; const dy = hitY - lamp.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < lamp.radius) { light += 1 - dist / lamp.radius; } } return Math.min(1, light); } function draw() { cls(0); const halfH = 64; for (let sy = 0; sy < 128; sy++) { const distFromHorizon = Math.abs(sy - halfH); const floorFog = 1 - distFromHorizon / halfH; const baseColor = sy < halfH ? 1 : 5; for (let sx = 0; sx < 128; sx++) { const columnOffset = Math.abs(sx - 64) / 64; const torchReduction = TORCH_STRENGTH * (1 - columnOffset * columnOffset); const effectiveFog = Math.max(0, floorFog - torchReduction / MAX_DIST); pset(sx, sy, applyFog(baseColor, effectiveFog, sx, sy)); } } const dirX = Math.cos(pa); const dirY = Math.sin(pa); const planeX = -dirY * fov; const planeY = dirX * fov; for (let x = 0; x < 128; x++) { const cameraX = (2 * x) / 128 - 1; const rdx = dirX + planeX * cameraX; const rdy = dirY + planeY * cameraX; let mx = Math.floor(px); let my = Math.floor(py); const deltaDistX = Math.abs(rdx) < 1e-10 ? 1e30 : Math.abs(1 / rdx); const deltaDistY = Math.abs(rdy) < 1e-10 ? 1e30 : Math.abs(1 / rdy); let stepX, stepY, sideDistX, sideDistY; if (rdx < 0) { stepX = -1; sideDistX = (px - mx) * deltaDistX; } else { stepX = 1; sideDistX = (mx + 1 - px) * deltaDistX; } if (rdy < 0) { stepY = -1; sideDistY = (py - my) * deltaDistY; } else { stepY = 1; sideDistY = (my + 1 - py) * deltaDistY; } let side; while (true) { if (sideDistX < sideDistY) { sideDistX += deltaDistX; mx += stepX; side = 0; } else { sideDistY += deltaDistY; my += stepY; side = 1; } if (map[my]?.[mx] === 1) break; } const perpDist = side === 0 ? sideDistX - deltaDistX : sideDistY - deltaDistY; const hitX = px + rdx * perpDist; const hitY = py + rdy * perpDist; const columnOffset = Math.abs(x - 64) / 64; const torchReduction = TORCH_STRENGTH * (1 - columnOffset * columnOffset); const light = lampLight(hitX, hitY); const effectiveDist = Math.max(0, perpDist - torchReduction - light * MAX_DIST); const fogFactor = fogAmount(effectiveDist); const stripeH = Math.floor(128 / perpDist); const drawStart = Math.max(0, Math.floor(64 - stripeH / 2)); const drawEnd = Math.min(128, Math.floor(64 + stripeH / 2)); let wallHitFrac; if (side === 0) { wallHitFrac = py + perpDist * rdy; } else { wallHitFrac = px + perpDist * rdx; } wallHitFrac -= Math.floor(wallHitFrac); const tx = Math.floor(wallHitFrac * 8); const texStep = 8 / stripeH; let texPos = (drawStart - 64 + stripeH / 2) * texStep; for (let sy = drawStart; sy < drawEnd; sy++) { const ty = Math.min(7, Math.floor(texPos)); texPos += texStep; let color = sprites.wall[ty * 8 + tx]; if (color < 0) continue; if (side === 0) { color = darken[color]; } color = applyFog(color, fogFactor, x, sy); pset(x, sy, color); } } for (let y = 0; y < mapSize; y++) { for (let x = 0; x < mapSize; x++) { const color = map[y][x] === 1 ? 5 : 6; rectfill( mmX + x * cell, mmY + y * cell, mmX + (x + 1) * cell, mmY + (y + 1) * cell, color, ); } } for (const lamp of lamps) { circfill( mmX + Math.floor(lamp.x * cell), mmY + Math.floor(lamp.y * cell), 1, 10, ); } rectfill( mmX + Math.floor(px * cell) - 1, mmY + Math.floor(py * cell) - 1, mmX + Math.floor(px * cell) + 2, mmY + Math.floor(py * cell) + 2, 8, ); line( mmX + Math.floor(px * cell), mmY + Math.floor(py * cell), mmX + Math.floor(px * cell + Math.cos(pa) * 4), mmY + Math.floor(py * cell + Math.sin(pa) * 4), 8, ); caption('lamps light nearby walls', 2, 2, 7); } start({ sprites, sounds: {}, update, draw, target }); });

Editing: Fog & Lighting: Street Lamps

Recent Edits

Plugins