Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>2-Player Pong</title>
  <style>
    body {
      margin: 0;
      background: #000;
      color: #fff;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }
    canvas {
      background: #111;
      border: 2px solid white;
    }
    #score {
      margin: 10px;
      font-size: 24px;
    }
    button {
      margin: 5px;
      padding: 8px 16px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<canvas id="gameCanvas" width="800" height="500"></canvas>

<div class="controls">
  <button onclick="resetGame()">Reset</button>
  <button onclick="togglePause()">{{ Pause }}</button>
</div>

<div class="score" id="scoreDisplay">Player 1: 0 | Player 2: 0</div>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const paddleWidth = 10, paddleHeight = 100;
let leftPaddleY = canvas.height / 2 - paddleHeight / 2;
let rightPaddleY = canvas.height / 2 - paddleHeight / 2;

let upPressed = false, downPressed = false;
let wPressed = false, sPressed = false;

let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballRadius = 8;
let ballSpeed = 4;
let ballAngleX = ballSpeed, ballAngleY = ballSpeed;

let score1 = 0, score2 = 0;
let isPaused = false;
let hitCount = 0;

function drawPaddle(x, y) {
  ctx.fillStyle = 'white';
  ctx.fillRect(x, y, paddleWidth, paddleHeight);
}

function drawBall() {
  ctx.beginPath();
  ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = 'white';
  ctx.fill();
  ctx.closePath();
}

function drawScores() {
  document.getElementById('scoreDisplay').innerText = `Player 1: ${score1} | Player 2: ${score2}`;
}

function resetBall() {
  ballX = canvas.width / 2;
  ballY = canvas.height / 2;
  ballAngleX = (Math.random() > 0.5 ? 1 : -1) * ballSpeed;
  ballAngleY = (Math.random() > 0.5 ? 1 : -1) * ballSpeed;
  hitCount = 0;
}

function resetGame() {
  score1 = 0;
  score2 = 0;
  ballSpeed = 4;
  resetBall();
  drawScores();
  if (isPaused) togglePause(); // resume if paused
}

function togglePause() {
  isPaused = !isPaused;
}

function draw() {
  if (isPaused) return requestAnimationFrame(draw);

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawPaddle(0, leftPaddleY);
  drawPaddle(canvas.width - paddleWidth, rightPaddleY);
  drawBall();
  drawScores();

  // Move paddles
  if (wPressed && leftPaddleY > 0) leftPaddleY -= 6;
  if (sPressed && leftPaddleY < canvas.height - paddleHeight) leftPaddleY += 6;
  if (upPressed && rightPaddleY > 0) rightPaddleY -= 6;
  if (downPressed && rightPaddleY < canvas.height - paddleHeight) rightPaddleY += 6;

  // Ball movement
  ballX += ballAngleX;
  ballY += ballAngleY;

  // Top and bottom wall collision
  if (ballY - ballRadius < 0 || ballY + ballRadius > canvas.height) {
    ballAngleY = -ballAngleY;
  }

  // Paddle collision
  if (
    ballX - ballRadius < paddleWidth &&
    ballY > leftPaddleY && ballY < leftPaddleY + paddleHeight
  ) {
    ballAngleX = Math.abs(ballAngleX);
    hitCount++;
  } else if (
    ballX + ballRadius > canvas.width - paddleWidth &&
    ballY > rightPaddleY && ballY < rightPaddleY + paddleHeight
  ) {
    ballAngleX = -Math.abs(ballAngleX);
    hitCount++;
  }

  // Increase speed every 7 hits
  if (hitCount >= 7) {
    ballSpeed += 0.1;
    ballAngleX = ballAngleX > 0 ? ballSpeed : -ballSpeed;
    ballAngleY = ballAngleY > 0 ? ballSpeed : -ballSpeed;
    hitCount = 0;
  }

  // Scoring
  if (ballX < 0) {
    score2++;
    resetBall();
  } else if (ballX > canvas.width) {
    score1++;
    resetBall();
  }

  requestAnimationFrame(draw);
}

document.addEventListener('keydown', e => {
  if (e.key === 'w') wPressed = true;
  if (e.key === 's') sPressed = true;
  if (e.key === 'ArrowUp') upPressed = true;
  if (e.key === 'ArrowDown') downPressed = true;
});

document.addEventListener('keyup', e => {
  if (e.key === 'w') wPressed = false;
  if (e.key === 's') sPressed = false;
  if (e.key === 'ArrowUp') upPressed = false;
  if (e.key === 'ArrowDown') downPressed = false;
});

draw();
</script>

</body>
</html>
Editor is loading...