Make ping ball like in the 1950s with a random, basic Ai's game

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

No:29796

102

←

Prev Next

→

Make ping ball like in the 1950s with a random, ba..ALL
Developer User7632｜Date and time 23/12/19 3:10:50
Build time 21.608 sec｜Game capacity 3.191KB｜

Script

Sure! Here's an example of a simple ping-pong game implemented in a single HTML file using JavaScript:

In this game, you control the paddle by touching and dragging on the canvas. The black rectangle on the right side represents your paddle, and the black rectangle on the left side represents the AI paddle. The game starts with a ball in the middle, and you need to prevent it from hitting the right wall. The AI paddle moves randomly, providing basic AI functionality. Note: This is a basic implementation just to demonstrate the concept. You can enhance the game further by adding scoring, levels, and more complex AI logic if required.

←

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 ping-pong game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Ping Pong Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background: #eee;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

// Define the game variables
    let ballX = canvas.width / 2;
    let ballY = canvas.height / 2;
    let ballRadius = 10;
    let ballDX = 2;
    let ballDY = -2;
    let paddleWidth = 10;
    let paddleHeight = 80;
    let paddleY = (canvas.height - paddleHeight) / 2;
    let aiPaddleY = (canvas.height - paddleHeight) / 2;
    let aiPaddleSpeed = 1.5;

// Handle user input on touch devices
    canvas.addEventListener("touchmove", function(event) {
      const touchY = event.touches[0].clientY - canvas.offsetTop;
      paddleY = touchY - paddleHeight / 2;
    });

// Update game objects
    function update() {
      // Update ball position
      ballX += ballDX;
      ballY += ballDY;

// Check if ball hits top/bottom walls
      if (ballY + ballRadius > canvas.height || ballY - ballRadius < 0) {
        ballDY = -ballDY;
      }

// Check if ball hits paddle
      if (
        ballX + ballRadius > canvas.width - paddleWidth &&
        ballY > paddleY &&
        ballY < paddleY + paddleHeight
      ) {
        ballDX = -ballDX;
      }

// Simulate AI paddle movement
      if (ballY > aiPaddleY + paddleHeight / 2) {
        aiPaddleY += aiPaddleSpeed;
      } else {
        aiPaddleY -= aiPaddleSpeed;
      }
    }

// Render game objects
    function render() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the paddle
      context.fillStyle = "black";
      context.fillRect(
        canvas.width - paddleWidth,
        paddleY,
        paddleWidth,
        paddleHeight
      );

// Draw the AI paddle
      context.fillStyle = "black";
      context.fillRect(
        0,
        aiPaddleY,
        paddleWidth,
        paddleHeight
      );

// Draw the ball
      context.beginPath();
      context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      context.fillStyle = "black";
      context.fill();
      context.closePath();
    }

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

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

Note: This is a basic implementation just to demonstrate the concept. You can enhance the game further by adding scoring, levels, and more complex AI logic if required.