Return to Main Functional Lesson Page

Lesson 1: Paddle and Base Blocks

Goal: Learn how to move the paddle (player) left and right and create basic bricks.

Step 1: Make the paddle

We draw a rectangle at the bottom of the canvas.

let paddleHeight = 10;
let basePaddleWidth = 75;
let paddleWidth = basePaddleWidth;
let paddleX = (canvas.width - paddleWidth) / 2;

function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

Step 2: Move the paddle

We listen for keyboard input and update the paddleX position.

let rightPressed = false;
let leftPressed = false;

document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);

function keyDownHandler(e) {
  if (e.key === "Right" || e.key === "ArrowRight") rightPressed = true;
  else if (e.key === "Left" || e.key === "ArrowLeft") leftPressed = true;
}

function keyUpHandler(e) {
  if (e.key === "Right" || e.key === "ArrowRight") rightPressed = false;
  else if (e.key === "Left" || e.key === "ArrowLeft") leftPressed = false;
}

function updatePaddle() {
  if (rightPressed && paddleX < canvas.width - paddleWidth) paddleX += 7;
  else if (leftPressed && paddleX > 0) paddleX -= 7;
}

Explore:

  • Make your own block that moves left/right with the arrow keys.
  • Change its width/height and test how it feels.

👉 Click this for full source code

Interactive Demos Progression

Until base functionality - does not include advanced features

Use the right and left arrows to move the breaker.

1. Paddle Movement

2. Ball Bouncing

3. Paddle + Ball

4. Mini Breakout (Ball + Paddle + Bricks)