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;
    }
    #reset {
      margin-top: 10px;
      padding: 8px 16px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="score">Player 1: 0 | Player 2: 0</div>
  <canvas id="game" width="800" height="500"></canvas>
  <button id="reset">Reset</button>

  <script>
    const canvas = document.getElementById("game");
    const ctx = canvas.getContext("2d");
    const scoreDisplay = document.getElementById("score");
    const resetBtn = document.getElementById("reset");

    const paddleHeight = 100;
    const paddleWidth = 10;
    const ballSize = 10;

    let player1Y = canvas.height / 2 - paddleHeight / 2;
    let player2Y = canvas.height / 2 - paddleHeight / 2;
    let player1Score = 0;
    let player2Score = 0;

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

    const keys = {};

    document.addEventListener("keydown", e => (keys[e.key] = true));
    document.addEventListener("keyup", e => (keys[e.key] = false));

    resetBtn.addEventListener("click", () => {
      player1Score = 0;
      player2Score = 0;
      resetBall();
      updateScore();
    });

    function updateScore() {
      scoreDisplay.textContent = `Player 1: ${player1Score} | Player 2: ${player2Score}`;
    }

    function resetBall() {
      ballX = canvas.width / 2;
      ballY = canvas.height / 2;
      ballSpeedX *= Math.random() > 0.5 ? 1 : -1;
      ballSpeedY = 3 * (Math.random() > 0.5 ? 1 : -1);
    }

    function gameLoop() {
      // Move paddles
      if (keys["w"] && player1Y > 0) player1Y -= 6;
      if (keys["s"] && player1Y + paddleHeight < canvas.height) player1Y += 6;
      if (keys["ArrowUp"] && player2Y > 0) player2Y -= 6;
      if (keys["ArrowDown"] && player2Y + paddleHeight < canvas.height) player2Y += 6;

      // Move ball
      ballX += ballSpeedX;
      ballY += ballSpeedY;

      // Wall collision
      if (ballY <= 0 || ballY + ballSize >= canvas.height) ballSpeedY *= -1;

      // Paddle collision
      if (
        ballX <= paddleWidth &&
        ballY + ballSize > player1Y &&
        ballY < player1Y + paddleHeight
      ) {
        ballSpeedX *= -1;
      }

      if (
        ballX + ballSize >= canvas.width - paddleWidth &&
        ballY + ballSize > player2Y &&
        ballY < player2Y + paddleHeight
      ) {
        ballSpeedX *= -1;
      }

      // Scoring
      if (ballX < 0) {
        player2Score++;
        updateScore();
        resetBall();
      }

      if (ballX > canvas.width) {
        player1Score++;
        updateScore();
        resetBall();
      }

      // Draw everything
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Middle line
      ctx.fillStyle = "#444";
      for (let i = 0; i < canvas.height; i += 30) {
        ctx.fillRect(canvas.width / 2 - 1, i, 2, 20);
      }

      // Paddles
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, player1Y, paddleWidth, paddleHeight);
      ctx.fillRect(canvas.width - paddleWidth, player2Y, paddleWidth, paddleHeight);

      // Ball
      ctx.fillRect(ballX, ballY, ballSize, ballSize);

      requestAnimationFrame(gameLoop);
    }

    updateScore();
    gameLoop();
  </script>
</body>
</html>
Editor is loading...