Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Simple Ping Pong Game</title>
<style>
  body {
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    background: #000;
    display: block;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>

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

  // Paddle properties
  const paddleWidth = 10;
  const paddleHeight = 80;

  // Positions
  let leftPaddleY = (canvas.height - paddleHeight) / 2;
  let rightPaddleY = (canvas.height - paddleHeight) / 2;

  // Ball properties
  let ballX = canvas.width / 2;
  let ballY = canvas.height / 2;
  let ballRadius = 8;
  let ballSpeedX = 4;
  let ballSpeedY = 4;

  // Movement flags
  let wPressed = false;
  let sPressed = false;
  let upPressed = false;
  let downPressed = false;

  // Event listeners for keys
  document.addEventListener('keydown', keyDownHandler);
  document.addEventListener('keyup', keyUpHandler);

  function keyDownHandler(e) {
    if (e.key === 'w' || e.key === 'W') wPressed = true;
    if (e.key === 's' || e.key === 'S') sPressed = true;
    if (e.key === 'ArrowUp') upPressed = true;
    if (e.key === 'ArrowDown') downPressed = true;
  }

  function keyUpHandler(e) {
    if (e.key === 'w' || e.key === 'W') wPressed = false;
    if (e.key === 's' || e.key === 'S') sPressed = false;
    if (e.key === 'ArrowUp') upPressed = false;
    if (e.key === 'ArrowDown') downPressed = false;
  }

  // Draw everything
  function draw() {
    // Clear screen
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw left paddle
    ctx.fillStyle = 'white';
    ctx.fillRect(10, leftPaddleY, paddleWidth, paddleHeight);

    // Draw right paddle
    ctx.fillRect(canvas.width - paddleWidth - 10, rightPaddleY, paddleWidth, paddleHeight);

    // Draw ball
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
  }

  // Move paddles
  function movePaddles() {
    const paddleSpeed = 5;
    if (wPressed && leftPaddleY > 0) {
      leftPaddleY -= paddleSpeed;
    }
    if (sPressed && leftPaddleY < canvas.height - paddleHeight) {
      leftPaddleY += paddleSpeed;
    }
    if (upPressed && rightPaddleY > 0) {
      rightPaddleY -= paddleSpeed;
    }
    if (downPressed && rightPaddleY < canvas.height - paddleHeight) {
      rightPaddleY += paddleSpeed;
    }
  }

  // Move ball
  function moveBall() {
    ballX += ballSpeedX;
    ballY += ballSpeedY;

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

    // Left paddle collision
    if (ballX - ballRadius < 20 && ballY > leftPaddleY && ballY < leftPaddleY + paddleHeight) {
      ballSpeedX = -ballSpeedX;
    }

    // Right paddle collision
    if (ballX + ballRadius > canvas.width - 20 && ballY > rightPaddleY && ballY < rightPaddleY + paddleHeight) {
      ballSpeedX = -ballSpeedX;
    }

    // If the ball goes off screen left or right, just reset it
    if (ballX + ballRadius < 0 || ballX - ballRadius > canvas.width) {
      ballX = canvas.width / 2;
      ballY = canvas.height / 2;
      ballSpeedX = -ballSpeedX;
      ballSpeedY = 4; // Reset in case it got wild
    }
  }

  function gameLoop() {
    movePaddles();
    moveBall();
    draw();
    requestAnimationFrame(gameLoop);
  }

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