raycast

trying to implement a simple flat shaded raycaster

by spoike

HTML

<canvas id="canvas" width="480" height="320"></canvas>

CSS

body {
  background-color: black;
}

JavaScript

const d_canvas = document.getElementById('canvas');
const ctx = d_canvas.getContext('2d');
const h = d_canvas.getAttribute('height')
const w = d_canvas.getAttribute('width')

var worldMap = [
	[1, 1, 1, 1, 1],
  [1, 0, 1, 0, 1],
  [1, 0, 0, 0, 1],
  [1, 0, 0, 0, 1],
  [1, 1, 1, 1, 1]
]

ctx.fillStyle = '#222222'
ctx.fillRect(0,0,w,h)
ctx.fillStyle = '#cccccc'
/*
for (let x = 0; x < w; x++) {
	let y = x / (w/h)
	ctx.fillRect(
  	x,
    y,
    1,
    h - (y * 2)
  )
}
*/

let posX = 2.5; let posY = 2.5; // player position
let dirX = -1; let dirY = 0; // direction vector
let planeX = 0; let planeY = 0.66; // 2d raycaster camera vector
for (let x = 0; x < w; x++) {
  let cameraX = 2 * x / w - 1;
  let rayDirX = dirX + planeX * cameraX
  let rayDirY = dirY + planeY * cameraX
  let mapX = Math.floor(posX)
  let mapY = Math.floor(posY)
  
  let sideDistX, sideDistY
  let deltaDistX = Math.abs(1 / rayDirX)
  let deltaDistY = Math.abs(1 / rayDirY)
  let perpWallDist
  
  let stepX, stepY
  
  let hit = 0
  let side
  if (rayDirX < 0) {
  	stepX = -1
    sideDist = (posX - mapX) * deltaDistX
  } else {
  	stepX = 1
    sideDistX = (mapX + 1.0 - posX) * deltaDistX
  }
  if (rayDirY < 0) {
  	stepY = -1
    sideDistY = (posY - mapY) * deltaDistY
  } else {
  	stepY = 1
    sideDistY = (mapY + 1.0 - posY) * deltaDistY
  }
  
  // perform DDA
  while (hit == 0) {
    if (sideDistX < sideDistY) {
    	sideDistX += deltaDistX
      mapX += stepX
      side = 0
    } else {
    	sideDistY += deltaDistY
      mapY += stepY;
      side = 1
    }
    if (worldMap[mapX][mapY] > 0) {
    	hit = 1
    }
  }
  // calc distance
  if (side == 0) {
    perpWallDist = (mapX - posX + (1 - stepX) / 2) / rayDirX
  } else {
    perpWallDist = (mapY - posY + (1 - stepY) / 2) / rayDirY  
  }
  
  // calc height of line to draw on screen
  let lineHeight = Math.floor(h / perpWallDist)
  console.log(lineHeight, perpWallDist)
  
  // calc rect to draw
  let drawStart = -lineHeight / 2 + h / 2
  if...