Workshop › Pinball › Step 5 of 42

A ball in the lane

What we are doing

The ball is data: where it is (x, y) and how fast it goes (vx, vy). newBall() puts a fresh ball at the bottom of the launch lane.

```js
const R = 8 // ball radius
const LANE_X = 375 // the launch lane on the right

let ball // { x, y, vx, vy }

function newBall() {
  ball = { x: LANE_X, y: 570, vx: 0, vy: 0 }
}

newBall()
requestAnimationFrame(loop)
```

What it means

R is the ball's radius; LANE_X is the middle of the launch lane (between the walls at 360 and 390).
ball is declared empty; newBall() fills it with an object.
vx and vy are the velocity: how many pixels the ball moves each frame, sideways and down. 0 means it rests.
newBall() at the bottom makes the first ball before the loop starts.

Your turn

Above the // The walls... comment write R and LANE_X.
Under the WALLS list write let ball and newBall.
At the bottom, write newBall() right above requestAnimationFrame(loop).

Skills: Game states

← The game loop Draw the ball →

All steps