Atölye › Frogger Tarzı Karşıya Geçiş › 1/22. adım
Kalabalık bir yolu zıplayarak geç, kütüklere binerek nehri aş ve evlere ulaş. Gerçek zamanlı bir dünyada ızgara hareketi, modülo ile dönen şeritler, hareketli platformlara binmek ve hızlanan bölümler.
Frogger tarzı bir oyun yapıyoruz: bir kurbağa önce trafiği olan bir yolu, sonra yüzen kütükler üzerinden bir nehri geçip evlerine ulaşıyor. Sonunda nasıl olacağını Bitmiş hâlini gör ile görebilirsin.
Tahta 40 piksellik 13 satır: en üstte karşı kıyı (evler), 5 satır nehir, güvenli bir şerit, 5 satır yol ve başlangıç. Her satırın rengini satır numarasından seçen bir fonksiyon yazıyoruz.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const TILE = 40
const COLS = 12
const TOP = 40 // room for the score and the lives
const START_ROW = 12
// Rows from the top: 0 the far bank with the homes, 1-5 the river, 6 a safe strip, 7-11 the road, 12 the start.
function rowColor(row) {
if (row === 0) return '#166534'
if (row <= 5) return '#1e3a8a'
if (row === 6 || row === START_ROW) return '#4d7c0f'
return '#1f2937'
}
function draw() {
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
for (let row = 0; row <= START_ROW; row++) {
ctx.fillStyle = rowColor(row)
ctx.fillRect(0, TOP + row * TILE, canvas.width, TILE)
}
}
draw()
```TILE = 40 → bir karenin kenarı; tahta 12 kare genişliğinde (COLS), satır 0'dan START_ROW'a (12) kadar 13 satır.TOP = 40 → üstte skor ve can için boşluk.function rowColor(row) → satırın rengini döndürür. İlk tutan return fonksiyonu bitirir, gerisine bakılmaz:for (let row = 0; row <= START_ROW; row++) → her satırı boydan boya bir şerit olarak boya.Satırları yorum satırlarının altına yaz ve Çalıştır'a bas: renkli şeritler görmelisin.
Beceriler: Canvas üzerine çizim