GameSpark/Tutorials Open editor ↗
Build Wall Ball · Step 1 of 6

The play field

Every game starts with something on screen. Wall Ball is easy to picture: your paddle on the left, and a solid wall down the right edge for the ball to bounce off. We keep the paddle’s vertical position in a variable, paddleY, so we can move it later.

Here’s the whole starting program — replace the code in the editor with it, then save:

let paddleY = 54;
const PH = 20;

function draw() {
  cls(0);
  rectfill(124, 0, 127, 127, 6);
  rectfill(6, paddleY, 8, paddleY + PH, 7);
}

rectfill(x1, y1, x2, y2, color) draws a filled rectangle between two corners. The wall is a tall bar on the right (x 124–127, top to bottom); your paddle is a short bar on the left, PH pixels tall.

💡

We used const PH = 20 for the paddle height because it never changes. Naming it once means we can make the paddle taller later by editing a single number — and every place that uses PH updates at once.