Workshop › Lunar Lander › Step 22 of 31
Four readouts at the top left show the fuel, the falling speed, the sideways speed and the tilt. Each is green while it is safe for landing and red when it is not.
```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)
})
```readouts is a list of pairs: the text, and whether it is fine.toFixed(1) writes a number with one decimal; angle * 180 / Math.PI turns radians into degrees.forEach(([text, ok], i) => ...) takes each pair apart into text and ok; i places them 18 pixels apart.In draw, above ctx.textAlign = 'center', write the readout lines, followed by an empty line.
Skills: Drawing on a canvas, Arrays and objects