Moving ball 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:37556

←

Prev Next

→

Moving ball in a box but every 10 seconds, somethi..ALL
Developer User17064｜Date and time 24/1/21 5:27:28
Build time 12.562 sec｜Game capacity 3.388KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
    }
    #ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>

function startMoving() {
    clearInterval(interval);
    interval = setInterval(moveBall, 10);
  }

function moveBall() {
    var posX = parseInt(ball.style.left) || 0;
    var posY = parseInt(ball.style.top) || 0;
    var boxWidth = box.offsetWidth;
    var boxHeight = box.offsetHeight;
    var ballWidth = ball.offsetWidth;
    var ballHeight = ball.offsetHeight;

if (posX <= 0 || posX >= (boxWidth - ballWidth)) {
      directionX *= -1;
    }

if (posY <= 0 || posY >= (boxHeight - ballHeight)) {
      directionY *= -1;
    }

posX += directionX;
    posY += directionY;

ball.style.left = posX + "px";
    ball.style.top = posY + "px";
  }

function applyPartyEffect() {
    box.style.backgroundImage = "url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/google/241/party-popper_1f389.png')";
  }

function createExtraBalls() {
    for (var i = 0; i < 10; i++) {
      var extraBall = document.createElement('div');
      extraBall.className = 'extraBall';
      extraBall.style.backgroundImage = "url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/google/241/ball_1f3b0.png')";
      extraBall.style.position = 'absolute';
      extraBall.style.width = '50px';
      extraBall.style.height = '50px';
      extraBall.style.left = Math.random() * (box.offsetWidth - 50) + "px";
      extraBall.style.top = Math.random() * (box.offsetHeight - 50) + "px";
      box.appendChild(extraBall);
    }
  }

function applyRainEffect() {
    box.style.backgroundImage = "url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/google/241/umbrella-with-rain-drops_2614.png')";
  }

function applyRainbowEffect() {
    ball.style.backgroundImage = "url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/google/241/large-red-circle_1f534.png')";
  }

function stopGame() {
    clearInterval(interval);
    clearInterval(weirdnessInterval);
  }

function startWeirdnessTimer() {
    clearInterval(weirdnessInterval);
    weirdnessInterval = setInterval(applyRandomEffect, 10000);
  }

function applyRandomEffect() {
    var randomIndex = Math.floor(Math.random() * 4);

switch (randomIndex) {
      case 0:
        applyPartyEffect();
        break;
      case 1:
        createExtraBalls();
        break;
      case 2:
        applyRainEffect();
        break;
      case 3:
        applyRainbowEffect();
        break;
    }

setTimeout(resetEffects, 2000);
  }

function resetEffects() {
    box.style.backgroundImage = "";
    var extraBalls = document.getElementsByClassName("extraBall");
    while (extraBalls.length > 0) {
      box.removeChild(extraBalls[0]);
    }
    ball.style.backgroundImage = "";
  }

var directionX = 2;
  var directionY = 2;

startMoving();
  startWeirdnessTimer();
</script>

</body>
</html>