AI game creator

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

No:2911

755

←

Prev Next

→

Billboard Rotation
Developer User3494｜Date and time 23/6/23 3:30:21
Build time 16.361 sec｜Game capacity 1.478KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>ビルボードの回転</title>
  <style>
    #billboard {
      width: 100px;
      height: 100px;
      background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/fire_1f525.png');
      background-size: cover;
      animation: spin 3s infinite linear;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div id="billboard"></div>
  <script>
    // タッチイベントのリスナーを設定
    var billboard = document.getElementById('billboard');
    billboard.addEventListener('touchstart', startTouch);
    billboard.addEventListener('touchmove', moveTouch);

// タッチ開始時の座標
    var startX, startY;

// タッチ開始時の処理
    function startTouch(e) {
      e.preventDefault();
      var touch = e.touches[0];
      startX = touch.clientX;
      startY = touch.clientY;
    }

// タッチ中の処理
    function moveTouch(e) {
      e.preventDefault();
      var touch = e.touches[0];
      var moveX = touch.clientX - startX;
      var moveY = touch.clientY - startY;
      billboard.style.transform = 'translate(' + moveX + 'px, ' + moveY + 'px)';
    }
  </script>
</body>

</html>