Make pong, the 2nd pong stick is controlled by AI, programmed to try and win, but slip up sometimes, whoever gets 7 points 1st wins.'s game

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

No:43302

←

Prev Next

→

Make pong, the 2nd pong stick is controlled by AI,..ALL
Developer User19162｜Date and time 24/2/15 5:58:36
Build time 10.819 sec｜Game capacity 3.85KB｜

Script

Sure! Here's a simplified version of Pong with an AI opponent. The game is implemented as a single HTML file and uses JavaScript. The AI opponent will try to win, but might make occasional mistakes. The first player to reach 7 points wins. The game can be played on a smartphone as well.

To play the game, you can copy the above code and save it as an HTML file. Open the file in a web browser, and you should see the Pong game running. Use the "W" and "S" keys (or the up and down arrow keys) to control the user paddle on the left side of the screen. The AI opponent will try to defeat you. The first player to score 7 points wins!

←

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>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>

// User paddle
      const user = {
        x: 0,
        y: canvas.height / 2 - 60 / 2,
        width: 10,
        height: 60,
        color: "WHITE",
        dy: 4,
      };

// AI paddle
      const ai = {
        x: canvas.width - 10,
        y: canvas.height / 2 - 60 / 2,
        width: 10,
        height: 60,
        color: "WHITE",
        dy: 4,
      };

// Ball
      const ball = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 10,
        speed: 4,
        dx: 4,
        dy: 4,
        color: "WHITE",
      };

// Draw paddles
      function drawPaddle(x, y, width, height, color) {
        context.fillStyle = color;
        context.fillRect(x, y, width, height);
      }

// Draw ball
      function drawBall(x, y, radius, color) {
        context.fillStyle = color;
        context.beginPath();
        context.arc(x, y, radius, 0, Math.PI * 2, false);
        context.closePath();
        context.fill();
      }

// Update canvas
      function update() {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw paddles
        drawPaddle(user.x, user.y, user.width, user.height, user.color);
        drawPaddle(ai.x, ai.y, ai.width, ai.height, ai.color);

// Draw ball
        drawBall(ball.x, ball.y, ball.radius, ball.color);

// AI movement
        ai.y += ai.dy;
        if (
          ai.y + ai.height > canvas.height ||
          ai.y < 0
        ) {
          ai.dy *= -1; // Reverse direction if hitting top or bottom
        }

// Ball movement
        ball.x += ball.dx;
        ball.y += ball.dy;

// Ball collision with paddles
        if (
          ball.y + ball.radius > user.y &&
          ball.y - ball.radius < user.y + user.height &&
          ball.dx < 0
        ) {
          ball.dx *= -1; // Reverse direction
        } else if (
          ball.y + ball.radius > ai.y &&
          ball.y - ball.radius < ai.y + ai.height &&
          ball.dx > 0
        ) {
          ball.dx *= -1; // Reverse direction
        }

// Ball collision with top/bottom walls
        if (
          ball.y + ball.radius > canvas.height ||
          ball.y - ball.radius < 0
        ) {
          ball.dy *= -1; // Reverse direction if hitting top or bottom walls
        }

requestAnimationFrame(update);
      }

// Keyboard control
      document.addEventListener("keydown", function (event) {
        if (event.keyCode === 87 || event.keyCode === 38) {
          // W or Up arrow key
          user.y -= user.dy;
        } else if (event.keyCode === 83 || event.keyCode === 40) {
          // S or Down arrow key
          user.y += user.dy;
        }
      });

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