AI game creator

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

No:24980

128

←

Prev Next

→

Make a pong game
Developer User12050｜Date and time 23/11/15 10:59:48
Build time 219.888 sec｜Game capacity 4.7KB｜

Script

Sure! Here's an example of a simple Pong game implemented in a single HTML file. The game is designed to be played on a smartphone and uses pictograms for visuals.

To play the game, you can copy and paste the above code into a new HTML file and open it in a web browser on your smartphone. The game should start automatically, and you can control the paddle by pressing the up and down arrow keys or sliding your finger up and down on the canvas. The objective of the game is to prevent the ball from crossing your paddle, and score points by making the ball pass the opponent's paddle.

←

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 implemented in a single HTML file. The game is designed to be played on a smartphone and uses pictograms for visuals.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pong Game</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Player paddles
    var player1 = {
      x: 0,
      y: canvasHeight / 2 - paddleHeight / 2
    };
    var player2 = {
      x: canvasWidth - paddleWidth,
      y: canvasHeight / 2 - paddleHeight / 2
    };

// Ball
    var ball = {
      x: canvasWidth / 2 - ballSize / 2,
      y: canvasHeight / 2 - ballSize / 2,
      speedX: ballSpeedX,
      speedY: ballSpeedY
    };

// Input
    var upArrowPressed = false;
    var downArrowPressed = false;
    var touchStartY = null;

// Event listeners
    document.addEventListener("keydown", function(event) {
      if (event.keyCode === 38) { // Up arrow key
        upArrowPressed = true;
      } else if (event.keyCode === 40) { // Down arrow key
        downArrowPressed = true;
      }
    });

canvas.addEventListener("touchstart", function(event) {
      touchStartY = event.touches[0].clientY;
    });

canvas.addEventListener("touchmove", function(event) {
      var touchY = event.touches[0].clientY;
      if (touchY > touchStartY) {
        upArrowPressed = false;
        downArrowPressed = true;
      } else {
        upArrowPressed = true;
        downArrowPressed = false;
      }
      touchStartY = touchY;
    });

canvas.addEventListener("touchend", function(event) {
      upArrowPressed = false;
      downArrowPressed = false;
    });

// Update game state
    function update() {
      // Move paddles
      if (upArrowPressed && player1.y > 0) {
        player1.y -= paddleSpeed;
      } else if (downArrowPressed && player1.y < canvasHeight - paddleHeight) {
        player1.y += paddleSpeed;
      }

// Move ball
      ball.x += ball.speedX;
      ball.y += ball.speedY;

// Collisions with paddles
      if (
        ball.y + ballSize >= player1.y && ball.y <= player1.y + paddleHeight &&
        ball.x <= player1.x + paddleWidth
      ) {
        ball.speedX *= -1;
      } else if (
        ball.y + ballSize >= player2.y && ball.y <= player2.y + paddleHeight &&
        ball.x + ballSize >= player2.x
      ) {
        ball.speedX *= -1;
      }

// Collisions with walls
      if (ball.y <= 0 || ball.y + ballSize >= canvasHeight) {
        ball.speedY *= -1;
      }

// Score points
      if (ball.x + ballSize < 0) {
        resetBall();
        // Player 2 scores a point
      } else if (ball.x > canvasWidth) {
        resetBall();
        // Player 1 scores a point
      }
    }

// Render game
    function draw() {
      // Clear canvas
      context.clearRect(0, 0, canvasWidth, canvasHeight);

// Draw paddles
      context.fillRect(player1.x, player1.y, paddleWidth, paddleHeight);
      context.fillRect(player2.x, player2.y, paddleWidth, paddleHeight);

// Draw ball
      context.fillRect(ball.x, ball.y, ballSize, ballSize);
    }

// Reset ball position and direction
    function resetBall() {
      ball.x = canvasWidth / 2 - ballSize / 2;
      ball.y = canvasHeight / 2 - ballSize / 2;
      ball.speedX = ballSpeedX;
      ball.speedY = ballSpeedY;
    }

// Game loop
    function gameLoop() {
      update();
      draw();

requestAnimationFrame(gameLoop);
    }

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