Auto Atari Pong with a spike ball's game

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

No:17026

115

←

Prev Next

→

Auto Atari Pong with a spike ball
Developer User7570｜Date and time 23/9/22 6:37:18
Build time 44.897 sec｜Game capacity 4.757KB｜

Script

Sure, here's an example of a simple Atari Pong game implemented using HTML, CSS, and JavaScript as a single HTML file:

In this implementation, the game features a player-controlled paddle on the left side of the screen, and an AI-controlled paddle on the right side. The goal is to hit the ball with the paddle and prevent it from crossing the player's side. The game ends if the ball crosses the player's side, and it will reset to the starting position. Note: This is a basic implementation of Atari Pong and can be further enhanced with additional features, such as keeping score, adding levels, etc.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure, here's an example of a simple Atari Pong game implemented using HTML, CSS, and JavaScript as a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      
      canvas {
        background: #000;
        display: block;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <canvas id="pong" width="800" height="400"></canvas>
    
    <script>
      const canvas = document.getElementById("pong");
      const context = canvas.getContext("2d");
      
      // Create the Paddle
      const paddleWidth = 10, paddleHeight = 100;
      const player = { x: 0, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "#FFF", dy: 8 };
      const computer = { x: canvas.width - paddleWidth, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "#FFF", dy: 4 };
      
      function drawPaddle(x, y, width, height, color) {
        context.fillStyle = color;
        context.fillRect(x, y, width, height);
      }
      
      // Create the Ball
      const ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 10, speed: 4, dx: 4, dy: 4, color: "#FF0000" };
      
      function drawBall(x, y, radius, color) {
        context.fillStyle = color;
        context.beginPath();
        context.arc(x, y, radius, 0, Math.PI * 2, false);
        context.closePath();
        context.fill();
      }
      
      // Update the Paddle's position
      function updatePaddle() {
        player.y += player.dy;
        computer.y += (ball.y - (computer.y + computer.height / 2)) * 0.1; // Computer AI movement
        
        if (player.y < 0) {
          player.y = 0;
        }
        if (player.y + player.height > canvas.height) {
          player.y = canvas.height - player.height;
        }
        if (computer.y < 0) {
          computer.y = 0;
        }
        if (computer.y + computer.height > canvas.height) {
          computer.y = canvas.height - computer.height;
        }
      }
      
      // Update the Ball's position
      function updateBall() {
        ball.x += ball.dx;
        ball.y += ball.dy;
        
        if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
          ball.dy *= -1;
        }
        
        if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
          resetBall();
        }
        
        // Check collision with paddles
        if (
          ball.x - ball.radius < player.x + player.width &&
          ball.y - ball.radius < player.y + player.height &&
          ball.y + ball.radius > player.y
        ) {
          ball.dx *= -1;
        }
        
        if (
          ball.x + ball.radius > computer.x &&
          ball.y - ball.radius < computer.y + computer.height &&
          ball.y + ball.radius > computer.y
        ) {
          ball.dx *= -1;
        }
      }
      
      // Reset the Ball's position
      function resetBall() {
        ball.x = canvas.width / 2;
        ball.y = canvas.height / 2;
        ball.dx = -ball.dx;
      }
      
      // Draw the game objects
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawPaddle(player.x, player.y, player.width, player.height, player.color);
        drawPaddle(computer.x, computer.y, computer.width, computer.height, computer.color);
        drawBall(ball.x, ball.y, ball.radius, ball.color);
      }
      
      // Update the game state
      function update() {
        updatePaddle();
        updateBall();
      }
      
      // Game Loop function
      function gameLoop() {
        draw();
        update();
      }
      
      // Keyboard controls
      document.addEventListener("keydown", function(event) {
        if (event.key === "ArrowUp") {
          player.dy = -8;
        }
        if (event.key === "ArrowDown") {
          player.dy = 8;
        }
      });
      
      document.addEventListener("keyup", function(event) {
        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
          player.dy = 0;
        }
      });
      
      // Start the game
      setInterval(gameLoop, 1000 / 60); // 60 frames per second
    </script>
  </body>
</html>
```

Note: This is a basic implementation of Atari Pong and can be further enhanced with additional features, such as keeping score, adding levels, etc.