Atölye › Mayın Tarlası › 11/26. adım
Açık hücre çevresindeki mayın sayısını göstermeli (0 ise hiçbir şey yazmayız). Her sayının kendi rengi var: 1 mavi, 2 yeşil, 3 kırmızı... Deneyimli oyuncular tahtayı rakamları okumadan renginden tanır.
Renkleri bir listede tutacağız: NUMBER_COLORS[3] 3'ün rengi. Uzun bir if zinciri yerine tek satır.
```js
const NUMBER_COLORS = [null, '#2563eb', '#16a34a', '#dc2626', '#7c3aed', '#b45309', '#0891b2', '#111827', '#6b7280']
ctx.font = 'bold 22px sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
if (cell.count > 0) {
ctx.fillStyle = NUMBER_COLORS[cell.count]
ctx.fillText(String(cell.count), x + CELL / 2, y + CELL / 2 + 1)
}
```NUMBER_COLORS → renk listesi; sıra numarası sayının kendisi. İlk eleman null ("boş"), çünkü 0'ı hiç yazmıyoruz.ctx.font, ctx.textAlign = 'center', ctx.textBaseline = 'middle' → döngüden önce bir kez: yazı verilen
noktaya hem yatayda hem dikeyde ortalanır.if (cell.count > 0) → sadece çevrede mayın varsa yaz.ctx.fillText(String(cell.count), x + CELL / 2, y + CELL / 2 + 1) → sayıyı yazıya çevirip (3 → '3') hücrenin
ortasına yazar (+1 piksel: rakamlar göze biraz yukarıda durur).const MINES = 10 satırının altına NUMBER_COLORS listesini yaz.draw içinde for döngüsünün üstüne üç yazı ayarını yaz.if (cell.revealed) bloğunda, fillRect satırının altına if (cell.count > 0) { ... } bloğunu yaz.Beceriler: Canvas üzerine çizim
← Açık hücre farklı görünür Tıkla ve aç →