Retro Ping Pong Game JavaScript with Special Rounds

768 iroger7

<!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>

CSS

Retro Ping Pong Game JavaScript with Special Rounds

Recommended