AI game creator

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

No:23481

←

Prev Next

→

pong
Developer User10940｜Date and time 23/10/31 19:11:46
Build time 94.137 sec｜Game capacity 2.841KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<html>
<head>
  <style>
    #pong {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #000;
      border: solid 2px #fff;
    }
  </style>
</head>
<body>
  <canvas id="pong" width="800" height="400"></canvas>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const canvas = document.getElementById("pong");
      const context = canvas.getContext("2d");

// Paddle settings
      const paddleWidth = 10;
      const paddleHeight = 100;
      const user = {
        x: 0,
        y: canvas.height / 2 - paddleHeight / 2,
        width: paddleWidth,
        height: paddleHeight,
        color: "#fff",
        dy: 5
      };
      const computer = {
        x: canvas.width - paddleWidth,
        y: canvas.height / 2 - paddleHeight / 2,
        width: paddleWidth,
        height: paddleHeight,
        color: "#fff",
        dy: 5
      };

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

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

// Draw net
      function drawNet() {
        for (let i = 0; i <= canvas.height; i += 15) {
          drawPaddle(canvas.width / 2 - 1, i, 2, 10, "#fff");
        }
      }

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

// Move paddles
      function movePaddles() {
        canvas.addEventListener("touchstart", function(e) {
          const rect = canvas.getBoundingClientRect();
          user.y = e.touches[0].clientY - rect.top - user.height / 2;
        });

canvas.addEventListener("touchmove", function(e) {
          const rect = canvas.getBoundingClientRect();
          user.y = e.touches[0].clientY - rect.top - user.height / 2;
        });
      }

// Update canvas
      function update() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawNet();
        drawPaddle(user.x, user.y, user.width, user.height, user.color);
        drawPaddle(
          computer.x,
          computer.y,
          computer.width,
          computer.height,
          computer.color
        );
        drawBall(ball.x, ball.y, ball.radius, ball.color);
        movePaddles();
      }

// Game loop
      function gameLoop() {
        update();
        requestAnimationFrame(gameLoop);
      }

// Start the game
      gameLoop();
    });
  </script>
</body>
</html>