AI game creator

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

No:7551

7785

←

Prev Next

→

Table-Tennis game
Developer User4054｜Date and time 23/7/8 16:47:03
Build time 19.632 sec｜Game capacity 3.948KB｜

Script

Sure! Here's a simple Table Tennis game implemented as a single HTML file with JavaScript:

To play the game, simply copy and paste the code into a text editor and save it with a .html extension. Then open the file in a web browser. You can move the player's paddle by moving your mouse inside the browser window. The computer-controlled paddle will try to follow the ball's movement. The objective is to hit the ball with your paddle and score points by making the ball go past the computer's paddle. Please note that this is a basic implementation and could be extended to include more features and improvements.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's a simple Table Tennis game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Table Tennis Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <canvas id="pong" width="800" height="400"></canvas>

// Create the pong paddle
    const paddleHeight = 100;
    const paddleWidth = 20;
    const player = {
      x: 0,
      y: canvas.height / 2 - paddleHeight / 2,
      width: paddleWidth,
      height: paddleHeight,
      color: "#0000FF",
      dy: 10 // Paddle movement speed
    };

const computer = {
      x: canvas.width - paddleWidth,
      y: canvas.height / 2 - paddleHeight / 2,
      width: paddleWidth,
      height: paddleHeight,
      color: "#FF0000",
      dy: 4 // Paddle movement speed
    };

// Create the pong ball
    const ball = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 10,
      speed: 4,
      dx: 4,
      dy: 4
    };

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

// Draw the 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();
    }

// Draw the game canvas
    function draw() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the paddle
      drawPaddle(player.x, player.y, player.width, player.height, player.color);
      drawPaddle(
        computer.x,
        computer.y,
        computer.width,
        computer.height,
        computer.color
      );

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

// Update the ball position
      ball.x += ball.dx;
      ball.y += ball.dy;

// Ensure the ball stays within the canvas
      if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
        ball.dy *= -1;
      }

// Handle paddle collisions
      if (
        ball.x + ball.radius > computer.x &&
        ball.y >= computer.y &&
        ball.y <= computer.y + computer.height
      ) {
        ball.dx *= -1;
      }

if (
        ball.x - ball.radius < player.x + player.width &&
        ball.y >= player.y &&
        ball.y <= player.y + player.height
      ) {
        ball.dx *= -1;
      }

// Move player paddle
      function movePaddle(event) {
        let rect = canvas.getBoundingClientRect();
        player.y = event.clientY - rect.top - player.height / 2;
      }

canvas.addEventListener("mousemove", movePaddle);

// Move computer paddle
      function computerMovement() {
        const computerCenter = computer.y + computer.height / 2;
        if (computerCenter < ball.y) {
          computer.y += computer.dy;
        } else {
          computer.y -= computer.dy;
        }
      }

computerMovement();
    }

// Update the canvas every frame
    function gameLoop() {
      draw();
      requestAnimationFrame(gameLoop);
    }

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

Please note that this is a basic implementation and could be extended to include more features and improvements.