shigureni.dev

歩く — キーボード

視点を動かせるようにする。矢印キーの上下で前後に進み、左右で向きを変える。進む前に行き先が壁かを確かめ、壁なら止める。ゲームの手触りと同じ keyboard(signal) で、押されている向きへ毎フレーム座標を進める。

const MAP = [
  "##########",
  "#........#",
  "#..####..#",
  "#..#..#..#",
  "#..#..#..#",
  "#........#",
  "#..##.##.#",
  "#..#...#.#",
  "#......#.#",
  "##########",
]

const mw = MAP[0].length
const mh = MAP.length
const isWall = (x, y) => x < 0 || y < 0 || x >= mw || y >= mh || MAP[y | 0][x | 0] === "#"

export default (c, signal) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const colW = 2
  const cols = Math.ceil(w / colW)
  const tanHalf = Math.tan(Math.PI / 6)
  const maxDist = 9
  const key = keyboard(signal)

let posX = 1.6
  let posY = 1.6
  let ang = 0.6

return () => {
    const turn = (key.down("ArrowRight") ? 1 : 0) - (key.down("ArrowLeft") ? 1 : 0)
    const move = (key.down("ArrowUp") ? 1 : 0) - (key.down("ArrowDown") ? 1 : 0)
    ang += turn * 0.04
    const dirX = Math.cos(ang)
    const dirY = Math.sin(ang)
    const nx = posX + dirX * move * 0.05
    const ny = posY + dirY * move * 0.05
    if (!isWall(nx, posY)) posX = nx
    if (!isWall(posX, ny)) posY = ny

const planeX = -dirY * tanHalf
    const planeY = dirX * tanHalf

c.fillStyle = colors.tint(150)
    c.fillRect(0, 0, w, h / 2)
    c.fillStyle = colors.tint(40)
    c.fillRect(0, h / 2, w, h / 2)

for (let col = 0; col < cols; col++) {
      const cameraX = (2 * col) / cols - 1
      const rayX = dirX + planeX * cameraX
      const rayY = dirY + planeY * cameraX
      let mapX = posX | 0
      let mapY = posY | 0
      const deltaX = Math.abs(1 / rayX)
      const deltaY = Math.abs(1 / rayY)
      let stepX
      let stepY
      let sideDistX
      let sideDistY
      if (rayX < 0) {
        stepX = -1
        sideDistX = (posX - mapX) * deltaX
      } else {
        stepX = 1
        sideDistX = (mapX + 1 - posX) * deltaX
      }
      if (rayY < 0) {
        stepY = -1
        sideDistY = (posY - mapY) * deltaY
      } else {
        stepY = 1
        sideDistY = (mapY + 1 - posY) * deltaY
      }
      let side = 0
      for (let k = 0; k < 32; k++) {
        if (sideDistX < sideDistY) {
          sideDistX += deltaX
          mapX += stepX
          side = 0
        } else {
          sideDistY += deltaY
          mapY += stepY
          side = 1
        }
        if (isWall(mapX, mapY)) break
      }
      const perp = side === 0 ? sideDistX - deltaX : sideDistY - deltaY
      const lineH = h / Math.max(perp, 0.1)
      const far = Math.min(1, perp / maxDist)
      const base = (1 - far) * (side === 1 ? 0.6 : 1)
      const g = Math.max(8, Math.min(238, (20 + base * 210) | 0))
      c.fillStyle = colors.tint(g)
      c.fillRect(col * colW, h / 2 - lineH / 2, colW + 0.6, lineH)
    }
  }
}

毎フレーム key.down で矢印キーを聞き、ang を回し、向いた方角 (dirX, dirY) へ座標を進める。isWall(nx, posY) と isWall(posX, ny) を別々に確かめると、壁に斜めにぶつかったとき片方の軸だけ滑って動ける（壁ずり）。プレビューをクリックしてキー入力を渡すと、迷路の中を歩ける。壁の高さと陰影が動きに合わせて流れ、平面の地図を一人称で歩く視界になる。

work は同じレイキャストで、広い迷路を歩ける。無操作のときは自動で迷路を巡回し、壁の手前で向きを変えながら進む。矢印キーで操作を奪える。地図と視点だけ持って、画面の列ぶんの光線で景色が立つ。