How to Build a Colorful Ping Pong Game in JavaScript

Ping Pong Game

You: 0    |    Computer: 0

You control the paddle on the left • Computer is on the right

Building a Colorful Ping Pong Game Using HTML Canvas (With a Fun Twist)

If you’ve ever wanted to make your own small game without jumping into big engines like Unity or Unreal, congratulations — you’re in the right place. Today we’re building a tiny yet flashy Ping Pong game using HTML, CSS, and JavaScript. Yes, the same JavaScript that constantly reminds you of semicolons you forget to add.

Let’s break down how this little beast works.

---

 1. The Canvas — Our Game’s Playground

At the heart of the game is this simple line:

<canvas id="pongGame" width="700" height="400"></canvas>

Think of the <canvas> as a blank painting board.
Whatever we draw using JavaScript — the paddles, ball, background — appears here.

We also style it a bit:

background:#1a1a1a;
border:3px solid #00eaff;
border-radius:10px;

Basically giving our game the “gamer RGB setup” look.

---

2. Scoreboard: Because Winning Matters

We show two scores:

• You (the player)

• Computer (your surprisingly confident AI opponent)

let userScore = 0;
let compScore = 0;

These update every time the ball flies out of the screen like it’s escaping responsibilities.

---

3. Paddle Setup — The Players of the Game

We create two paddles:

Your paddle

Placed on the left side, controlled by your mouse.

AI paddle

Placed on the right side, chasing the ball like a cat chasing a laser pointer.

let paddleHeight = 80;
let paddleWidth = 12;

Player movement:

document.addEventListener("mousemove", (e) => {
  const rect = canvas.getBoundingClientRect();
  playerY = e.clientY - rect.top - paddleHeight / 2;
});

Wherever your mouse goes vertically, your paddle follows.
(Magical, right?)

---

 4. Ball Setup — The Star of the Show

We create a simple square ball:

let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 4;
let ballSpeedY = 3;

It moves diagonally, bounces off walls, and occasionally betrays you by scoring for the computer.

---

 

5. Game Loop — The Engine That Runs Everything

The function that repeats forever:

requestAnimationFrame(gameLoop);

This calls update() and then draw() about 60 times per second.
Think of it as the heartbeat of the game.

---

6. Game Logic — Where the Real Action Happens

➤ Ball Movement

ballX += ballSpeedX;
ballY += ballSpeedY;

➤ Collision with top and bottom walls

if (ballY <= 0 || ballY + ballSize >= canvas.height) {
  ballSpeedY *= -1;
}

The ball basically says:

“Nope, not going through that wall,”
and changes direction.

 

---

7. Paddle Collision — Defending Your Side

When the ball touches your paddle, we reverse its X direction:

ballSpeedX *= -1;

Simple. Effective. Very Kung Fu Pong.

---

8. AI Paddle Movement — Your Opponent

The AI follows the ball smoothly:

if (aiY + paddleHeight / 2 < ballY) aiY += 3;
else aiY -= 3;

The computer pretends to be smart, but really it just follows the ball like a stalker with no personal boundaries.

---

9. Scoring System

When the ball escapes on the left → Computer scores
When it escapes on the right → You score

if (ballX < 0) compScore++;
if (ballX > canvas.width) userScore++;

Each time, we reset the ball:

resetBall();

So the game doesn’t end instantly like your New Year’s resolutions.

---

10. Drawing the Game — Colors, Colors Everywhere

The background uses a stylish blue gradient:

let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, "#09203f");
gradient.addColorStop(1, "#537895");

Paddles get neon colors:

• Player paddle → Neon Green
• AI paddle → Neon Red
• Ball → Neon Yellow

Because why not?
Games should look cool.

---

 Final Thoughts

This entire Ping Pong game is powered by:

• A single <canvas>
• A sprinkle of CSS
• A handful of JavaScript logic
• A dash of humor from the AI paddle

Despite its simplicity, this project teaches you core game development concepts:

• Game loops
• Collision detection
• Rendering on canvas
• Input handling
• AI behavior

If you understood this, congratulations — you're already thinking like a game developer.
If not… play the game a few times. The ball will teach you.