Paddle Movement - Keyboard Controls

Let's make the paddles move! We'll use W/S keys for the left paddle and arrow keys for the right paddle.

Step 1: Add Speed Variable

First, let's add a variable to control how fast the paddles move:

// Left paddle
let leftPaddleY = 200;
let paddleWidth = 10;
let paddleHeight = 80;
let paddleSpeed = 5;  // NEW: How fast paddles move

// Right paddle
let rightPaddleY = 200;

Breaking it down

• paddleSpeed = 5 - Paddles will move 5 pixels per frame when keys are pressed
• Higher number = faster movement
• Lower number = slower, more controlled movement

Step 2: Move Left Paddle with W and S

Add this code in the draw() function, after drawing the center line:

function draw() {
  background(0);
  
  // Draw center line
  stroke(255);
  strokeWeight(2);
  for (let i = 0; i < height; i += 20) {
    line(width / 2, i, width / 2, i + 10);
  }
  noStroke();
  
  // Left paddle movement (W and S keys)
  if (keyIsDown(87)) {  // W key
    leftPaddleY -= paddleSpeed;
  }
  if (keyIsDown(83)) {  // S key
    leftPaddleY += paddleSpeed;
  }
  
  // Draw left paddle
  fill(255);
  rect(20, leftPaddleY, paddleWidth, paddleHeight);
  
  // Draw right paddle
  rect(770, rightPaddleY, paddleWidth, paddleHeight);
  
  // Draw ball
  circle(ballX, ballY, ballSize);
}

Breaking it down

• keyIsDown(87) - Checks if W key is pressed (87 is the key code for W)
• leftPaddleY -= paddleSpeed - Moves paddle UP by subtracting from Y position
  • Remember: Y = 0 is at the TOP of the screen
  • Smaller Y = higher up
• keyIsDown(83) - Checks if S key is pressed (83 is key code for S)
• leftPaddleY += paddleSpeed - Moves paddle DOWN by adding to Y position
  • Larger Y = lower down

Test it: Press W and S keys - the left paddle should move up and down!

Step 3: Move Right Paddle with Arrow Keys

Now add controls for the right paddle:

  // Left paddle movement (W and S keys)
  if (keyIsDown(87)) {  // W key
    leftPaddleY -= paddleSpeed;
  }
  if (keyIsDown(83)) {  // S key
    leftPaddleY += paddleSpeed;
  }
  
  // Right paddle movement (Arrow keys)
  if (keyIsDown(UP_ARROW)) {
    rightPaddleY -= paddleSpeed;
  }
  if (keyIsDown(DOWN_ARROW)) {
    rightPaddleY += paddleSpeed;
  }

Breaking it down

• UP_ARROW - Built-in p5.js constant for the up arrow key
• DOWN_ARROW - Built-in constant for down arrow key
• Same logic as left paddle: subtract to go up, add to go down
• Both paddles can move at the same time (two-player ready!)

Test it: Press arrow keys - the right paddle should move! Try moving both paddles at once!

Step 4: Keep Paddles on Screen

Problem: Paddles can move off the screen! Let's fix that:

  // Left paddle movement (W and S keys)
  if (keyIsDown(87)) {  // W key
    leftPaddleY -= paddleSpeed;
  }
  if (keyIsDown(83)) {  // S key
    leftPaddleY += paddleSpeed;
  }
  
  // Keep left paddle on screen
  leftPaddleY = constrain(leftPaddleY, 0, height - paddleHeight);
  
  // Right paddle movement (Arrow keys)
  if (keyIsDown(UP_ARROW)) {
    rightPaddleY -= paddleSpeed;
  }
  if (keyIsDown(DOWN_ARROW)) {
    rightPaddleY += paddleSpeed;
  }
  
  // Keep right paddle on screen
  rightPaddleY = constrain(rightPaddleY, 0, height - paddleHeight);

Breaking it down

• constrain(value, min, max) - Keeps value between min and max
• leftPaddleY = constrain(leftPaddleY, 0, height - paddleHeight)
  • Minimum: 0 (top of screen)
  • Maximum: height - paddleHeight (bottom of screen minus paddle height)
  • If paddle goes too high, it stops at 0
  • If it goes too low, it stops at 400 - 80 = 320
• Same logic for right paddle

Test it: Try moving paddles to the edges - they should stop at the top and bottom!

Complete Paddle Movement Code

Here's everything together:

// Left paddle
let leftPaddleY = 200;
let paddleWidth = 10;
let paddleHeight = 80;
let paddleSpeed = 5;

// Right paddle
let rightPaddleY = 200;

// Ball
let ballX = 400;
let ballY = 200;
let ballSize = 15;

function setup() {
  createCanvas(800, 400);
}

function draw() {
  background(0);
  
  // Draw center line
  stroke(255);
  strokeWeight(2);
  for (let i = 0; i < height; i += 20) {
    line(width / 2, i, width / 2, i + 10);
  }
  noStroke();
  
  // Left paddle movement (W and S keys)
  if (keyIsDown(87)) {  // W key
    leftPaddleY -= paddleSpeed;
  }
  if (keyIsDown(83)) {  // S key
    leftPaddleY += paddleSpeed;
  }
  
  // Keep left paddle on screen
  leftPaddleY = constrain(leftPaddleY, 0, height - paddleHeight);
  
  // Right paddle movement (Arrow keys)
  if (keyIsDown(UP_ARROW)) {
    rightPaddleY -= paddleSpeed;
  }
  if (keyIsDown(DOWN_ARROW)) {
    rightPaddleY += paddleSpeed;
  }
  
  // Keep right paddle on screen
  rightPaddleY = constrain(rightPaddleY, 0, height - paddleHeight);
  
  // Draw left paddle
  fill(255);
  rect(20, leftPaddleY, paddleWidth, paddleHeight);
  
  // Draw right paddle
  rect(770, rightPaddleY, paddleWidth, paddleHeight);
  
  // Draw ball
  circle(ballX, ballY, ballSize);
}

Understanding Key Codes

You might wonder why we use numbers for W and S:

Key	Code	p5.js Constant
W	87	(none)
S	83	(none)
Up Arrow	38	UP_ARROW
Down Arrow	40	DOWN_ARROW

• Arrow keys have built-in constants
• Letter keys use their ASCII codes
• Both methods work the same way!

What You Learned

In this step, you:

• ✅ Added paddle movement with keyboard controls
• ✅ Used W/S for left paddle, arrows for right paddle
• ✅ Learned about keyIsDown() for continuous input
• ✅ Used constrain() to keep paddles on screen
• ✅ Created responsive two-player controls

What's Next?

The paddles move perfectly, but the ball is still stuck in the center! Next, we'll make the ball move automatically and bounce off the top and bottom walls.

Coming up: Ball physics and wall bouncing!

---

Next Step: Ball Movement - Adding Physics