Crea una pelota que rebote cuando la toques's game

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

No:28200

←

Prev Next

→

Crea una pelota que rebote cuando la toques
Developer User14018｜Date and time 23/12/11 5:51:26
Build time 14.001 sec｜Game capacity 1.448KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<html>
<head>
<style>
#ball {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>
</head>

<body>
  <script>
    var ball = document.getElementById("ball");
    var container = document.body;

container.addEventListener("touchstart", handleTouchStart, false);
    container.addEventListener("touchmove", handleTouchMove, false);
    container.addEventListener("touchend", handleTouchEnd, false);

var x = container.offsetWidth / 2;
    var y = container.offsetHeight / 2;
    var dx = 5; // horizontal velocity
    var dy = 5; // vertical velocity

function handleTouchStart(event) {
      event.preventDefault();
    }

function handleTouchMove(event) {
      event.preventDefault();
      x = event.touches[0].clientX;
      y = event.touches[0].clientY;
    }

function handleTouchEnd(event) {
      event.preventDefault();
      moveBall();
    }

function moveBall() {
      if (x >= container.offsetWidth || x <= 0) {
        dx = -dx; // reverse horizontal velocity
      }
      if (y >= container.offsetHeight || y <= 0) {
        dy = -dy; // reverse vertical velocity
      }

x += dx;
      y += dy;

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

requestAnimationFrame(moveBall);
    }

moveBall();

</script>

</body>
</html>