Make a basic ping pong game's game

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

No:25125

←

Prev Next

→

Make a basic ping pong game
Developer User12219｜Date and time 23/11/18 1:50:11
Build time 186.109 sec｜Game capacity 5.153KB｜

Script

Certainly! Here's an example of a basic ping pong game implemented as a single HTML file with JavaScript. The game can be played on a smartphone and uses pictograms to represent the paddles and ball.

To play the game, simply copy the code and save it as an HTML file, then open it in a web browser on your smartphone. You can control the paddle with the arrow keys or by touching the screen above or below the paddle. The objective of the game is to bounce the ball off the paddles and score points by making the ball pass the opponent's paddle. I hope you enjoy playing the ping pong game! Let me know if you have any other questions.

←

Prev　Next

→ 　

Back　

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

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

Certainly! Here's an example of a basic ping pong game implemented as a single HTML file with JavaScript. The game can be played on a smartphone and uses pictograms to represent the paddles and ball.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Event listeners for user input
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    document.addEventListener("touchstart", touchStartHandler, false);
    document.addEventListener("touchend", touchEndHandler, false);
    document.addEventListener("touchmove", touchMoveHandler, false);

// Handle keyboard down presses
    function keyDownHandler(event) {
      if (event.key === "ArrowUp") {
        upPressed = true;
      } else if (event.key === "ArrowDown") {
        downPressed = true;
      }
    }

// Handle keyboard up releases
    function keyUpHandler(event) {
      if (event.key === "ArrowUp") {
        upPressed = false;
      } else if (event.key === "ArrowDown") {
        downPressed = false;
      }
    }

// Handle touch start
    function touchStartHandler(event) {
      event.preventDefault();
      touchY = event.touches[0].pageY;
    }

// Handle touch end
    function touchEndHandler(event) {
      event.preventDefault();
      touchY = null;
    }

// Handle touch move
    function touchMoveHandler(event) {
      event.preventDefault();
      touchY = event.touches[0].pageY;
    }

// Update game state
    function updateGame() {
      // Move paddles
      if (upPressed && paddle1Y > 0) {
        paddle1Y -= 4;
      } else if (downPressed && paddle1Y + paddleHeight < canvas.height) {
        paddle1Y += 4;
      } else if (touchY) {
        if (touchY < paddle1Y + paddleHeight / 2 && paddle1Y > 0) {
          paddle1Y -= 4;
        } else if (
          touchY > paddle1Y + paddleHeight / 2 &&
          paddle1Y + paddleHeight < canvas.height
        ) {
          paddle1Y += 4;
        }
      }

// Move ball
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Bounce off walls
      if (ballY + ballRadius > canvas.height || ballY - ballRadius < 0) {
        ballSpeedY = -ballSpeedY;
      }

// Bounce off paddles
      if (
        ballX - ballRadius < paddleWidth &&
        ballY + ballRadius > paddle1Y &&
        ballY - ballRadius < paddle1Y + paddleHeight
      ) {
        ballSpeedX = -ballSpeedX;
      }

if (
        ballX + ballRadius > canvas.width - paddleWidth &&
        ballY + ballRadius > paddle2Y &&
        ballY - ballRadius < paddle2Y + paddleHeight
      ) {
        ballSpeedX = -ballSpeedX;
      }

// Score points
      if (ballX + ballRadius > canvas.width) {
        score1++;
        resetGame();
      }

if (ballX - ballRadius < 0) {
        score2++;
        resetGame();
      }

// AI for paddle 2
      var paddle2YCenter = paddle2Y + paddleHeight / 2;
      if (paddle2YCenter < ballY - 35) {
        paddle2Y += 3;
      } else if (paddle2YCenter > ballY + 35) {
        paddle2Y -= 3;
      }

// Render game
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#000000";
      ctx.fill();
      ctx.closePath();
      ctx.fillRect(
        0,
        paddle1Y,
        paddleWidth,
        paddleHeight
      );
      ctx.fillRect(
        canvas.width - paddleWidth,
        paddle2Y,
        paddleWidth,
        paddleHeight
      );

// Render scores
      ctx.font = "16px Arial";
      ctx.fillText("Player 1: " + score1, 8, 20);
      ctx.fillText("Player 2: " + score2, canvas.width - 95, 20);

// Request next frame
      requestAnimationFrame(updateGame);
    }

// Reset game
    function resetGame() {
      ballX = canvas.width / 2;
      ballY = canvas.height / 2;
      ballSpeedX = -ballSpeedX;
      ballSpeedY = -ballSpeedY;
    }

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

I hope you enjoy playing the ping pong game! Let me know if you have any other questions.