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

No:7461

3331

←

Prev Next

→

Tennis
Developer User3477｜Date and time 23/7/7 22:54:08
Build time 29.207 sec｜Game capacity 4.7KB｜

Script

Tennis Game

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tennis Game</title>
  <style>
    #tennis-court {
      border: 1px solid black;
      height: 300px;
      width: 600px;
      position: relative;
    }
    #ball {
      position: absolute;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background-color: black;
    }
    #paddle-left, #paddle-right {
      position: absolute;
      height: 80px;
      width: 10px;
      background-color: black;
    }
    #paddle-left {
      left: 0;
    }
    #paddle-right {
      right: 0;
    }
  </style>
</head>
<body>
  <h1>Tennis Game</h1>
  <div id="tennis-court">
    <div id="ball"></div>
    <div id="paddle-left"></div>
    <div id="paddle-right"></div>
  </div>

var ballSpeed = 2; // Speed of the ball
    var ballXDirection = 1; // Horizontal direction of the ball (1: left to right, -1: right to left)
    var ballYDirection = 1; // Vertical direction of the ball (1: top to bottom, -1: bottom to top)

var paddleSpeed = 5; // Speed of the paddles

var paddleLeftYPosition = 120; // Y position of the left paddle
    var paddleRightYPosition = 120; // Y position of the right paddle

// Key codes for paddle movements
    var KEY_UP = 38;
    var KEY_DOWN = 40;
    var W_KEY = 87; // W key code
    var S_KEY = 83; // S key code

// Update the ball position
    function updateBall() {
      var currentBallXPosition = parseInt(ball.style.left);
      var currentBallYPosition = parseInt(ball.style.top);

// Check if the ball hits either the top or bottom wall
      if (currentBallYPosition >= tennisCourt.clientHeight - ball.clientHeight || currentBallYPosition <= 0) {
        ballYDirection = -ballYDirection; // Reverse the vertical direction
      }

// Check if the ball hits the left paddle
      if (currentBallXPosition <= paddleLeft.clientWidth && currentBallYPosition + ball.clientHeight >= paddleLeftYPosition && currentBallYPosition <= paddleLeftYPosition + paddleLeft.clientHeight) {
        ballXDirection = -ballXDirection; // Reverse the horizontal direction
      }

// Check if the ball hits the right paddle
      if (currentBallXPosition + ball.clientWidth >= tennisCourt.clientWidth - paddleRight.clientWidth && currentBallYPosition + ball.clientHeight >= paddleRightYPosition && currentBallYPosition <= paddleRightYPosition + paddleRight.clientHeight) {
        ballXDirection = -ballXDirection; // Reverse the horizontal direction
      }

// Move the ball in the determined direction
      ball.style.left = currentBallXPosition + ballSpeed * ballXDirection + "px";
      ball.style.top = currentBallYPosition + ballSpeed * ballYDirection + "px";
    }

// Update the left paddle position
    function updateLeftPaddle() {
      // Move the left paddle up
      if (keys[KEY_UP] && paddleLeftYPosition > 0) {
        paddleLeftYPosition -= paddleSpeed;
      }

// Move the left paddle down
      if (keys[KEY_DOWN] && paddleLeftYPosition < tennisCourt.clientHeight - paddleLeft.clientHeight) {
        paddleLeftYPosition += paddleSpeed;
      }

// Update the left paddle's position
      paddleLeft.style.top = paddleLeftYPosition + "px";
    }

// Update the right paddle position (controlled by an AI)
    function updateRightPaddle() {
      var targetYPosition = ball.getBoundingClientRect().top; // Get the current Y position of the ball

// Move the right paddle towards the ball's Y position
      if (paddleRightYPosition + paddleRight.clientHeight / 2 > targetYPosition && paddleRightYPosition > 0) {
        paddleRightYPosition -= paddleSpeed;
      } else if (paddleRightYPosition + paddleRight.clientHeight / 2 < targetYPosition && paddleRightYPosition < tennisCourt.clientHeight - paddleRight.clientHeight) {
        paddleRightYPosition += paddleSpeed;
      }

// Update the right paddle's position
      paddleRight.style.top = paddleRightYPosition + "px";
    }

// Update the game state
    function updateGame() {
      updateBall();
      updateLeftPaddle();
      updateRightPaddle();
    }

// Handle key presses
    var keys = {};
    document.addEventListener("keydown", function (event) {
      keys[event.keyCode] = true;
    });

document.addEventListener("keyup", function (event) {
      delete keys[event.keyCode];
    });

// Start the game loop
    setInterval(updateGame, 10);
  </script>
</body>
</html>