Retro Ping Pong Game JavaScript with Special Rounds

Open In Editor Publish Your Code

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Retro Ping Pong - 9 Special Rounds!</title>  
  <style>  
    html, body {  
      height: 100%;  
      margin: 0;  
      padding: 0;  
    }  
    body {  
      background: #181818;  
      display: flex;  
      align-items: center;  
      justify-content: center;  
      height: 100vh;  
      font-family: 'Courier New', Courier, monospace;  
    }  
    #game-container {  
      display: flex;  
      flex-direction: column;  
      align-items: center;  
    }  
    #game {  
      background: #000;  
      border: 6px solid #fff;  
      box-shadow: 0 0 30px #fff3, 0 0 4px #0ff inset;  
      display: block;  
    }  
    .info, .round {  
      margin: 10px 0 2px 0;  
      color: #fff;  
      font-size: 1.2em;  
      letter-spacing: 2px;  
      text-align: center;  
      text-shadow: 0 2px 8px #000d;  
    }  
    .btn {  
      background: #222;  
      color: #0ff;  
      border: 2px solid #0ff;  
      padding: 6px 16px;  
      border-radius: 4px;  
      cursor: pointer;  
      font-size: 1em;  
      margin-top: 12px;  
      transition: background 0.2s, color 0.2s;  
    }  
    .btn:hover { background: #0ff; color: #222; }  
    @media (max-width: 800px) {  
      #game { width: 98vw; height: 61vw; }  
    }  
  </style>  
</head>  
<body>  
<div id="game-container">  
  <div class="info">  
    <span id="score-l">0</span>  
    <span style="color:#0ff;"> : : </span>  
    <span id="score-r">0</span>  
  </div>  
  <div class="round" id="round-info">Round 1: Classic Pong</div>  
  <canvas width="750" height="450" id="game" aria-label="Retro Pong Game"></canvas>  
  <button class="btn" id="next-round-btn" style="display:none;">Next Round</button>  
</div>  
<script>  
/**  
 * Retro Ping Pong Game with CPU and 9 Special Rounds  
 * Accessible, keyboard controlled (W/S or Up/Down)  
 * CPU controls the right paddle  
 *   
 * Special rounds and features cycle at the end of each round.  
 */

// --- Game Constants ---  
const canvas = document.getElementById('game');  
const ctx = canvas.getContext('2d');  
const grid = 15;  
const paddleHeight = grid * 5;  
const paddleWidth = grid;  
const ballSize = grid;  
const maxPaddleY = canvas.height - grid - paddleHeight;  
const winScore = 5;

// --- Game State ---  
let round = 0;  
const rounds = [  
  { name: "Classic Pong", desc: "Normal play." },  
  { name: "Tiny Paddles", desc: "Paddles shrink by 50%!" },  
  { name: "Big Ball", desc: "Huge ball, easier to hit." },  
  { name: "Speed Up!", desc: "Ball and paddles are ultra fast." },  
  { name: "Invisible Ball", desc: "The ball blinks out randomly!" },  
  { name: "Wall Bounce", desc: "Ball bounces off top & bottom walls." },  
  { name: "Reverse Controls", desc: "Your paddle controls are reversed!" },  
  { name: "Ghost Paddle", desc: "Right paddle is semi-transparent and flickers." },  
  { name: "Multi-ball", desc: "A second ball joins the chaos!" }  
];

let leftScore = 0;  
let rightScore = 0;  
let playing = true;  
let showNextBtn = false;  
let reverseControls = false;  
let blinkInvisible = false;  
let multiBallActive = false;

// --- Game Objects ---  
let leftPaddle, rightPaddle, ball, ball2;

// --- Utility Functions ---  
function clamp(val, min, max) { return Math.max(min, Math.min(val, max)); }  
function randDir() { return Math.random() < 0.5 ? -1 : 1; }  
function resetScores() {  
  leftScore = 0;  
  rightScore = 0;  
  document.getElementById('score-l').textContent = leftScore;  
  document.getElementById('score-r').textContent = rightScore;  
}  
function updateScore() {  
  document.getElementById('score-l').textContent = leftScore;  
  document.getElementById('score-r').textContent = rightScore;  
}  
function nextRound() {  
  round = (round + 1) % rounds.length;  
  showRoundInfo();  
  setupRound();  
  resetScores();  
  playing = true;  
  document.getElementById('next-round-btn').style.display = "none";  
  requestAnimationFrame(loop);  
}  
function showRoundInfo() {  
  const roundElem = document.getElementById('round-info');  
  roundElem.textContent = `Round ${round+1}: ${rounds[round].name}`;  
  roundElem.title = rounds[round].desc;  
}

// --- Game Setup ---  
function setupRound() {  
  reverseControls = false;  
  blinkInvisible = false;  
  multiBallActive = false;

// Default sizes & speeds  
  let lPadHeight = paddleHeight;  
  let rPadHeight = paddleHeight;  
  let lPadAlpha = 1, rPadAlpha = 1;  
  let ballSz = ballSize;  
  let ballSpd = 6;  
  let paddleSpd = 7;  
  let wallBounce = false;

// Special rounds logic  
  switch(round) {  
    case 1: // Tiny Paddles  
      lPadHeight *= 0.5; rPadHeight *= 0.5;  
      break;  
    case 2: // Big Ball  
      ballSz *= 2;  
      break;  
    case 3: // Speed Up!  
      ballSpd = 12; paddleSpd = 13;  
      break;  
    case 4: // Invisible Ball  
      blinkInvisible = true;  
      break;  
    case 5: // Wall Bounce  
      wallBounce = true;  
      break;  
    case 6: // Reverse Controls  
      reverseControls = true;  
      break;  
    case 7: // Ghost Paddle  
      rPadAlpha = 0.3;  
      break;  
    case 8: // Multi-ball  
      multiBallActive = true;  
      break;  
  }

// Left Paddle (player)  
  leftPaddle = {  
    x: grid * 2,  
    y: (canvas.height - lPadHeight) / 2,  
    width: paddleWidth,  
    height: lPadHeight,  
    dy: 0,  
    speed: paddleSpd,  
    alpha: lPadAlpha  
  };  
  // Right Paddle (CPU)  
  rightPaddle = {  
    x: canvas.width - grid * 3,  
    y: (canvas.height - rPadHeight) / 2,  
    width: paddleWidth,  
    height: rPadHeight,  
    dy: 0,  
    speed: paddleSpd,  
    alpha: rPadAlpha  
  };  
  // Ball  
  ball = {  
    x: canvas.width / 2 - ballSz/2,  
    y: canvas.height / 2 - ballSz/2,  
    width: ballSz,  
    height: ballSz,  
    resetting: false,  
    dx: ballSpd * randDir(),  
    dy: ballSpd * randDir(),  
    speed: ballSpd,  
    wallBounce: wallBounce,  
    visible: true  
  };  
  // Multi-ball  
  if(multiBallActive) {  
    ball2 = {  
      x: canvas.width / 2 - ballSz/2,  
      y: canvas.height / 2 - ballSz/2 + 40,  
      width: ballSz,  
      height: ballSz,  
      resetting: false,  
      dx: -ballSpd * randDir(),  
      dy: -ballSpd * randDir(),  
      speed: ballSpd,  
      wallBounce: wallBounce,  
      visible: true  
    };  
  } else ball2 = null;  
}

// --- Collision Detection ---  
function collides(a, b) {  
  return a.x < b.x + b.width &&  
         a.x + a.width > b.x &&  
         a.y < b.y + b.height &&  
         a.y + a.height > b.y;  
}

// --- Keyboard Controls ---  
const keys = {};  
window.addEventListener('keydown', e=>{  
  keys[e.key.toLowerCase()] = true;  
});  
window.addEventListener('keyup', e=>{  
  keys[e.key.toLowerCase()] = false;  
});

// --- Game Loop ---  
function loop() {  
  if(!playing) return;  
  ctx.clearRect(0,0,canvas.width,canvas.height);

// Draw center line  
  ctx.save();  
  ctx.strokeStyle = "#0ff";  
  ctx.setLineDash([10, 15]);  
  ctx.beginPath();  
  ctx.moveTo(canvas.width/2, 0);  
  ctx.lineTo(canvas.width/2, canvas.height);  
  ctx.stroke();  
  ctx.setLineDash([]);  
  ctx.restore();

// Player Paddle Controls  
  let moveUp = keys['w'] || keys['arrowup'];  
  let moveDown = keys['s'] || keys['arrowdown'];  
  let speed = leftPaddle.speed;  
  if(reverseControls) [moveUp, moveDown] = [moveDown, moveUp];  
  if(moveUp) leftPaddle.y -= speed;  
  if(moveDown) leftPaddle.y += speed;  
  leftPaddle.y = clamp(leftPaddle.y, grid, canvas.height - grid - leftPaddle.height);

// CPU Paddle AI (simple follow the closest ball)  
  let targetY = ball.y + ball.height/2;  
  if(multiBallActive && Math.abs((ball2.x+ball2.width/2)-rightPaddle.x) < Math.abs((ball.x+ball.width/2)-rightPaddle.x))  
    targetY = ball2.y + ball2.height/2;  
  if(targetY < rightPaddle.y + rightPaddle.height/2 - 8) rightPaddle.y -= rightPaddle.speed;  
  else if(targetY > rightPaddle.y + rightPaddle.height/2 + 8) rightPaddle.y += rightPaddle.speed;  
  rightPaddle.y = clamp(rightPaddle.y, grid, canvas.height - grid - rightPaddle.height);

// Draw paddles  
  ctx.globalAlpha = leftPaddle.alpha ?? 1;  
  ctx.fillStyle = "#fff";  
  ctx.fillRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);  
  ctx.globalAlpha = rightPaddle.alpha ?? 1;  
  // Ghost/flicker effect for ghost paddle round  
  if(round === 7 && Math.random() < 0.5) ctx.globalAlpha *= 0.2 + Math.random()*0.2;  
  ctx.fillRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);  
  ctx.globalAlpha = 1;

// Ball(s) physics  
  handleBall(ball);  
  if(multiBallActive) handleBall(ball2);

// Draw ball(s)  
  if(!blinkInvisible || ball.visible) {  
    ctx.fillStyle = "#0ff";  
    ctx.shadowColor = "#fff";  
    ctx.shadowBlur = 8;  
    ctx.fillRect(ball.x, ball.y, ball.width, ball.height);  
    ctx.shadowBlur = 0;  
  }  
  if(multiBallActive && (!blinkInvisible || ball2.visible)) {  
    ctx.fillStyle = "#f3f312";  
    ctx.fillRect(ball2.x, ball2.y, ball2.width, ball2.height);  
  }

// Handle invisible ball blinking  
  if(blinkInvisible) {  
    if(Math.random() < 0.035) ball.visible = !ball.visible;  
    if(multiBallActive && Math.random() < 0.035) ball2.visible = !ball2.visible;  
  }

// Draw scores overlay  
  ctx.font = "32px Courier New, monospace";  
  ctx.textAlign = "center";  
  ctx.fillStyle = "#fff";  
  ctx.globalAlpha = 0.2;  
  ctx.fillText(`${leftScore}   :   ${rightScore}`, canvas.width/2, 44);  
  ctx.globalAlpha = 1;

// End round on win  
  if(leftScore >= winScore || rightScore >= winScore) {  
    playing = false;  
    document.getElementById('next-round-btn').style.display = "";  
    ctx.globalAlpha = 1;  
    ctx.fillStyle = "#fff";  
    ctx.font = "bold 38px Courier New, monospace";  
    ctx.textAlign = "center";  
    ctx.fillText(  
      leftScore >= winScore ? "You Win!" : "CPU Wins!",   
      canvas.width/2, canvas.height/2 - 20  
    );  
    ctx.font = "24px Courier New, monospace";  
    ctx.fillText("Click 'Next Round' to continue", canvas.width/2, canvas.height/2 + 30);  
    return;  
  }

requestAnimationFrame(loop);  
}

// --- Ball Physics Handler ---  
function handleBall(b) {  
  if(!b) return;  
  b.x += b.dx;  
  b.y += b.dy;  
  // Top/Bottom wall bounce  
  if(b.y < grid) { b.y = grid; b.dy *= -1; }  
  else if(b.y + b.height > canvas.height - grid) {   
    b.y = canvas.height - grid - b.height;   
    b.dy *= -1;   
  }  
  // Side walls  
  if(b.x < 0) {  
    rightScore++; updateScore(); resetBall(b, false);  
  }  
  if(b.x + b.width > canvas.width) {  
    leftScore++; updateScore(); resetBall(b, true);  
  }  
  // Paddle collisions  
  if(collides(b, leftPaddle)) {  
    b.x = leftPaddle.x + leftPaddle.width + 2;  
    b.dx = Math.abs(b.dx);  
    // Add angle based on where hit  
    let impact = ((b.y+b.height/2)-(leftPaddle.y+leftPaddle.height/2))/(leftPaddle.height/2);  
    b.dy = b.speed * impact * 0.8 + randDir()*0.5;  
  }  
  if(collides(b, rightPaddle)) {  
    b.x = rightPaddle.x - b.width - 2;  
    b.dx = -Math.abs(b.dx);  
    let impact = ((b.y+b.height/2)-(rightPaddle.y+rightPaddle.height/2))/(rightPaddle.height/2);  
    b.dy = b.speed * impact * 0.8 + randDir()*0.5;  
  }  
  // Wall bounce (special round)  
  if(round === 5) {  
    // Ball already bounces on top/bottom in normal mode  
    // (so nothing extra needed here)  
  }  
}

// --- Reset Ball after Score ---  
function resetBall(b, playerServeRight) {  
  b.x = canvas.width/2 - b.width/2;  
  b.y = canvas.height/2 - b.height/2 + (Math.random()-0.5)*60;  
  b.dx = b.speed * (playerServeRight ? 1 : -1);  
  b.dy = b.speed * randDir();  
  b.visible = true;  
}

// --- Accessibility: Focus canvas on load ---  
canvas.setAttribute('tabindex', '0');  
canvas.focus();

// --- Start Game ---  
document.getElementById('next-round-btn').onclick = nextRound;  
function startGame() {  
  round = 0;  
  showRoundInfo();  
  setupRound();  
  resetScores();  
  playing = true;  
  document.getElementById('next-round-btn').style.display = "none";  
  requestAnimationFrame(loop);  
}  
startGame();

/*  
  --- CONTROLS ---  
  W / S or Arrow Up / Arrow Down for player paddle  
  CPU controls right paddle  
  Special rounds rotate automatically  
*/  
</script>  
</body>  
</html>

Retro Ping Pong Game JavaScript with Special Rounds

Recommended

Street Fighter II Turbo HTML5 Game Emulator

Basket Random Game HTML5 Source Code

Virtual Keyboard HTML CSS JavaScript

HTML

CSS

JS

Recommended

Street Fighter II Turbo HTML5 Game Emulator

Basket Random Game HTML5 Source Code

Virtual Keyboard HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS