Auto Atari Pong with lasers And 12 Balls's game

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

No:17072

118

←

Prev Next

→

Auto Atari Pong with lasers And 12 Balls
Developer User7570｜Date and time 23/9/22 7:40:23
Build time 31.971 sec｜Game capacity 3.87KB｜

Script

Sure! Here's a sample code for an auto Atari Pong game with lasers and 12 balls implemented as a single HTML file using JavaScript:

This code sets up an HTML canvas element and uses JavaScript to draw the game elements, including the paddles, balls, and lasers. The player can control the paddle on a smartphone by touching and moving it vertically. The balls bounce off the paddle, walls, and each other. When a ball hits the paddle, lasers are fired from that position. The lasers move towards the left side of the canvas. The game runs in a continuous loop using `requestAnimationFrame`.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure! Here's a sample code for an auto Atari Pong game with lasers and 12 balls implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Auto Atari Pong</title>
    <style>
      canvas {
        border: 1px solid black;
        background-color: #F5F5F5;
      }
    </style>
  </head>
  <body>
    <canvas id="pongCanvas" width="800" height="400"></canvas>

// Paddle Variables
      const paddleWidth = 10;
      const paddleHeight = 100;
      let paddleY = canvas.height / 2 - paddleHeight / 2;

// Ball Variables
      const ballSize = 20;
      let ballX = canvas.width / 2;
      let ballY = canvas.height / 2;
      let ballSpeedX = 2;
      let ballSpeedY = 2;

// Laser Variables
      const Laser = function (x, y, speed) {
        this.x = x;
        this.y = y;
        this.speed = speed;

this.draw = function () {
          context.fillStyle = "red";
          context.fillRect(this.x, this.y, 10, 2);
        };

this.update = function () {
          this.x -= this.speed;
        };
      };

const lasers = [];

// Add 12 balls
      const balls = [...Array(12)].map(() => ({
        x: Math.random() * (canvas.width - ballSize),
        y: Math.random() * (canvas.height - ballSize),
        speedX: (Math.random() - 0.5) * 4,
        speedY: (Math.random() - 0.5) * 4,
      }));

function drawPaddle() {
        context.fillStyle = "#000";
        context.fillRect(canvas.width - paddleWidth, paddleY, paddleWidth, paddleHeight);
      }

function drawBall(x, y) {
        context.fillStyle = "#000";
        context.beginPath();
        context.arc(x, y, ballSize / 2, 0, Math.PI * 2, false);
        context.fill();
      }

function drawLasers() {
        lasers.forEach((laser) => laser.draw());
      }

function movePaddle(evt) {
        const rect = canvas.getBoundingClientRect();
        paddleY = evt.touches[0].clientY - rect.top - paddleHeight / 2;
      }

function gameLoop() {
        context.clearRect(0, 0, canvas.width, canvas.height);

drawPaddle();
        drawLasers();

// Move balls
        balls.forEach((ball) => {
          ball.x += ball.speedX;
          ball.y += ball.speedY;

if (ball.x + ballSize / 2 > canvas.width - paddleWidth && ball.y + ballSize > paddleY && ball.y < paddleY + paddleHeight) {
            ball.speedX = -ball.speedX;
            const laserSpeed = Math.abs(ball.speedX) * 5;
            lasers.push(new Laser(ball.x, ball.y + ballSize / 2, laserSpeed));
          }

if (ball.x + ballSize >= canvas.width || ball.x <= 0) {
            ball.speedX = -ball.speedX;
          }

if (ball.y + ballSize >= canvas.height || ball.y <= 0) {
            ball.speedY = -ball.speedY;
          }

drawBall(ball.x, ball.y);
        });

updateLasers();

requestAnimationFrame(gameLoop);
      }

document.addEventListener("touchmove", movePaddle, false);

gameLoop();
    </script>
  </body>
</html>
```