Workshop › OutRun-style Racer › Step 14 of 44

The gas pedal

What we are doing

The big moment: while up is held, the speed grows a little every frame, and the loop calls update every frame. The road starts to move.

```js
function update() {
  if (keys.ArrowUp) speed += 1.2

  position += speed
  if (position >= trackLength) position -= trackLength
}

function loop() {
  update()
  draw()
  requestAnimationFrame(loop)
}
```

What it means

Your turn

  1. In update, at the top, write the ArrowUp line and an empty line.
  2. In loop, above draw(), write update().

Skills: Keyboard and mouse input, The game loop

All steps

  1. Sky and ground
  2. Draw again and again
  3. Perspective
  4. One piece of road
  5. A road made of segments
  6. Where we are on the track
  7. The road ahead
  8. Stripes
  9. Paint from far to near
  10. Kerbs and a center line
  11. Striped grass
  12. Moving is one number
  13. Which keys are down?
  14. The gas pedal
  15. Brake, coast and a top speed
  16. Your car
  17. Speedometer
  18. A pedal for phones
  19. Move the camera sideways
  20. Steering
  21. No turning on the spot
  22. The grass is slow
  23. Steering by touch
  24. A track with curves
  25. Bend the road
  26. No jumps in the curve
  27. Which segment am I on?
  28. Curves pull you outwards
  29. Other cars
  30. Distance on a loop
  31. Cars that shrink with distance
  32. Traffic moves
  33. Rear-end crash
  34. Counting laps
  35. Show the lap
  36. A lap timer
  37. Show the time
  38. Best lap
  39. Show the best lap
  40. Racing or finished
  41. The finish line
  42. Finished!
  43. Race again
  44. Build it yourself: beat the clock