Atölye › Wolfenstein Tarzı 3B Labirent › 1/18. adım
İlk 3B nişancı oyunlarının yaptığı gibi, düz bir haritadan çizilen 3B bir labirentte yürü. sin ve cos ile açılar, duvar boyunca kaymak, bir ızgarada ışın göndermek (DDA), perspektif, balık gözü düzeltmesi ve gölgelendirme.
İlk 3B nişancılar (Wolfenstein 3D) gibi bir 3B labirent yapıyoruz: içinde yürüyüp duvarları perspektifle göreceksin. Sonunda nasıl olacağını Bitmiş hâlini gör ile görebilirsin.
İşin sırrı: dünya aslında düz bir ızgara. Önce bu ızgarayı bir yazı listesi olarak yazıyor ve köşeye küçük bir mini harita olarak çiziyoruz.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
// # stone wall, 2 brick wall, E the exit (a wall you walk into), . floor.
const MAP = [
'############',
'#....#.....#',
'#.##.#.###.#',
'#.#..#...#.#',
'#.#.###2#..#',
'#.#.....#.##',
'#.#22#.##..#',
'#..........#',
'###.##.#.#.#',
'#...#..#.#.#',
'#.#...##.#E#',
'############',
]
const MINI = 8 // minimap pixels per tile
function draw() {
// The minimap, seen from above.
MAP.forEach((line, row) => {
;[...line].forEach((ch, col) => {
ctx.fillStyle = ch === '.' ? 'rgba(15, 23, 42, 0.6)' : ch === 'E' ? '#22c55e' : 'rgba(226, 232, 240, 0.8)'
ctx.fillRect(col * MINI, row * MINI, MINI, MINI)
})
})
}
draw()
```MAP → her yazı bir satır, her karakter bir kare: # taş duvar, 2 tuğla duvar, E çıkış, . zemin.
12 × 12'lik bir labirent.MAP.forEach((line, row) => ...) → her satırı numarasıyla gezer.[...line] → satırı tek tek karakterlere böler; forEach((ch, col) => ...) her karakteri sütun numarasıyla gezer.ch === '.' ? ... : ch === 'E' ? ... : ... → zemin koyu, çıkış yeşil, geri kalan (duvarlar) açık renk.col * MINI, row * MINI → her kare 8×8 piksel.;[...line] → baştaki ; JavaScript'in bu satırı öncekiyle yapıştırmasını önler; [ ile başlayan satırlarda
alışkanlık.Satırları yorum satırlarının altına yaz ve Çalıştır'a bas: sol üstte küçük bir labirent görmelisin.
Beceriler: Canvas üzerine çizim, Diziler ve nesneler