Atari Pong with a Mario Green Shell and a Red shell for all devices's game

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

No:17167

←

Prev Next

→

Atari Pong with a Mario Green Shell and a Red shel..ALL
Developer User7570｜Date and time 23/9/22 9:32:31
Build time 33.75 sec｜Game capacity 3.873KB｜

Script

Sure! Here's a simple implementation of Atari Pong with a Mario Green Shell and a Red Shell as paddles using JavaScript in a single HTML file:

You can copy the above code into a new HTML file and open it in any web browser to play the game. Use the up and down arrow keys to control the green shell paddle. The red shell paddle will be computer-controlled. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of Atari Pong with a Mario Green Shell and a Red Shell as paddles using JavaScript in a single HTML file:

```html
<!DOCTYPE html>
<html>

<head>
  <style>
    #pong {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>

// Game variables
    let canvas, context;
    let player, computer, ball;
    let upArrowPressed, downArrowPressed;

// Paddle object
    function Paddle(x, y) {
      this.x = x;
      this.y = y;
      this.width = PADDLE_WIDTH;
      this.height = PADDLE_HEIGHT;
      this.dy = 0;
    }

// Ball object
    function Ball() {
      this.x = WIDTH / 2;
      this.y = HEIGHT / 2;
      this.radius = BALL_RADIUS;
      this.speed = BALL_SPEED;
      this.dx = this.speed;
      this.dy = this.speed;
    }

// Initialize the game
    function init() {
      canvas = document.getElementById("pong");
      context = canvas.getContext("2d");

canvas.width = WIDTH;
      canvas.height = HEIGHT;

player = new Paddle(10, HEIGHT / 2 - PADDLE_HEIGHT / 2);
      computer = new Paddle(WIDTH - PADDLE_WIDTH - 10, HEIGHT / 2 - PADDLE_HEIGHT / 2);
      ball = new Ball();

upArrowPressed = false;
      downArrowPressed = false;

document.addEventListener("keydown", keyDownHandler);
      document.addEventListener("keyup", keyUpHandler);

setInterval(update, 1000 / 60); // 60 FPS
    }

// Handle key down event
    function keyDownHandler(event) {
      if (event.key === "ArrowUp") {
        upArrowPressed = true;
      } else if (event.key === "ArrowDown") {
        downArrowPressed = true;
      }
    }

// Handle key up event
    function keyUpHandler(event) {
      if (event.key === "ArrowUp") {
        upArrowPressed = false;
      } else if (event.key === "ArrowDown") {
        downArrowPressed = false;
      }
    }

// Update game objects and draw on canvas
    function update() {
      // Clear canvas
      context.clearRect(0, 0, WIDTH, HEIGHT);

// Move paddles
      if (upArrowPressed && player.y > 0) {
        player.y -= 5;
      } else if (downArrowPressed && player.y + player.height < HEIGHT) {
        player.y += 5;
      }

// Move ball
      ball.x += ball.dx;
      ball.y += ball.dy;

// Handle ball collision with paddles
      if (ball.y - ball.radius < 0 || ball.y + ball.radius > HEIGHT) {
        ball.dy *= -1; // Reverse direction vertically
      }

if (ball.x - ball.radius < player.x + player.width &&
        ball.y > player.y &&
        ball.y < player.y + player.height) {
        ball.dx *= -1; // Reverse direction horizontally
      }

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

// Draw paddles
      context.fillStyle = "green";
      context.fillRect(player.x, player.y, player.width, player.height);

context.fillStyle = "red";
      context.fillRect(computer.x, computer.y, computer.width, computer.height);

// Draw ball
      context.beginPath();
      context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
      context.fillStyle = "black";
      context.fill();
      context.closePath();
    }

// Start the game
    init();
  </script>
</body>

</html>
```