Atölye › Zelda Tarzı Zindan › 1/22. adım
Dört odayı keşfet, kılıçla savaş, anahtarı bul, kapıyı aç ve kaç. Metin olarak yazılan odalar, duvar boyunca yürüyüp kaymak, odalar arasında geçiş, bir kılıç çarpışma kutusu, dolaşan ve kovalayan düşmanlar, kalpler, anahtarlar ve aldıklarını hatırlayan bir dünya.
Zelda tarzı bir zindan yapıyoruz: dört odada gez, kılıçla dövüş, anahtarı bul, kapıyı aç ve merdivenden kaç. Sonunda nasıl olacağını Bitmiş hâlini gör ile görebilirsin.
Önce dünya: yazıyla çizilmiş dört oda, her biri 15 kare genişliğinde ve 11 kare yüksekliğinde, 2'ye 2 dizilmiş. Harita uzun ama sadece bir çizim; dikkatle kopyala. İlk odayı yükleyip kare kare çiziyoruz; üstte kalp ve anahtarlar için bir şerit boş kalıyor.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const T = 32 // one tile
const TOP = 48 // room for hearts, keys and the timer
// Four rooms, in a 2 by 2 grid. # wall, D locked door, k key, h heart, e enemy, E the stairs out, P the start.
// A gap in the wall at the edge of a room leads to the room next to it.
const ROOMS = [
[
[
'###############',
'#.............#',
'#..P..........#',
'#....###......#',
'#....#.....e..#',
'#....#.........',
'#.............#',
'#..........h..#',
'#.............#',
'#.............#',
'#######.#######',
],
[
'###############',
'#.............#',
'#..e......e...#',
'#....#####....#',
'#.............#',
'..............#',
'#.............#',
'#...##...##...#',
'#.......e.....#',
'#.............#',
'#######D#######',
],
],
[
[
'#######.#######',
'#.............#',
'#..e..........#',
'#...#######...#',
'#.............#',
'#.....k.......#',
'#.............#',
'#...#######...#',
'#..........e..#',
'#.............#',
'###############',
],
[
'#######.#######',
'#.............#',
'#.e.........e.#',
'#.............#',
'#....#####....#',
'#....#.E.#....#',
'#....#...#....#',
'#.............#',
'#......e......#',
'#.............#',
'###############',
],
],
]
const COLS = 15
const ROWS = 11
let tiles // the current room, as arrays of characters we can change (doors open, keys are picked up)
let room // { rx, ry }: which room we are in
function enter(rx, ry) {
room = { rx, ry }
tiles = ROOMS[ry][rx].map((line) => [...line].map((ch) => (ch === 'P' || ch === 'e' ? '.' : ch)))
}
function draw() {
ctx.fillStyle = '#0c0a09'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.save()
ctx.translate(0, TOP)
tiles.forEach((line, row) => {
line.forEach((ch, col) => {
const x = col * T
const y = row * T
ctx.fillStyle = ch === '#' ? '#57534e' : '#d6c7a1'
ctx.fillRect(x, y, T, T)
})
})
ctx.restore()
}
enter(0, 0)
draw()
```ROOMS[ry][rx] → 2×2 ızgarada ry. satır, rx. sütundaki oda. Her oda yazılardan oluşan bir liste: # duvar,
. zemin; öbür harfler (kapı, anahtar, kalp, düşman, merdiven, başlangıç) sonraki adımlarda anlam kazanacak.enter(rx, ry) → odayı tiles'a karakter dizileri olarak kopyalar ([...line]): ileride tek tek kareler
değişebilsin (kapı açılır, anahtar alınır). Yazılar değiştirilemez, diziler değiştirilebilir.ch === 'P' || ch === 'e' ? '.' : ch → başlangıç ve düşmanlar kare değil: yerlerine zemin.ctx.save() → çizim ayarlarını hatırla; ctx.translate(0, TOP) → bundan sonra her şey 48 piksel aşağıda çizilsin;
ctx.restore() → eski hâle dön. Böylece odanın içinde 0,0 odanın sol üst köşesi olur.Satırları yorum satırlarının altına yaz (haritayı dikkatle) ve Çalıştır'a bas: ilk oda görünmeli.
Beceriler: Canvas üzerine çizim, Diziler ve nesneler