Atölye › XOX › 1/33. adım
3×3 tahtada X ve O. Fare tıklamaları, dizi olarak tahta, kazananı bulmak ve özyineleme sayesinde hiç kaybetmeyen bir bilgisayar.
XOX (tic-tac-toe) oyununu adım adım yazacağız. Oyundaki her şey sayfadaki bir canvas (tuval) üzerine çizilir: 300×300 piksellik boş bir dikdörtgen. Sağdaki oyun alanı o. (Piksel, ekrandaki en küçük noktadır.)
Resim yapmadan önce iki şey lazım: kâğıt ve kalem. Bu adımda ikisini de elimize alıyoruz. Ekranda henüz bir şey değişmeyecek.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
```document → sayfanın kendisi. Sayfadaki her şeye buradan ulaşırız..getElementById('game') → "kimliği (id) game olan öğeyi bul". Nokta (.) "bunun içindeki şu komut" demek;
parantez ( ) komuta bilgi verir. Tırnak içindeki 'game' bir yazıdır (metin).const canvas = → bulunan şeye canvas adını verir. Kutuya etiket yapıştırmak gibi: bundan sonra hep bu adla
çağırırız. const "bu ad hep aynı şeyi gösterecek" demek; = "sağdakini soldaki ada ver".canvas.getContext('2d') → canvas'tan 2 boyutlu çizim kalemini ister.const ctx = → kaleme ctx adını verir (context, yani bağlam kelimesinin kısaltması). Bütün çizim satırları
ctx. ile başlayacak: "kalemle şunu yap".Kodu, editördeki üç yorum satırının (// ile başlayanlar; bilgisayar onları okumaz, insanlar için not) altına
yaz. Kopyalama; kendin yaz, harf harf. Sonra Çalıştır'a bas (ya da Ctrl + Enter). Ekran değişmez, ama alttaki
kontroller yeşil olmalı.
Beceriler: Canvas üzerine çizim