`data/artifacts/172f180e3161/hermes3-8b.html`

238 lines
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Two-Player Pong</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #000;
      color: white;
      font-family: 'Press Start 2P', cursive;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    canvas {
      background: #1e1e2e;
      display: block;
    }
    .score {
      font-size: 3em;
      text-shadow: 2px 2px 0 #000;
      margin: 0;
      padding: 10px;
      width: 100%;
      text-align: center;
      position: absolute;
      top: 10px;
      right: 0;
      left: 0;
    }
    .game-over {
      font-size: 5em;
      text-shadow: 4px 4px 0 #000;
      margin: 0;
      padding: 20px;
      width: 100%;
      text-align: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .restart {
      font-size: 2em;
      text-shadow: 1px 1px 0 #000;
      margin: 0;
      padding: 10px 20px;
      background-color: #e52d27;
      color: #fff;
      border-radius: 5px;
      display: inline-block;
      cursor: pointer;
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
</head>
<body>
<canvas id="pongCanvas" width="800" height="400"></canvas>
<div class="score">
  <span class="left-score">0</span> : <span class="right-score">0</span>
</div>
<div class="game-over" style="display:none;">Game Over</div>
<div class="restart" style="display:none;" onclick="init()">Press to Restart</div>
<script>
const canvas = document.getElementById('pongCanvas');
const ctx = canvas.getContext('2d');

const width = canvas.width;
const height = canvas.height;

let leftPaddle = { x: 20, y: (height - 100) / 2, width: 10, height: 100 };
let rightPaddle = { x: width - 30, y: (height - 100) / 2, width: 10, height: 100 };
let ball = {
  x: width / 2,
  y: height / 2,
  radius: 7,
  dx: 3,
  dy: 3,
  speed: 3
};
const leftScore = 0;
const rightScore = 0;
let gameOver = false;

const paddleSpeed = 6;
const winScore = 11;

function drawPaddle(paddle) {
  ctx.fillStyle = 'white';
  ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
}

function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  ctx.fillStyle = 'white';
  ctx.fill();
  ctx.closePath();
}

function movePaddles() {
  leftPaddle.y += (canvas.height - leftPaddle.height) / 2;
  rightPaddle.y += (canvas.height - rightPaddle.height) / 2;
}

function moveBall() {
  ball.x += ball.dx;
  ball.y += ball.dy;

  if (
    ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
    ball.y > leftPaddle.y &&
    ball.y < leftPaddle.y + leftPaddle.height
  ) {
    ball.x = leftPaddle.x + leftPaddle.width;
    ball.dx *= -1;

    const paddleTop = leftPaddle.y;
    const paddleBottom = leftPaddle.y + leftPaddle.height;
    const ballCenter = ball.y;
    
    if (ballCenter < (paddleTop + paddleBottom) / 2) {
      ball.dy = 4;
    } else {
      ball.dy = -4;
    }
  }

  if (
    ball.x + ball.radius > rightPaddle.x &&
    ball.y > rightPaddle.y &&
    ball.y < rightPaddle.y + rightPaddle.height
  ) {
    ball.x = rightPaddle.x - ball.radius;
    ball.dx *= -1;

    const paddleTop = rightPaddle.y;
    const paddleBottom = rightPaddle.y + rightPaddle.height;
    const ballCenter = ball.y;
    
    if (ballCenter < (paddleTop + paddleBottom) / 2) {
      ball.dy = 4;
    } else {
      ball.dy = -4;
    }
  }

  // Bounce off top and bottom
  if (ball.y - ball.radius < 0 || ball.y + ball.radius > height) {
    ball.dy *= -1;
  }

  // Score
  if (ball.x - ball.radius < 0) {
    rightScore++;
    resetBall();
  }

  if (ball.x + ball.radius > width) {
    leftScore++;
    resetBall();
  }
}

function resetBall() {
  ball.x = width / 2;
  ball.y = height / 2;
  ball.dx = (Math.random() > 0.5 ? -1 : 1) * ball.speed;
  ball.dy = (Math.random() - 0.5) * 4;
}

function drawScore() {
  ctx.font = '32px "Press Start 2P", cursive';
  ctx.fillStyle = 'white';
  
  ctx.fillText(leftScore, width / 4, 50);
  ctx.fillText(rightScore, 3 * width / 4, 50);
}

function update() {
  movePaddles();
  moveBall();
  drawScore();
}

function gameLoop() {
  if (gameOver) return;
  
  update();
  requestAnimationFrame(gameLoop);
}

function checkWin() {
  if (leftScore >= winScore || rightScore >= winScore) {
    gameOver = true;
    
    document.querySelector('.score').style.display = 'none';
    document.querySelector('.game-over').style.display = 'block';
  }
}

function init() {
  leftScore = 0;
  rightScore = 0;
  gameOver = false;
  
  resetBall();
  
  document.querySelector('.score .left-score').textContent = leftScore;
  document.querySelector('.score .right-score').textContent = rightScore;

  gameLoop();
}

document.addEventListener('keydown', function(e) {
  if (e.key === 'w') leftPaddle.y += -paddleSpeed;
  if (e.key === 's') leftPaddle.y += paddleSpeed;
  
  if (e.key === 'ArrowUp') rightPaddle.y += -paddleSpeed;
  if (e.key === 'ArrowDown') rightPaddle.y += paddleSpeed;
});

function playSound(type) {
  const audio = new Audio(`./sounds/${type}.mp3`);
  audio.volume = 0.2;
  audio.play();
}

init();
</script>
</body>
</html>