shigureni.dev

つないでみると

グリッド、CA の洞窟、酔歩の通路、BSP の部屋、L 字の廊下、DFS の迷路、ノイズと中点変位の地形、水の侵食、ボロノイの区画、フローフィールドのナビ、WFC の制約、ブルーノイズの配置。洞窟の多数決は平滑化の CA、地形のノイズは雲の質感を作るノイズ、区画のボロノイは細胞模様の Worley、ナビの距離場は連結性の BFS。塗って濃淡で見せていた場が、そのまま歩いて遊べるマップになる。

どの作例も Math.random を直書きしているので毎回ちがう地形が出る。種を一つ固定すれば、同じ種から必ず同じ地形が戻り、共有も再開もできる。

Math.random には種を渡せず、生成のたびに別の系列になる。種から決まる擬似乱数列が要る。代表格が mulberry32 で、32 ビットの状態 s を一つ持ち、s += 0x6D2B79F5 で進めて整数演算で撹拌し、0〜1 の値を返す。同じ初期 s からは必ず同じ列が出る。Math.random() の呼び出しを rng() に差し替えるだけで、生成全体が種で再現できる。

生成したマップを実際に歩かせる。keyboard(signal) の onKeydown は、キーが押された瞬間に一度だけハンドラを呼ぶ離散イベント。押された向きの隣マスが壁でなければそこへ一歩進め、踏んだマスを踏み跡として残す。下は、ランダム埋めを CA で 2 回均した洞窟を生成して、最初に見つけた床にプレイヤーを置き、矢印キーで歩かせたもの。

export default (c, signal) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const N = 40
  const cellW = w / N
  const cellH = h / N
  const idx = (x, y) => y * N + x
  const key = keyboard(signal)

// ランダム埋め → CA で2回均して洞窟を彫る（壁=1 / 床=0）
  let grid = new Uint8Array(N * N)
  let next = new Uint8Array(N * N)
  for (let y = 0; y < N; y++) {
    for (let x = 0; x < N; x++) {
      const edge = x === 0 || y === 0 || x === N - 1 || y === N - 1
      grid[idx(x, y)] = edge ? 1 : Math.random() < 0.45 ? 1 : 0
    }
  }
  const walls = (x, y) => {
    let n = 0
    for (let dy = -1; dy <= 1; dy++) {
      for (let dx = -1; dx <= 1; dx++) {
        if (dx === 0 && dy === 0) continue
        const nx = x + dx
        const ny = y + dy
        n += nx < 0 || ny < 0 || nx >= N || ny >= N ? 1 : grid[idx(nx, ny)]
      }
    }
    return n
  }
  for (let s = 0; s < 2; s++) {
    for (let y = 0; y < N; y++) {
      for (let x = 0; x < N; x++) {
        const wall = grid[idx(x, y)] === 1
        const n = walls(x, y)
        next[idx(x, y)] = n >= 5 || (wall && n >= 4) ? 1 : 0
      }
    }
    const tmp = grid
    grid = next
    next = tmp
  }

// 最初に見つけた床にプレイヤーを置く
  const trail = new Uint8Array(N * N)
  const p = { x: 1, y: 1 }
  for (let i = 0; i < N * N; i++) {
    if (grid[i] === 0) {
      p.x = i % N
      p.y = (i / N) | 0
      break
    }
  }
  trail[idx(p.x, p.y)] = 1

// 壁でない隣マスへだけ一歩動く
  const tryMove = (dx, dy) => {
    const nx = p.x + dx
    const ny = p.y + dy
    if (nx < 0 || ny < 0 || nx >= N || ny >= N) return
    if (grid[idx(nx, ny)] === 1) return
    p.x = nx
    p.y = ny
    trail[idx(nx, ny)] = 1
  }
  key.onKeydown((k) => {
    if (k === "ArrowLeft") tryMove(-1, 0)
    else if (k === "ArrowRight") tryMove(1, 0)
    else if (k === "ArrowUp") tryMove(0, -1)
    else if (k === "ArrowDown") tryMove(0, 1)
  })

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

for (let y = 0; y < N; y++) {
      for (let x = 0; x < N; x++) {
        const i = idx(x, y)
        if (grid[i] === 1) c.fillStyle = colors.tint(40)
        else if (trail[i] === 1) c.fillStyle = colors.tint(210)
        else c.fillStyle = colors.tint(150)
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }

c.fillStyle = colors.ink
    c.fillRect(p.x * cellW, p.y * cellH, cellW + 1, cellH + 1)
  }
}

プレビューをクリックして矢印キーを押すと、暗い壁を避けて床の上だけを一マスずつ進む。壁の方向へ押しても tryMove が弾くので、その向きには動かない。踏んだマスが明るく残って、通った跡が地図の上に線で浮かぶ。生成された洞窟が、塗って見せる絵から、足跡のつくマップに変わる。onKeydown を down の poll に替えれば押しっぱなしで連続移動になり、踏み跡を更新ルールつきの場として読めば、歩いた所が崩れたり光ったりする層も足せる。