Atölye › Yazı Yağmuru › 1/33. adım
Düşen kelimeleri yere inmeden yaz. Metni yerleştirmek için ölçmek, en acil kelimeye kilitlenmek, bir kelimenin yarısını başka renkte çizmek, canlar, gerçek yazma hızları ölçülerek ayarlanan seviyeler, dakikada kelime ve doğruluk, ve sıradaki tuşu yakan bir klavye.
Bu oyunda gökyüzünden kelimeler yağar; yere inmeden onları klavyeden yazarsın. Yazdığın kelime kaybolur. Hem eğlenceli bir yazma alıştırması, hem de canvas'a yazı çizmeyi öğrenmek için güzel bir oyun.
Önce gökyüzü. Sayfada game adında 480×480 piksellik bir canvas (tuval) var; sağdaki alan o. Onu bulacağız,
çizim kalemini alacağız ve gece mavisine boyayacağız.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#020617'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```document → sayfanın kendisi. .getElementById('game') → "kimliği (id) game olan öğeyi bul".const canvas = → bulunan şeye canvas adını verir. const "bu ad hep aynı şeyi gösterecek" demektir.canvas.getContext('2d') → canvas'tan 2 boyutlu çizim kalemini ister. Adı ctx (context'in kısaltması);
bütün çizim satırları ctx. ile başlayacak.ctx.fillStyle = '#020617' → kalemin dolgu rengini seçer: neredeyse siyah bir gece mavisi. (# ile başlayan
kod bir renktir.)ctx.fillRect(0, 0, canvas.width, canvas.height) → içi dolu bir dikdörtgen çizer. Dört sayı sırayla: sol üst
köşenin x'i ve y'si, sonra genişlik ve yükseklik. Canvas'ta (0, 0) sol üst köşedir; x sağa, y
aşağı doğru büyür. canvas.width ve canvas.height tuvalin tam boyu, yani her yer boyanır.Kodu, editördeki üç yorum satırının (// ile başlayanlar; bilgisayar bunları okumaz, insan için nottur) altına
yaz. Kopyalama; kendin yaz, harf harf. Sonra Çalıştır'a bas: sağdaki alan gece mavisine dönmeli.
Beceriler: Canvas üzerine çizim