AI game creator

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

No:44186

125

←

Prev Next

→

Make a pong game
Developer User19329｜Date and time 24/2/17 8:07:20
Build time 14.39 sec｜Game capacity 3.838KB｜

Script

Sure! Here's an example of a simple Pong game implemented in a single HTML file using JavaScript. The game is designed for smartphone operation and uses pictograms for visual elements. Copy the code below and save it in a new HTML file to play the game:

To play the game, open the HTML file in a web browser on your smartphone and use touch/mouse controls to move the player paddle. The computer-controlled paddle will try to follow the movement of the ball, and the game will continue until one of the paddles misses the ball. Enjoy playing Pong on your smartphone!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pong Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      touch-action: none;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="pongCanvas"></canvas>

// Initialize canvas
      const canvas = document.getElementById("pongCanvas");
      const context = canvas.getContext("2d");
      const width = window.innerWidth;
      const height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;

// Define ball properties
      const ballRadius = Math.min(width, height) * 0.02;
      let ballX = width / 2;
      let ballY = height / 2;
      let ballSpeedX = Math.sign(Math.random() - 0.5) * 5;
      let ballSpeedY = Math.sign(Math.random() - 0.5) * 5;

// Define paddle properties
      const paddleWidth = width * 0.03;
      const paddleHeight = height * 0.2;
      const paddleY = height / 2 - paddleHeight / 2;
      let playerPaddleX = width * 0.05;
      let computerPaddleX = width * 0.95 - paddleWidth;
      let playerPaddleY = computerPaddleY = paddleY;

// Define game loop
      function gameLoop() {
        update();
        draw();
        requestAnimationFrame(gameLoop);
      }

// Update game state
      function update() {
        // Move player paddle based on touch position
        canvas.addEventListener("touchmove", function(event) {
          event.preventDefault();
          playerPaddleY = event.touches[0].clientY - paddleHeight / 2;
        });

// Update ball position
        ballX += ballSpeedX;
        ballY += ballSpeedY;

// Check collision with paddles
        if (
          (ballX <= playerPaddleX + paddleWidth &&
            ballY + ballRadius >= playerPaddleY &&
            ballY - ballRadius <= playerPaddleY + paddleHeight) ||
          (ballX >= computerPaddleX - ballRadius &&
            ballY + ballRadius >= computerPaddleY &&
            ballY - ballRadius <= computerPaddleY + paddleHeight)
        ) {
          ballSpeedX = -ballSpeedX;
        }

// Check collision with walls
        if (ballY + ballRadius >= height || ballY - ballRadius <= 0) {
          ballSpeedY = -ballSpeedY;
        }

// Move computer paddle towards the ball
        if (ballY < computerPaddleY + paddleHeight / 2) {
          computerPaddleY -= Math.abs(ballSpeedY);
        } else {
          computerPaddleY += Math.abs(ballSpeedY);
        }
      }

// Draw game elements
      function draw() {
        context.clearRect(0, 0, width, height);

// Draw ball
        context.font = ballRadius * 2 + "px sans-serif";
        context.fillText(ballImage, ballX - ballRadius, ballY + ballRadius);

// Draw paddles
        context.fillStyle = "#000";
        context.fillRect(playerPaddleX, playerPaddleY, paddleWidth, paddleHeight);
        context.fillRect(
          computerPaddleX,
          computerPaddleY,
          paddleWidth,
          paddleHeight
        );
      }

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

Enjoy playing Pong on your smartphone!