Workshop › Lunar Lander › Step 3 of 31

A landing pad

What we are doing

Somewhere among the hills there must be a flat place to land: three points in a row get the same height. That is the pad, drawn as a green bar.

```js
let pad // { x1, x2, y }: the flat landing pad

// Random hills, with one flat stretch: the pad.

  const width = 2
  const start = 1 + Math.floor(Math.random() * (points - 2 - width))
  const y = 250 + Math.random() * 70
  for (let i = start; i <= start + width; i++) ground[i] = y
  pad = { x1: start * STEP, x2: (start + width) * STEP, y }

  ctx.fillStyle = '#22c55e'
  ctx.fillRect(pad.x1, pad.y - 2, pad.x2 - pad.x1, 4)
```

What it means

Your turn

  1. Under let ground ... write let pad with its comment; above function makeGround() { write the comment line.
  2. In makeGround, under the ground = ... line, write the five pad lines.
  3. In draw, under ctx.fill(), write the two green lines.

Skills: Arrays and objects, Drawing on a canvas

All steps

  1. Random hills
  2. Draw the hills
  3. A landing pad
  4. The height at any x
  5. The lander
  6. Draw it around its own middle
  7. Two feet
  8. The game loop
  9. Moon gravity
  10. Around the sides
  11. Flying or not
  12. Touching the ground
  13. Remember held keys
  14. Tilt
  15. The engine
  16. A flickering flame
  17. Fuel
  18. Touch controls
  19. Landing or crashing
  20. Fly again
  21. Landed or crashed?
  22. Readouts
  23. Levels
  24. Score
  25. Next level or new game
  26. A narrower pad
  27. A high score
  28. Burst into pieces
  29. Pieces fall and fade
  30. Draw the wreck
  31. Build it yourself: wind