Workshop › Lunar Lander › Step 1 of 31

Lunar Lander: Random hills

Fire the engine and tilt the lander to touch down gently on the pad. Random terrain, gravity and thrust along an angle with sin and cos, rotating drawings, the rules of a safe landing, and debris when it goes wrong.

What we are doing

The moon's surface is a list of heights, one every 40 pixels. Random heights make hills. First we only make the list.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

const STEP = 40 // the ground is a line through a point every STEP pixels

let ground // y of the ground at x = 0, STEP, 2 * STEP, ...

function makeGround() {
  const points = canvas.width / STEP + 1
  ground = Array.from({ length: points }, () => 210 + Math.random() * 120)
}

makeGround()
```

What it means

Your turn

Write the code under the three comment lines, then press Run.

Skills: Arrays and objects

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