Atölye › Sudoku › 1/28. adım
Sudoku oyna, sonra bilgisayara onu çözmeyi ve yeni bulmacalar icat etmeyi öğret. Bir metinden okunan ızgara, tek döngüde üç kural, en kısıtlı hücreyi seçen geri izlemeli bir çözücü, her bulmacayı tam olarak tek çözümde tutan bir üretici ve telefonlar için bir rakam tuş takımı.
Sudoku yapıyoruz: önce oynanabilir bir bulmaca, sonra bilgisayara onu çözmeyi ve yeni bulmacalar icat etmeyi öğreteceğiz. Sonunda nasıl olacağını Bitmiş hâlini gör ile görebilirsin.
Sudoku 9 × 9 = 81 hücrede oynanır. Önce hücreleri çiziyoruz: açık bir arka plan üstünde, ortalanmış beyaz kareler.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const SIZE = 48
const LEFT = (canvas.width - 9 * SIZE) / 2
const TOP = 56
function draw() {
ctx.fillStyle = '#f8fafc'
ctx.fillRect(0, 0, canvas.width, canvas.height)
for (let r = 0; r < 9; r++) {
for (let c = 0; c < 9; c++) {
const x = LEFT + c * SIZE
const y = TOP + r * SIZE
ctx.fillStyle = '#ffffff'
ctx.fillRect(x, y, SIZE, SIZE)
}
}
}
draw()
```const SIZE = 48 → bir hücrenin kenarı, piksel.const LEFT = (canvas.width - 9 * SIZE) / 2 → 9 hücrelik tahtadan artan genişliğin yarısı: tahta yatayda ortalanır.const TOP = 56 → üstte süre yazısı için boşluk.for (let r = 0; r < 9; r++) ve içindeki for (let c ...) → iç içe iki döngü: 9 satır × 9 sütun = 81 tur.const x = LEFT + c * SIZE, const y = TOP + r * SIZE → o hücrenin sol üst köşesi.fillRect(x, y, SIZE, SIZE).Satırları yorum satırlarının altına yaz ve Çalıştır'a bas: ortada büyük beyaz bir kare görmelisin (hücreler arası çizgiler sonraki adımda).
Beceriler: Canvas üzerine çizim, Döngüler