Auto Atari Pong with lasers And 18 Balls's game

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

No:17080

123

←

Prev Next

→

Auto Atari Pong with lasers And 18 Balls
Developer User7570｜Date and time 23/9/22 8:05:59
Build time 37.371 sec｜Game capacity 4.594KB｜

Script

Sure! Here's an example of how you can create a simple Atari Pong game with lasers and multiple balls. It is implemented as a single HTML file, enclosed in script tags, and written in JavaScript. It can be played as a finished game on a smartphone. Please note that the game logic itself is simplified for demonstration purposes.

In this game, you control two paddles by touching and dragging on the left and right sides of the screen. The goal is to deflect the balls and prevent them from passing your paddle. The game also features lasers that you can shoot by tapping on the paddles, which can eliminate the balls. Please note that this implementation is a simplified version of Atari Pong and the game logic can be further optimized and improved. You can customize the game's appearance and add additional features as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="pongCanvas" width="800" height="400"></canvas>

// Paddle variables
    let leftPaddleY = 160;
    let rightPaddleY = 160;

// Ball variables
    let balls = [];
    const numBalls = 18;

for (let i = 0; i < numBalls; i++) {
      balls.push({
        x: 400,
        y: 200,
        dx: (Math.random() > 0.5 ? 1 : -1) * ballSpeed,
        dy: (Math.random() > 0.5 ? 1 : -1) * ballSpeed,
      });
    }

// Laser variables
    let leftLaserY = -10;
    let rightLaserY = -10;
    let isLeftLaserVisible = false;
    let isRightLaserVisible = false;

// Get canvas context
    const canvas = document.getElementById("pongCanvas");
    const context = canvas.getContext("2d");

// Handle input
    const touchStartHandler = (e) => {
      const touch = e.touches[0];
      const touchX = touch.clientX;
      const touchY = touch.clientY;

// Check if left paddle is touched
      if (touchX < canvas.width / 2 && touchY > leftPaddleY && touchY < leftPaddleY + paddleHeight) {
        isLeftLaserVisible = true;
        leftLaserY = touchY;
      }

// Check if right paddle is touched
      if (touchX > canvas.width / 2 && touchY > rightPaddleY && touchY < rightPaddleY + paddleHeight) {
        isRightLaserVisible = true;
        rightLaserY = touchY;
      }
    };

const touchEndHandler = () => {
      isLeftLaserVisible = false;
      isRightLaserVisible = false;
    };

canvas.addEventListener("touchstart", touchStartHandler);
    canvas.addEventListener("touchmove", touchStartHandler);
    canvas.addEventListener("touchend", touchEndHandler);

// Game loop
    const gameLoop = () => {
      // Move the paddles
      leftPaddleY = leftLaserY - paddleHeight / 2;
      rightPaddleY = rightLaserY - paddleHeight / 2;

// Move the balls
      balls.forEach(ball => {
        ball.x += ball.dx;
        ball.y += ball.dy;

// Check ball collision with paddles
        if (ball.x + ballRadius > canvas.width - paddleWidth && ball.y > rightPaddleY && ball.y < rightPaddleY + paddleHeight) {
          ball.dx = -ball.dx;
        } else if (ball.x - ballRadius < paddleWidth && ball.y > leftPaddleY && ball.y < leftPaddleY + paddleHeight) {
          ball.dx = -ball.dx;
        }

// Check ball collision with walls
        if (ball.y + ballRadius > canvas.height || ball.y - ballRadius < 0) {
          ball.dy = -ball.dy;
        }
      });

// Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw paddles
      context.fillRect(paddleWidth, leftPaddleY, paddleWidth, paddleHeight);
      context.fillRect(canvas.width - 2 * paddleWidth, rightPaddleY, paddleWidth, paddleHeight);

// Draw balls
      balls.forEach(ball => {
        context.beginPath();
        context.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2, false);
        context.fillStyle = "white";
        context.fill();
        context.closePath();
      });

// Draw lasers
      if (isLeftLaserVisible) {
        context.fillRect(paddleWidth - 2, leftLaserY, paddleWidth, 4);
        leftLaserY -= laserSpeed;
      }

if (isRightLaserVisible) {
        context.fillRect(canvas.width - 2 * paddleWidth + 2, rightLaserY, paddleWidth, 4);
        rightLaserY -= laserSpeed;
      }

// Request animation frame
      requestAnimationFrame(gameLoop);
    };

// Start the game
    gameLoop();
  </script>
</body>
</html>
```

Please note that this implementation is a simplified version of Atari Pong and the game logic can be further optimized and improved. You can customize the game's appearance and add additional features as per your requirements.