Auto Atari Pong with lasers And 18 Balls's game

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

No:17079

121

←

Prev Next

→

Auto Atari Pong with lasers And 18 Balls
Developer User7570｜Date and time 23/9/22 8:04:58
Build time 36.97 sec｜Game capacity 4.62KB｜

Script

Sure! Here's an example of a simple Atari Pong game with lasers and 18 balls implemented as a single HTML file:

To play the game, you can open the HTML file in a web browser on your smartphone. The game consists of two paddles (controlled by the player and the computer) and 18 balls. The objective is to prevent the balls from hitting your paddle by moving it up and down using the ArrowUp and ArrowDown keys on your smartphone's keyboard. The computer-controlled paddle will also try to block the balls.

←

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 with lasers and 18 balls implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Atari Pong with Lasers and 18 Balls</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>

const PADDLE_WIDTH = 10; // Width of the paddles
    const PADDLE_HEIGHT = 60; // Height of the paddles
    const PADDLE_SPEED = 8; // Speed of the paddles

const BALL_RADIUS = 10; // Radius of the balls
    const BALL_SPEED = 3; // Speed of the balls

let player = {
      x: 0,
      y: canvas.height / 2 - PADDLE_HEIGHT / 2,
      width: PADDLE_WIDTH,
      height: PADDLE_HEIGHT,
      dy: 0
    };

let computer = {
      x: canvas.width - PADDLE_WIDTH,
      y: canvas.height / 2 - PADDLE_HEIGHT / 2,
      width: PADDLE_WIDTH,
      height: PADDLE_HEIGHT,
      dy: 0
    };

let balls = []; // Array to store the balls

// Create 18 balls
    for (let i = 0; i < 18; i++) {
      balls.push({
        x: canvas.width / 2,
        y: canvas.height / 2,
        dx: Math.random() > 0.5 ? BALL_SPEED : -BALL_SPEED,
        dy: Math.random() > 0.5 ? BALL_SPEED : -BALL_SPEED
      });
    }

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

function keyDownHandler(e) {
      if (e.key === 'ArrowUp') {
        player.dy = -PADDLE_SPEED;
      } else if (e.key === 'ArrowDown') {
        player.dy = PADDLE_SPEED;
      }
    }

function keyUpHandler(e) {
      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        player.dy = 0;
      }
    }

// Collision detection between paddles and balls
    function checkCollision() {
      balls.forEach(ball => {
        // Check collision with player paddle
        if (
          ball.x + BALL_RADIUS > player.x &&
          ball.y > player.y &&
          ball.y < player.y + player.height
        ) {
          ball.dx *= -1; // Reverse the horizontal direction
        }

// Check collision with computer paddle
        if (
          ball.x - BALL_RADIUS < computer.x + computer.width &&
          ball.y > computer.y &&
          ball.y < computer.y + computer.height
        ) {
          ball.dx *= -1; // Reverse the horizontal direction
        }

// Check collision with walls
        if (ball.y + BALL_RADIUS > canvas.height || ball.y - BALL_RADIUS < 0) {
          ball.dy *= -1; // Reverse the vertical direction
        }

// Update ball position
        ball.x += ball.dx;
        ball.y += ball.dy;
      });
    }

// Update the computer's paddle position based on the ball's y position
    function updateComputer() {
      const ball = balls[0]; // Only track the first ball for simplicity
      
      if (computer.y + computer.height / 2 < ball.y) {
        computer.dy = PADDLE_SPEED;
      } else if (computer.y + computer.height / 2 > ball.y) {
        computer.dy = -PADDLE_SPEED;
      } else {
        computer.dy = 0;
      }

computer.y += computer.dy;
    }

// Draw the paddles and balls on the canvas
    function draw() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player paddle
      ctx.fillStyle = 'blue';
      ctx.fillRect(player.x, player.y, player.width, player.height);

// Draw computer paddle
      ctx.fillStyle = 'red';
      ctx.fillRect(computer.x, computer.y, computer.width, computer.height);

// Draw balls
      ctx.fillStyle = 'green';
      balls.forEach(ball => {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, BALL_RADIUS, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
      });
    }

// Game loop
    function update() {
      checkCollision();
      updateComputer();
      draw();
    }

setInterval(update, 10); // Run the game loop every 10ms
  </script>
</body>
</html>
```