Atölye › Pong › 2/26. adım

Siyah saha

Ne yapıyoruz

İlk çizimimizi yapıyoruz: bütün canvas'ı siyaha boyayacağız; eski salon oyunlarının ekranı gibi. Burası saha.

Çizim hep iki hareketle olur: önce kalemin rengini seçersin, sonra o renkle bir şekli doldurursun. Boyacı gibi: fırçayı boyaya bandır, sonra duvara sür.

```js
ctx.fillStyle = 'black'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```

Ne işe yarıyor

• ctx.fillStyle = 'black' → kalemin dolgu rengini seçer. Renkler 'black' gibi İngilizce adla ya da # ile başlayan kodla yazılır.
• ctx.fillRect(0, 0, canvas.width, canvas.height) → içi dolu bir dikdörtgen boyar. Dört sayı sırayla:
  • 0, 0 → dikdörtgenin sol üst köşesi. Canvas'ta (0, 0) sol üst köşedir; x sağa, y aşağı doğru büyür (okuldaki grafiğin tersine).
  • canvas.width, canvas.height → genişlik ve yükseklik: canvas'ın kendi eni ve boyu (600 ve 400). Yani bütün tuval.

Sıra sende

const ctx = ... satırının altında bir satır boşluk bırak, iki satırı yaz ve Çalıştır'a bas. Oyun alanı siyaha boyanmalı.

Beceriler: Canvas üzerine çizim

← Canvas'ı ve kalemi al Filenin bir parçası →

Tüm adımlar

1. Canvas'ı ve kalemi al
2. Siyah saha
3. Filenin bir parçası
4. Bütün file
5. İki raket
6. Çizen bir fonksiyon
7. Oyun döngüsü
8. Basılı tuşları hatırla
9. Raketleri oynat
10. Sahada kal
11. Top
12. Top hareket eder
13. Üstten ve alttan sek
14. Top rakete değiyor mu?
15. Raketler geri vurur
16. Yeniden servis
17. Skoru tut
18. Skoru göster
19. Beşe ilk ulaşan
20. Kim kazandı?
21. Yeniden oyna
22. Raketle nişan al
23. Her vuruşta hızlan
24. Bilgisayar rakip
25. Tek ya da iki oyuncu
26. Kendin yap: servis beklemesi