Voleibol com os amigos's game

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

No:30266

←

Prev Next

→

Voleibol com os amigos
Developer User14723｜Date and time 23/12/21 3:43:45
Build time 32.017 sec｜Game capacity 4.02KB｜

Script

0 - 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Voleibol com os amigos</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: Arial, sans-serif;
      }

#court {
        background-color: #e8f1ff;
        width: 400px;
        height: 600px;
        position: relative;
      }

#net {
        background-color: #000;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        width: 5px;
        height: 600px;
      }

#player1 {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 550px;
        left: 10px;
        background-color: #ff0000;
      }

#player2 {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 550px;
        right: 10px;
        background-color: #00ff00;
      }

#ball {
        position: absolute;
        width: 30px;
        height: 30px;
        background-color: #0000ff;
        border-radius: 50%;
        cursor: pointer;
      }

#score {
        text-align: center;
        font-size: 24px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div id="court">
      <div id="net"></div>
      <div id="player1"></div>
      <div id="player2"></div>
      <div id="ball"></div>
    </div>

let ballPos = { x: 0, y: Math.floor(Math.random() * 150) + 250 };
      let ballSpeed = { x: 5, y: 5 };
      let player1Pos = 0;
      let player2Pos = 0;
      let playerSpeed = 20;
      let player1Score = 0;
      let player2Score = 0;

setInterval(function () {
        // Update player positions
        player1Pos = clamp(player1Pos, 0, 350);
        player2Pos = clamp(player2Pos, 0, 350);
        player1.style.left = player1Pos + "px";
        player2.style.right = player2Pos + "px";

// Update ball position
        ballPos.x += ballSpeed.x;
        ballPos.y += ballSpeed.y;
        ball.style.left = ballPos.x + "px";
        ball.style.top = ballPos.y + "px";

// Handle ball collision with walls
        if (
          ballPos.x + ballSpeed.x < 0 ||
          ballPos.x + ballSpeed.x > 370
        ) {
          ballSpeed.x = -ballSpeed.x;
        }

// Handle ball collision with players or net
        if (
          ballPos.y + ballSpeed.y < 0 ||
          ballPos.y + ballSpeed.y > 550
        ) {
          if (
            ballPos.x > player1Pos &&
            ballPos.x < player1Pos + 50 &&
            ballPos.y + ballSpeed.y < 0
          ) {
            ballSpeed.y = -ballSpeed.y;
            player1Score++;
            score.innerText = player1Score + " - " + player2Score;
          } else if (
            ballPos.x > player2Pos &&
            ballPos.x < player2Pos + 50 &&
            ballPos.y + ballSpeed.y > 550
          ) {
            ballSpeed.y = -ballSpeed.y;
            player2Score++;
            score.innerText = player1Score + " - " + player2Score;
          } else {
            ballSpeed.y = -ballSpeed.y;
          }
        }
      }, 20);

// Function to clamp a value between a minimum and maximum
      function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
      }
    </script>
  </body>
</html>