壁に当たるとボールが反射し、2秒後にボールが2つできるゲーム's game

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

No:36798

140

←

Prev Next

→

壁に当たるとボールが反射し、2秒後にボールが2つできるゲーム
Developer User4403｜Date and time 24/1/18 11:21:00
Build time 9.173 sec｜Game capacity 1.94KB｜

Script

⚽️

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      #ball {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <div id="ball">⚽️</div>

setInterval(moveBall, 10);

function moveBall() {
          x += dx;
          y += dy;

if (x < 0 || x + ball.offsetWidth > window.innerWidth) {
            dx = -dx;
            createNewBall();
          }
          if (y < 0 || y + ball.offsetHeight > window.innerHeight) {
            dy = -dy;
            createNewBall();
          }

ball.style.left = x + "px";
          ball.style.top = y + "px";
        }

function createNewBall() {
          var newBall1 = document.createElement("div");
          newBall1.innerHTML = "⚽️";
          newBall1.style.position = "absolute";
          newBall1.style.left = x + "px";
          newBall1.style.top = y + "px";
          newBall1.style.transform = "translate(-50%, -50%)";
          newBall1.style.fontSize = "50px";
          document.body.appendChild(newBall1);

var newBall2 = document.createElement("div");
          newBall2.innerHTML = "⚽️";
          newBall2.style.position = "absolute";
          newBall2.style.left = x + "px";
          newBall2.style.top = y + "px";
          newBall2.style.transform = "translate(-50%, -50%)";
          newBall2.style.fontSize = "50px";
          document.body.appendChild(newBall2);

setTimeout(function () {
            document.body.removeChild(newBall1);
            document.body.removeChild(newBall2);
          }, 2000);
        }
      };
    </script>
  </body>
</html>