Auto Atari Pong with lasers's game

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

No:17071

114

←

Prev Next

→

Auto Atari Pong with lasers
Developer User7570｜Date and time 23/9/22 7:37:50
Build time 35.598 sec｜Game capacity 4.075KB｜

Script

Sure! Here's an implementation of a simple Atari Pong game with lasers in a single HTML file using JavaScript:

You can open the file in any web browser to play the game. Move your mouse vertically on the game canvas to control the player's paddle and try to hit the ball while avoiding the computer's paddle. When you hit the ball with the player's paddle, a laser will appear momentarily and move towards the right side of the screen. The game will reset if the ball goes beyond the left or right side of the canvas.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an implementation of a simple Atari Pong game with lasers in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Auto Atari Pong with Lasers</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="pong" width="800" height="400"></canvas>

// Paddle variables
    const paddleWidth = 10, paddleHeight = 100;
    const player = { x: 0, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "#f44336", dy: 10 };
    const computer = { x: canvas.width - paddleWidth, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "#2196f3", dy: 4 };

// Ball variables
    const ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 10, speed: 4, dx: 4, dy: 4, color: "#ffeb3b" };

// Laser variables
    const laser = { x: 0, y: 0, width: 10, height: 4, dx: 8, visible: false, color: "#4caf50" };

// Move paddles
    function movePaddle(event) {
      const rect = canvas.getBoundingClientRect();

player.y = event.clientY - rect.top - player.height / 2;
    }

// Draw paddles
    function drawPaddle(x, y, width, height, color) {
      context.fillStyle = color;
      context.fillRect(x, y, width, height);
    }

// Draw ball
    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();
    }

// Draw laser
    function drawLaser() {
      if (laser.visible) {
        context.fillStyle = laser.color;
        context.fillRect(laser.x, laser.y, laser.width, laser.height);
      }
    }

// Update laser position
    function updateLaser() {
      if (laser.visible) {
        laser.x += laser.dx;

if (laser.x + laser.width > canvas.width) {
          laser.visible = false;
        }
      }
    }

// Update ball 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 < player.x + player.width && ball.y > player.y && ball.y < player.y + player.height) {
        ball.dx *= -1;
        laser.visible = true;
        laser.x = ball.x + ball.radius;
        laser.y = ball.y - laser.height / 2;
      }

if (ball.x + ball.radius > computer.x && ball.y > computer.y && ball.y < computer.y + computer.height) {
        ball.dx *= -1;
      }

if (ball.x - ball.radius < 0) {
        resetBall();
      }

if (ball.x + ball.radius > canvas.width) {
        ball.dx *= -1;
      }
    }

// Reset ball position
    function resetBall() {
      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;
      ball.dx = -ball.dx;
      ball.dy = -ball.dy;
    }

// Update game canvas
    function update() {
      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);
      drawLaser();

updateBall();
      updateLaser();

requestAnimationFrame(update);
    }

// Start the game
    canvas.addEventListener("mousemove", movePaddle);
    update();
  </script>
</body>
</html>
```