Workshop › Connect Four › Step 19 of 38

Gravity

What we are doing

Gravity is two lines: every frame the speed grows a little, then the position changes by the speed. When the disc reaches the middle of its hole, it lands. update does this, and the loop calls it every frame.

```js
const GRAVITY = 1.2

function update() {
  if (falling) {
    falling.vy += GRAVITY
    falling.y += falling.vy
    const bottom = TOP + falling.row * CELL + CELL / 2
    if (falling.y >= bottom) {
      falling.y = bottom
      land()
    }
  }
}

  update()
```

What it means

+= adds: the speed grows by 1.2 each frame, and the position by the speed.
bottom is the middle of the target hole. Once y reaches it, the disc is snapped there and lands.
loop calls update() before draw().

Your turn

Under TOP write GRAVITY.
Above function disc( write update, followed by an empty line.
In loop, above draw(), write update().

Skills: Velocity and gravity, The game loop

← A disc on its way Watch it fall →

All steps