ball that moves in a box but every 10 seconds, something weird happens. After 10 seconds it will say "WEIRDNESS INCOMING" and then there's 4 random commands that will applie to the ball or the background that say "PARTY" "more balls" "why is it raining" "rainbow ball" and after another 10 seconds it stops.'s game

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

No:37557

←

Prev Next

→

ball that moves in a box but every 10 seconds, som..ALL
Developer User17064｜Date and time 24/1/21 5:28:29
Build time 14.473 sec｜Game capacity 4.558KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Ball Game</title>
  <style>
    #container {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    #ball {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="ball"></div>
  </div>

// Moves the ball randomly within the container
    function moveBall() {
      var containerWidth = container.offsetWidth;
      var containerHeight = container.offsetHeight;
      var ballWidth = ball.offsetWidth;
      var ballHeight = ball.offsetHeight;

var leftPos = Math.floor(Math.random() * (containerWidth - ballWidth));
      var topPos = Math.floor(Math.random() * (containerHeight - ballHeight));

ball.style.left = leftPos + "px";
      ball.style.top = topPos + "px";
    }

// Display a given message in the container
    function showMessage(message) {
      var messageBox = document.createElement("div");
      messageBox.innerHTML = message;
      messageBox.style.position = "absolute";
      messageBox.style.top = "50%";
      messageBox.style.left = "50%";
      messageBox.style.transform = "translate(-50%, -50%)";
      messageBox.style.background = "white";
      messageBox.style.padding = "10px";
      messageBox.style.border = "1px solid black";
      messageBox.style.fontWeight = "bold";
      messageBox.style.fontSize = "20px";
      messageBox.style.zIndex = "100";
      
      container.appendChild(messageBox);

// Remove the message after 2 seconds
      setTimeout(function() {
        container.removeChild(messageBox);
      }, 2000);
    }

// Apply random command to the ball or background
    function applyRandomCommand() {
      var commands = ["PARTY", "more balls", "why is it raining", "rainbow ball"];
      var randomIndex = Math.floor(Math.random() * commands.length);
      var command = commands[randomIndex];

switch (command) {
        case "PARTY":
          container.style.background = "linear-gradient(to right, red, yellow, blue)";
          break;
        case "more balls":
          createAdditionalBalls(3);
          break;
        case "why is it raining":
          container.style.backgroundImage = "url('rain.png')";
          break;
        case "rainbow ball":
          ball.style.background = "linear-gradient(to right, red, yellow, green, blue, indigo, violet)";
          break;
      }

showMessage(command);
    }

// Create additional balls inside the container
    function createAdditionalBalls(count) {
      for (var i = 0; i < count; i++) {
        var additionalBall = document.createElement("div");
        additionalBall.className = "additional-ball";
        additionalBall.style.width = ball.offsetWidth + "px";
        additionalBall.style.height = ball.offsetHeight + "px";
        additionalBall.style.borderRadius = "50%";
        additionalBall.style.backgroundColor = "red";
        additionalBall.style.position = "absolute";
        
        var containerWidth = container.offsetWidth;
        var containerHeight = container.offsetHeight;
        var ballWidth = ball.offsetWidth;
        var ballHeight = ball.offsetHeight;

var leftPos = Math.floor(Math.random() * (containerWidth - ballWidth));
        var topPos = Math.floor(Math.random() * (containerHeight - ballHeight));

additionalBall.style.left = leftPos + "px";
        additionalBall.style.top = topPos + "px";

container.appendChild(additionalBall);
      }
    }

// Remove all additional balls from the container
    function removeAdditionalBalls() {
      var additionalBalls = document.getElementsByClassName("additional-ball");
      while (additionalBalls.length > 0) {
        container.removeChild(additionalBalls[0]);
      }
    }

// Start the game
    function startGame() {
      intervalId = setInterval(function() {
        moveBall();
      }, 1000);

setTimeout(function() {
        showMessage("WEIRDNESS INCOMING");

setTimeout(function() {
          applyRandomCommand();

setTimeout(function() {
            clearInterval(intervalId);
            removeAdditionalBalls();
          }, 10000);
        }, 2000);
      }, 10000);
    }

// Initial setup when the page loads
    startGame();
  </script>
</body>
</html>