AI game creator

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

No:40402

←

Prev Next

→

Pong 2 players
Developer User17003｜Date and time 24/2/2 11:07:45
Build time 16.545 sec｜Game capacity 3.752KB｜

Script

Sure! Here's a simple implementation of Pong for 2 players using JavaScript in a single HTML file:

The above code sets up a canvas and implements the basic logic for player paddles, ball movement, and collision detection in the Pong game. Players can control their paddles using touch input on a smartphone. The game will continue updating and rendering until the browser tab is closed.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of Pong for 2 players using JavaScript in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      background: #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="pong" width="800" height="400"></canvas>

// Define the player paddles
    const paddleWidth = 10;
    const paddleHeight = 100;

const player1 = {
      x: 0,
      y: canvas.height / 2 - paddleHeight / 2,
      width: paddleWidth,
      height: paddleHeight,
      color: "#FF00FF",
      dy: 8, // Paddle movement speed
    };

const player2 = {
      x: canvas.width - paddleWidth,
      y: canvas.height / 2 - paddleHeight / 2,
      width: paddleWidth,
      height: paddleHeight,
      color: "#00FFFF",
      dy: 8, // Paddle movement speed
    };

// Define the ball
    const ball = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 10,
      speed: 4,
      dx: 4,
      dy: 4,
    };

// Helper function to draw a rectangle
    function drawRect(x, y, width, height, color) {
      context.fillStyle = color;
      context.fillRect(x, y, width, height);
    }

// Helper function to draw the ball
    function drawCircle(x, y, radius, color) {
      context.fillStyle = color;
      context.beginPath();
      context.arc(x, y, radius, 0, Math.PI * 2, false);
      context.closePath();
      context.fill();
    }

// Update function
    function update() {
      // Clear the canvas
      drawRect(0, 0, canvas.width, canvas.height, "#000");

// Draw the paddles
      drawRect(player1.x, player1.y, player1.width, player1.height, player1.color);
      drawRect(player2.x, player2.y, player2.width, player2.height, player2.color);

// Move the paddles
      canvas.addEventListener("touchmove", movePaddle);
      
      function movePaddle(e) {
        let rect = canvas.getBoundingClientRect();
        if (e.touches[0].clientY - rect.top - player1.height / 2 > 0 && e.touches[0].clientY - rect.top + player1.height / 2 < canvas.height)
          player1.y = e.touches[0].clientY - rect.top - player1.height / 2;
          if (e.touches[0].clientY - rect.top - player1.height / 2 < 0) player1.y = 0;
          if (e.touches[0].clientY - rect.top + player1.height / 2 > canvas.height) player1.y = canvas.height - player1.height;
      }

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

// Detect collision with paddles
      if (
        ball.x - ball.radius < player1.x + player1.width &&
        ball.y - ball.radius < player1.y + player1.height &&
        ball.y + ball.radius > player1.y
      ) {
        ball.dx *= -1;
      }

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

// Detect collision with vertical walls
      if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
        ball.dy *= -1;
      }

// Draw the ball
      drawCircle(ball.x, ball.y, ball.radius, "#FFFFFF");

// Request animation frame to update the game
      requestAnimationFrame(update);
    }

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