AI game creator

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

No:40400

←

Prev Next

→

Pong 2 players
Developer User17003｜Date and time 24/2/2 11:07:17
Build time 19.112 sec｜Game capacity 4.477KB｜

Script

Sure! Here's an example of a simple Pong game for 2 players implemented as a single HTML file:

To play the game on a smartphone, open the HTML file in a mobile browser and you'll be able to control the paddles using touch inputs. The game canvas will be positioned in the center of the screen. The player on the left side can control their paddle by swiping up or down on the left side of the screen, while the player on the right side can control their paddle by swiping up or down on the right side of the screen. The score of each player will be displayed at the top.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of a simple Pong game for 2 players implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #gameCanvas {
        background-color: #000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>

const player1 = {
        width: 10,
        height: 60,
        color: "#00ff00",
        x: 10,
        y: canvas.height / 2 - 30,
        dy: 5,
        score: 0
      };

const player2 = {
        width: 10,
        height: 60,
        color: "#ff0000",
        x: canvas.width - 20,
        y: canvas.height / 2 - 30,
        dy: 5,
        score: 0
      };

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

function drawRect(x, y, width, height, color) {
        context.fillStyle = color;
        context.fillRect(x, y, width, height);
      }

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

function drawText(text, x, y, color) {
        context.fillStyle = color;
        context.font = "30px Arial";
        context.fillText(text, x, y);
      }

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

drawRect(player1.x, player1.y, player1.width, player1.height, player1.color);
        drawRect(player2.x, player2.y, player2.width, player2.height, player2.color);

drawCircle(ball.x, ball.y, ball.radius, ball.color);

drawText(player1.score, canvas.width / 4, 50, player1.color);
        drawText(player2.score, (canvas.width / 4) * 3, 50, player2.color);

if (player1.y < 0) {
          player1.y = 0;
        } else if (player1.y + player1.height > canvas.height) {
          player1.y = canvas.height - player1.height;
        }

if (player2.y < 0) {
          player2.y = 0;
        } else if (player2.y + player2.height > canvas.height) {
          player2.y = canvas.height - player2.height;
        }

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 < player1.x + player1.width &&
          ball.y > player1.y &&
          ball.y < player1.y + player1.height
        ) {
          ball.dx *= -1;
          ball.color = player1.color;
        }

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

if (ball.x - ball.radius < 0) {
          ball.x = canvas.width / 2;
          ball.y = canvas.height / 2;
          player2.score++;
        } else if (ball.x + ball.radius > canvas.width) {
          ball.x = canvas.width / 2;
          ball.y = canvas.height / 2;
          player1.score++;
        }

movePaddle(player1, 87, 83); // Player 1: W and S keys
        movePaddle(player2, 38, 40); // Player 2: Up and Down arrows

requestAnimationFrame(update);
      }

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