Atölye › Ay'a İniş › 22/31. adım
Oyuncu kuralları görebilmeli. Sol üste dört gösterge koyacağız: yakıt, düşme hızı, yana hız ve eğim. Değer iniş için güvenliyse yeşil, değilse kırmızı. Gizli kurallar görünür olunca zor bir oyun adil hissettirir; oyuncu neden düştüğünü görür ve öğrenir.
SAFE'teki aynı sayılar renkleri de belirleyecek: kurallar hâlâ tek bir yerde.
```js
// Readouts: green while the value is safe for landing, red when it is not.
const readouts = [
['Fuel ' + lander.fuel, lander.fuel > 50],
['Down ' + lander.vy.toFixed(1), lander.vy <= SAFE.vy],
['Side ' + lander.vx.toFixed(1), Math.abs(lander.vx) <= SAFE.vx],
['Tilt ' + Math.round((lander.angle * 180) / Math.PI) + '°', Math.abs(lander.angle) <= SAFE.angle],
]
ctx.font = 'bold 14px monospace'
ctx.textAlign = 'left'
readouts.forEach(([text, ok], i) => {
ctx.fillStyle = ok ? '#4ade80' : '#f87171'
ctx.fillText(text, 10, 20 + i * 18)
})
```const readouts = [ [...], [...], ... ] → çiftlerden oluşan bir liste: her çift [yazı, iyi mi].lander.vy.toFixed(1) → sayıyı tek ondalıkla yazar: 0.4375 → '0.4'.(lander.angle * 180) / Math.PI → radyanı dereceye çevirir (π radyan = 180°). Math.round tam sayıya yuvarlar.ctx.font = 'bold 14px monospace' → her harfi aynı genişlikte bir yazı tipi: sayılar değişirken yazı titremez.readouts.forEach(([text, ok], i) => { ... }) → [text, ok] her çifti iki ada ayırır. i sıra numarası:
20 + i * 18 ile satırlar 18 piksel arayla alt alta gelir.ok ? '#4ade80' : '#f87171' → iyiyse yeşil, değilse kırmızı.draw içinde ctx.textAlign = 'center' satırının üstüne gösterge satırlarını yaz; altlarında bir boş satır
kalsın. Çalıştır: sol üstte dört gösterge görmelisin. Düşerken Down'un kırmızıya döndüğü anı izle.
Beceriler: Canvas üzerine çizim, Diziler ve nesneler
← İndin mi, düştün mü? Bölümler →