Make a basic pong game's game

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

No:23395

←

Prev Next

→

Make a basic pong game
Developer User10848｜Date and time 23/10/30 10:45:11
Build time 57.211 sec｜Game capacity 2.539KB｜

Script

Sure! Here's a basic implementation of a Pong game in a single HTML file using JavaScript. Please note that this is a simplified version and may not include all the features of a complete game.

This implementation provides a basic pong game where you can control the paddle's movement on a smartphone by touching and dragging. The ball bounces off the walls and the paddle. Please note that you can further enhance this game by adding scoring, AI opponent, and more advanced features.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's a basic implementation of a Pong game in a single HTML file using JavaScript. Please note that this is a simplified version and may not include all the features of a complete game.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pong Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background: #f2f2f2;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="pong" width="800" height="400"></canvas>

// Create the pong paddle
    const paddleWidth = 10;
    const paddleHeight = 100;
    const paddleX = 785;
    let paddleY = canvas.height / 2 - paddleHeight / 2;

// Create the pong ball
    const ballSize = 10;
    let ballX = canvas.width / 2;
    let ballY = canvas.height / 2;
    let ballSpeedX = -2;
    let ballSpeedY = -2;

// Update function to animate the game
    function update() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the paddles
      context.fillStyle = "#000";
      context.fillRect(paddleX, paddleY, paddleWidth, paddleHeight);

// Draw the ball
      context.fillStyle = "#000";
      context.beginPath();
      context.arc(ballX, ballY, ballSize, 0, Math.PI * 2, false);
      context.closePath();
      context.fill();

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

// Ball collisions with walls
      if (ballY + ballSize >= canvas.height || ballY - ballSize <= 0) {
        ballSpeedY = -ballSpeedY;
      }

// Ball collisions with paddles
      if (
        ballX + ballSize >= paddleX &&
        ballY >= paddleY &&
        ballY <= paddleY + paddleHeight
      ) {
        ballSpeedX = -ballSpeedX;
      }

// Move the paddle with touch
      canvas.addEventListener("touchmove", function (event) {
        const touch = event.touches[0];
        paddleY = touch.clientY - paddleHeight / 2;
      });

// Request the next animation frame
      requestAnimationFrame(update);
    }

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