Atölye › OutRun Tarzı Yarış › 1/44. adım
Gerçek 3B'den önce atari yarış oyunlarının yaptığı gibi, sahte 3B'de kıvrılan bir yolda yarış. Perspektif izdüşümü, uzaktan yakına boyama, virajların çekişine karşı direksiyon, uzaklaştıkça küçülen arabalar ve tur süreleri.
Seksenlerin atari yarış oyunlarında gerçek 3B yoktu, ama yol üstüne üstüne akardı. Bu oyunda o hileyi parça parça kuracağız.
İlk iş manzara: üstte mavi bir gökyüzü, altta yeşil bir zemin. İkisinin birleştiği çizgi, ileride yolun uzakta kaybolacağı ufuk olacak.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const W = canvas.width
const H = canvas.height
ctx.fillStyle = '#7dd3fc'
ctx.fillRect(0, 0, W, H)
ctx.fillStyle = '#15803d'
ctx.fillRect(0, H / 2, W, H / 2)
```document.getElementById('game') → sayfada kimliği game olan canvas'ı (tuvali) bulur. const canvas = ona
bir ad verir.canvas.getContext('2d') → tuvalin 2B çizim aracını verir; fırça gibi düşün. Bütün çizimi ctx ile yapacağız.W ve H → tuvalin eni (480) ve boyu (320). Sayıları her yere yazmak yerine bu kısa adları kullanacağız.ctx.fillStyle = '#7dd3fc' → fırçaya renk sürer (açık mavi). Renkler # ile başlayan kodlarla yazılır.ctx.fillRect(x, y, en, boy) → o renkle bir dikdörtgen boyar. İlki bütün tuvali maviye boyar.H / 2'den (160) başlar ve H / 2 boyundadır: alt yarıyı koyu yeşile boyar.(0, 0)'dır; x sağa, y aşağı doğru büyür.Kodu editördeki üç yorum satırının (// ile başlayanlar) altına yaz. Çalıştır'a bas: üst yarı mavi, alt yarı
yeşil olmalı.
Beceriler: Canvas üzerine çizim