Atölye › Yazı Yağmuru › 8/33. adım
Kelimeleri elle yazmak yerine uzun bir kelime listesinden rastgele seçeceğiz. spawn (doğur) fonksiyonu ekranın
tepesine yeni bir kelime koyacak.
Kelimenin yatay yeri de rastgele olacak; ama kelime ekranın sağından taşmamalı. Bunun için kelimenin kaç piksel geniş olacağını bilmeliyiz. Canvas bunu ölçebilir: önce yazı tipini ayarlarsın, sonra "şu yazı ne kadar geniş?" diye sorarsın.
```js
const WORDS = [
'cat', 'sun', 'code', 'game', 'jump', 'fast', 'loop', 'byte', 'star', 'tree', 'rain', 'blue', 'fire', 'wind', 'moon',
'array', 'pixel', 'mouse', 'score', 'level', 'robot', 'light', 'music', 'space', 'river', 'green', 'cloud', 'train',
'planet', 'rocket', 'string', 'number', 'button', 'screen', 'window', 'random', 'object', 'player', 'dragon', 'puzzle',
'keyboard', 'function', 'variable', 'computer', 'triangle', 'elephant', 'mountain', 'sandwich',
]
function spawn() {
const text = WORDS[Math.floor(Math.random() * WORDS.length)]
ctx.font = FONT
const width = ctx.measureText(text).width
words.push({ text, x: 10 + Math.random() * (canvas.width - 20 - width), y: 30 })
}
```WORDS → 48 kelimelik bir liste; hepsi küçük harf. Satırlar sadece okunsun diye bölündü.Math.random() → 0 ile 1 arasında rastgele bir sayı (0.73 gibi). * WORDS.length → 0 ile 48 arası.
Math.floor → aşağı yuvarlar: 35.04 → 35. Yani listeden rastgele bir sıra numarası.WORDS[...] → o sıradaki kelime. Liste numaraları 0'dan başlar.ctx.font = FONT ve ctx.measureText(text).width → önce yazı tipini ayarla, sonra yazının genişliğini
piksel olarak ölç.10 + Math.random() * (canvas.width - 20 - width) → soldan en az 10 piksel içeride; en sağda da kelimenin sonu
kenara 10 piksel kalacak kadar. 480 genişlikte 60 piksellik bir kelime için x 10 ile 410 arası.words.push({ ... }) → listenin sonuna yeni bir kelime ekler. text tek başına, text: text'in kısaltması.
y: 30 → tepede, skor yazısının hemen altında.const GROUND = ... satırının üstüne WORDS listesini yaz (ya da buradan kopyala: bu kod değil, bir kelime
listesi).function reset() { satırının üstüne spawn fonksiyonunu yaz; altında bir boş satır kalsın.spawn'ı çağırmıyor; ekran değişmez.Beceriler: Diziler ve nesneler
← Oyun döngüsü Yağmur başlasın →