Atölye › Wolfenstein Tarzı 3B Labirent › 11/18. adım

3B görünüm

Ne yapıyoruz

Şimdi sihir: görüş alanı 60 derece genişliğinde, 240 ışına bölünüyor; her 2 piksellik şerit için bir ışın. Her ışının duvarı ufka ortalanmış bir sütun olarak çiziliyor; boyu PROJECTION / dist: iki kat uzak, yarı boy. Çalıştır ve dön: labirentin içindesin!

```js
const FOV = Math.PI / 3 // 60 degrees
const RAYS = 240 // one ray for every 2 pixels across
const COLUMN = canvas.width / RAYS
// How far the screen is from the eye, in pixels, so that the view is exactly FOV wide.
const PROJECTION = canvas.width / 2 / Math.tan(FOV / 2)

  for (let i = 0; i < RAYS; i++) {
    const angle = player.angle - FOV / 2 + (FOV * (i + 0.5)) / RAYS
    const hit = castRay(angle)
    const dist = hit.dist
    const h = Math.min(H * 3, PROJECTION / dist)
    ctx.fillStyle = '#94a3b8'
    ctx.fillRect(i * COLUMN, (H - h) / 2, COLUMN, h)
  }
```

Ne işe yarıyor

Sıra sende

  1. MAP listesinin altına dört görüş sabitini ve yorumu yaz.
  2. draw'da zeminle mini harita arasına sütun döngüsünü ve bir boş satır yaz. Çalıştır.

Beceriler: Canvas üzerine çizim, Hız ve yerçekimi

Tüm adımlar

  1. Harita
  2. Oyuncu
  3. Tavan, zemin ve döngü
  4. Dön
  5. Yürü
  6. Duvar mı?
  7. Duvarda dur, boyunca kay
  8. Işın: nereden başlıyor
  9. Işın: ızgara çizgileri
  10. Işın: duvara kadar yürü
  11. 3B görünüm
  12. Balık gözü yok
  13. Işık ve gölge
  14. Süre
  15. Kaçış!
  16. En iyi süre
  17. Dokunmatik kontrol
  18. Kendin yap: koş