Atölye › Conway'in Hayat Oyunu › 26/32. adım
Şimdi sürükleme. İşaretçi her hareket ettiğinde tarayıcı pointermove olayını yayar. Basılıyken (painting null
değilken) altındaki hücreye painting değerini yazacağız. Bırakınca (pointerup) painting yeniden null olacak.
Neden her hücreyi çevirmiyoruz? Yavaş sürüklerken aynı hücrenin üstünde birkaç hareket olayı gelir; çevirseydik aç–kapa–aç yapardı. Tek bir değeri boyamak sağlamdır.
```js
canvas.addEventListener('pointermove', (event) => {
if (painting === null) return
const cell = cellAt(toCanvas(event))
if (cell) grid[cell.r][cell.c] = painting
})
document.addEventListener('pointerup', () => {
painting = null
})
```canvas.addEventListener('pointermove', ...) → işaretçi canvas'ın üstünde her kıpırdadığında çalışır.if (painting === null) return → parmak kalkıksa (boyamıyorsak) hiçbir şey yapma. Fare boşta gezinirken
hücreler değişmez.if (cell) grid[cell.r][cell.c] = painting → ızgaranın içindeysek altındaki hücreye seçilen değeri yaz.document.addEventListener('pointerup', ...) → bırakma olayını canvas'ta değil bütün sayfada dinleriz.
Oyuncu parmağını canvas'ın dışında kaldırırsa canvas bunu duymaz ve boyama hiç bitmezdi.painting = null → bıraktın, boyama bitti.pointerdown dinleyicisinin kapanan }) satırının altına, function update() { satırının üstüne iki dinleyiciyi
yaz; aralarında ve altlarında birer boş satır kalsın. Çalıştır: C ile temizle, basılı tutup sürükleyerek bir
şekil çiz, sonra Boşluk ile çalıştır.
Beceriler: Klavye ve fare girdisi
← Boya mı sil mi? Metinden desenler →