AI game creator

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

No:7462

1977

←

Prev Next

→

Tennis
Developer User3477｜Date and time 23/7/7 22:58:05
Build time 20.385 sec｜Game capacity 3.272KB｜

Script

Here's a simple tennis game implemented as a single HTML file using JavaScript:

You can copy the above code and save it as an HTML file. Open the file in a web browser to play the tennis game. The game is controlled by the left and right arrow keys on a smartphone or keyboard. The objective is to bounce the ball off the paddle and prevent it from hitting the bottom wall. If the ball hits the bottom wall, the game will be over and an alert will be shown.

←

Prev　Next

→ 　

Back　

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

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

Here's a simple tennis game implemented as a single HTML file using JavaScript:

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

// Event listeners for paddle movement
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

// Functions to handle paddle movement
    function keyDownHandler(e) {
      if (e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
      } else if (e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
      }
    }

function keyUpHandler(e) {
      if (e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
      } else if (e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
      }
    }

// Function to draw the paddle on the canvas
    function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// Function to draw the ball on the canvas
    function drawBall() {
      ctx.beginPath();
      ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// Function to update the game state
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBall();
      drawPaddle();

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

// Ball collision detection with walls
      if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
      }
      if (y + dy < ballRadius) {
        dy = -dy;
      } else if (y + dy > canvas.height - ballRadius) {
        // Ball collision detection with paddle
        if (x > paddleX && x < paddleX + paddleWidth) {
          dy = -dy;
        } else {
          // Game over
          alert("GAME OVER");
          document.location.reload();
        }
      }

// Paddle movement
      if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += 7;
      } else if (leftPressed && paddleX > 0) {
        paddleX -= 7;
      }

requestAnimationFrame(update);
    }

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