Atölye › Conway'in Hayat Oyunu › 30/32. adım
Telefonda klavye yok; bu yüzden ızgaranın altına beş düğme koyacağız: Play, Step, Random, Clear, Gun. Bu adımda onları çiziyoruz; tıklamayı bir sonraki adımda bağlayacağız.
Düğme adları bir listede durur. Canvas 480 piksel geniş, 5 düğme var: her birine 480 ÷ 5 = 96 piksel düşer. Dünya çalışırken Play düğmesinde Pause (duraklat) yazacak.
```js
const BAR_Y = TOP + ROWS * CELL + 12 // the row of buttons
const BUTTONS = ['Play', 'Step', 'Random', 'Clear', 'Gun']
const BUTTON_W = canvas.width / BUTTONS.length
BUTTONS.forEach((label, i) => {
ctx.fillStyle = '#334155'
ctx.fillRect(i * BUTTON_W + 4, BAR_Y, BUTTON_W - 8, 36)
ctx.fillStyle = 'white'
ctx.font = 'bold 16px sans-serif'
ctx.textAlign = 'center'
ctx.fillText(label === 'Play' && playing ? 'Pause' : label, i * BUTTON_W + BUTTON_W / 2, BAR_Y + 24)
})
```const BAR_Y = TOP + ROWS * CELL + 12 → düğme sırasının üst kenarı: ızgaranın bittiği yerin (36 + 384 = 420)
12 piksel altı, yani 432.const BUTTONS = [...] → beş düğmenin adı. BUTTONS.length → listenin eleman sayısı: 5.const BUTTON_W = canvas.width / BUTTONS.length → bir düğmenin payı: 480 / 5 = 96 piksel. / bölme demek.BUTTONS.forEach((label, i) => { ... }) → her düğme için bir kez: label adı, i sırası (0...4).ctx.fillRect(i * BUTTON_W + 4, BAR_Y, BUTTON_W - 8, 36) → i. düğmenin kutusu. Her yandan 4 piksel içeri
çekeriz (+ 4, - 8) ki düğmeler arasında boşluk kalsın. Yüksekliği 36.ctx.textAlign = 'center' → yazıyı verdiğin x'e ortalar; x de kutunun ortası:
i * BUTTON_W + BUTTON_W / 2.label === 'Play' && playing ? 'Pause' : label → "bu Play düğmesiyse ve dünya çalışıyorsa Pause yaz,
değilse kendi adını".const TOP = 36 satırının altına üç düğme sabitini yaz (SPEED satırı onların altında kalır).draw içinde, iki döngünün kapanışından ( }) sonra bir boş satır bırak ve forEach bloğunu yaz. Generation
yazısını çizen satırlar onun altında kalır.Beceriler: Canvas üzerine çizim, Diziler ve nesneler
← Topu ateşle Düğmelere dokun →