Skip to main content

Building Pong in p5.js

Welcome to the Pong tutorial! You're about to create one of the most classic video games ever made.

What is Pong?​

Pong is the original arcade video game from 1972. It's a simple tennis-style game where:

  • Two paddles move up and down
  • A ball bounces between them
  • Players score when the opponent misses
  • First to reach the score limit wins

What You'll Build​

By the end of this tutorial, you'll have a fully functional Pong game with:

  • ✅ Two paddles controlled by keyboard
  • ✅ A ball that moves and bounces realistically
  • ✅ Collision detection with paddles and walls
  • ✅ Score tracking for both players
  • ✅ Game over and restart functionality

Prerequisites​

What You Need to Know​

Before starting, you should understand:

  • Basic p5.js structure - setup() and draw() functions
  • Variables - Storing and changing values
  • Shapes - Drawing rectangles and circles
  • Conditionals - Using if statements

If you're new to p5.js, check out the intro tutorial first!

What You'll Learn​

This tutorial will teach you:

  • Game physics (velocity, bouncing)
  • Collision detection between objects
  • Two-player input handling
  • Score systems and win conditions
  • Resetting and restarting games

Why Pong?​

Pong is perfect for learning because it includes:

  • Core game mechanics - Movement, collision, scoring
  • Simple physics - Ball bouncing is easy to understand
  • Two-player gameplay - Learn to handle multiple inputs
  • Quick to build - See results fast!
  • Room to expand - Add power-ups, AI, sounds, etc.

Tools You'll Use​

p5.js Web Editor​

We'll use the p5.js Web Editor at https://editor.p5js.org/

Why the Web Editor?

  • No installation required
  • Write and test code instantly
  • Share your game with friends
  • Works on any computer

Just p5.js​

This tutorial uses only p5.js - no extra libraries needed!

Game Breakdown​

Here's how we'll build it:

Step 1: Basic Setup​

  • Create the canvas
  • Draw paddles and ball
  • Set up variables

Step 2: Paddle Movement​

  • Move left paddle with W/S keys
  • Move right paddle with arrow keys
  • Keep paddles on screen

Step 3: Ball Movement​

  • Make ball move automatically
  • Bounce off top and bottom walls
  • Add speed variables

Step 4: Paddle Collision​

  • Detect when ball hits paddles
  • Make ball bounce back
  • Change direction based on hit location

Step 5: Scoring System​

  • Detect when ball goes off screen
  • Award points to players
  • Display scores on screen

Step 6: Game Over & Reset​

  • Check for win condition
  • Display winner
  • Restart game functionality

Step 7: Polish & Complete​

  • Add visual improvements
  • Fine-tune ball speed
  • Full working code

Expected Time​

  • Total time: 30-45 minutes
  • Each step: 5-7 minutes
  • Take your time and experiment!

Tips Before You Start​

  1. Type the code - Don't just copy/paste. Typing helps you learn!
  2. Test often - Run your code after each section
  3. Experiment - Change numbers and see what happens
  4. Debug patiently - Everyone makes mistakes, that's how we learn
  5. Have fun - This is about learning through play!

Getting Help​

If you get stuck:

  • Read the error messages carefully
  • Check the Common Elements reference
  • Compare your code to the examples
  • Take a break and come back fresh

Ready to Start?​

Let's build Pong! Head to the Basic Setup to create your canvas and game objects.

Remember: Every game developer started with simple games like this. You're following in the footsteps of game development history! 🎮

Next Step: Basic Setup - Creating the Canvas and Objects