shigureni.dev

グリッド地図を俯瞰する

世界は二次元のグリッド。各セルが壁か空かの二択で、文字の地図で持てる。# が壁、. が空。プレイヤーは空きセルのどこかに立ち、ある方角を向いている。

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

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const mw = MAP[0].length
  const mh = MAP.length
  const cell = Math.min(w / mw, h / mh)
  const posX = 1.5
  const posY = 1.5
  let t = 0.4

return () => {
    t += 0.01

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)

for (let y = 0; y < mh; y++) {
      for (let x = 0; x < mw; x++) {
        c.fillStyle = MAP[y][x] === "#" ? colors.tint(40) : colors.tint(220)
        c.fillRect(x * cell + 1, y * cell + 1, cell - 2, cell - 2)
      }
    }

// プレイヤーの位置と向き
    const px = posX * cell
    const py = posY * cell
    c.fillStyle = colors.tint(10)
    c.beginPath()
    c.arc(px, py, cell * 0.22, 0, Math.PI * 2)
    c.fill()
    c.strokeStyle = colors.tint(10)
    c.lineWidth = 2
    c.beginPath()
    c.moveTo(px, py)
    c.lineTo(px + Math.cos(t) * cell * 0.8, py + Math.sin(t) * cell * 0.8)
    c.stroke()
  }
}

地図は文字列の配列で、MAP[y][x] がセル (x, y) の中身。壁を暗く、空きを明るく塗っている。プレイヤーは (1.5, 1.5) の空きセルの中央に立ち、棒が向いている方角を指す。座標が整数でなく小数なのは、セルの中のどこに立つかまで持つため。MAP の # を書き換えれば壁の配置が変わる。この俯瞰を、プレイヤーの目から見た景色に変えていく。