AI game creator

Click here for free DL of the app version that can save data.

No:27637

102

←

Prev Next

→

Pong game
Developer User13736｜Date and time 23/12/8 0:28:53
Build time 45.411 sec｜Game capacity 4.105KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<style>
  * {
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
  }
  
  #canvas {
    background-color: black;
    display: block;
    margin: 0 auto;
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
  // Pong game in JavaScript
  
  // Initialize canvas and context
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  
  // Set canvas dimensions
  canvas.width = document.body.clientWidth;
  canvas.height = document.body.clientHeight;
  
  // Set up paddle size and position
  var paddleWidth = 10;
  var paddleHeight = 100;
  var paddleMargin = 20;
  
  var leftPaddle = {
    x: paddleMargin,
    y: canvas.height / 2 - paddleHeight / 2,
    width: paddleWidth,
    height: paddleHeight,
    color: '#FFFFFF',
    dy: 10  // paddle speed
  };
  
  var rightPaddle = {
    x: canvas.width - paddleMargin - paddleWidth,
    y: canvas.height / 2 - paddleHeight / 2,
    width: paddleWidth,
    height: paddleHeight,
    color: '#FFFFFF',
    dy: 10  // paddle speed
  };
  
  // Set up ball size, position, and speed
  var ballSize = 10;
  var ball = {
    x: canvas.width / 2 - ballSize / 2,
    y: canvas.height / 2 - ballSize / 2,
    width: ballSize,
    height: ballSize,
    color: '#FFFFFF',
    dx: 5,  // ball's x-axis speed
    dy: 5   // ball's y-axis speed
  };
  
  // Draw paddles on the canvas
  function drawPaddle(x, y, width, height, color) {
    context.fillStyle = color;
    context.fillRect(x, y, width, height);
  }
  
  // Draw ball on the canvas
  function drawBall(x, y, width, height, color) {
    context.fillStyle = color;
    context.fillRect(x, y, width, height);
  }
  
  // Move paddles based on key events
  function movePaddles() {
    document.addEventListener('keydown', function(event) {
      // W key
      if (event.keyCode === 87) {
        leftPaddle.y -= leftPaddle.dy;
      }
      // S key
      if (event.keyCode === 83) {
        leftPaddle.y += leftPaddle.dy;
      }
      // Up Arrow key
      if (event.keyCode === 38) {
        rightPaddle.y -= rightPaddle.dy;
      }
      // Down Arrow key
      if (event.keyCode === 40) {
        rightPaddle.y += rightPaddle.dy;
      }
    });
  }
  
  // Update the canvas for each animation frame
  function updateCanvas() {
    // Clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw paddles
    drawPaddle(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height, leftPaddle.color);
    drawPaddle(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height, rightPaddle.color);
    
    // Draw ball
    drawBall(ball.x, ball.y, ball.width, ball.height, ball.color);
    
    // Move ball
    ball.x += ball.dx;
    ball.y += ball.dy;
    
    // Bounce off the top and bottom walls
    if (ball.y <= 0 || ball.y + ball.height >= canvas.height) {
      ball.dy *= -1;
    }
    
    // Bounce off the paddles
    if (ball.x <= leftPaddle.x + leftPaddle.width && ball.y + ball.height >= leftPaddle.y && ball.y <= leftPaddle.y + leftPaddle.height) {
      ball.dx *= -1;
    }
    
    if (ball.x + ball.width >= rightPaddle.x && ball.y + ball.height >= rightPaddle.y && ball.y <= rightPaddle.y + rightPaddle.height) {
      ball.dx *= -1;
    }
    
    // Check for game over
    if (ball.x <= 0) {
      alert('Player 2 wins!');
      restartGame();
    }
    
    if (ball.x + ball.width >= canvas.width) {
      alert('Player 1 wins!');
      restartGame();
    }
    
    // Request the next animation frame
    requestAnimationFrame(updateCanvas);
  }
  
  // Restart the game
  function restartGame() {
    leftPaddle.y = canvas.height / 2 - paddleHeight / 2;
    rightPaddle.y = canvas.height / 2 - paddleHeight / 2;
    ball.x = canvas.width / 2 - ballSize / 2;
    ball.y = canvas.height / 2 - ballSize / 2;
    ball.dx = 5;
    ball.dy = 5;
  }
  
  // Start the game
  function startGame() {
    movePaddles();
    updateCanvas();
  }
  
  // Start the game when the page is loaded
  window.onload = startGame;
</script>
</body>
</html>