Atölye › Pac-Man Tarzı Labirent Kovalamaca › 1/42. adım

Pac-Man Tarzı Labirent Kovalamaca: Metin olarak labirent

Dört hayalet seni avlarken labirentteki her yemi ye. Döşemeden döşemeye akıcı hareket, önceden verilen dönüşler, dört farklı kişilikte hayalet yapay zekâsı, dağılma ve kovalama modları ve avcıları av yapan güç yemleri.

Ne yapıyoruz

Labirent oyunu bir döşeme ızgarası üstünde oynanır: her döşeme 24 × 24 piksellik bir kare. Labirenti tasarlamanın en kolay yolu onu metin olarak çizmek: her sıra bir metin, her harf bir döşeme.

# duvar, - hayaletlerin evi, . yem, o güç yemi, P oyuncunun başlangıç yeri, boşluk boş yol.
1. sıranın iki ucu açık: bir tünel. Soldan çıkan sağdan girecek.

Bu adımda ekranda bir şey değişmeyecek; oyunun haritasını yazıyoruz.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

const TILE = 24
const TOP = 40 // room for the score and the lives
// # wall, - the ghost house, . pellet, o power pellet, P player start. Row 9 is a tunnel: its ends are open.
const MAZE = [
  '###################',
  '#........#........#',
  '#o##.###.#.###.##o#',
  '#.................#',
  '#.##.#.#####.#.##.#',
  '#....#...#...#....#',
  '####.### # ###.####',
  '   #.#       #.#   ',
  '####.# #---# #.####',
  '    .  #---#  .    ',
  '####.# ##### #.####',
  '   #.#       #.#   ',
  '####.# ##### #.####',
  '#........#........#',
  '#.##.###.#.###.##.#',
  '#o.#.....P.....#.o#',
  '##.#.#.#####.#.#.##',
  '#....#...#...#....#',
  '#.######.#.######.#',
  '#.................#',
  '###################',
]
const ROWS = MAZE.length
const COLS = MAZE[0].length
```

Ne işe yarıyor

document.getElementById('game') → sayfadaki canvas'ı bulur. canvas.getContext('2d') → onun 2D çizim kalemini verir; bütün çizim komutları ctx. ile başlayacak.
const TILE = 24 → bir döşemenin piksel boyu. TOP = 40 → labirentin üstünde skor için boşluk.
const MAZE = [ ... ] → köşeli parantez bir dizi (sıralı liste) açar; içinde 21 metin var, her biri 19 harf.
MAZE[row][col] → önce sıra, sonra o sıranın harfi: MAZE[15][9] → 'P'. Sayma 0'dan başlar.
MAZE.length → dizinin eleman sayısı: 21 sıra. MAZE[0].length → ilk metnin harf sayısı: 19 sütun. Sayıları elle yazmak yerine haritadan okuyoruz; labirenti değiştirirsen bunlar kendiliğinden doğru kalır.

Sıra sende

Kodu üç yorum satırının altına yaz.
MAZE satırlarını buradan kopyalayabilirsin (harita bir veri; onu elle yazmanın öğreteceği bir şey yok). Her sıra tam 19 karakter olmalı, boşluklar dahil.
Çalıştır: ekran değişmez, kontroller yeşil olmalı.

Beceriler: Diziler ve nesneler, Canvas üzerine çizim

Oyun döngüsü →

Pac-Man Tarzı Labirent Kovalamaca: Metin olarak labirent

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar