蟹さんの肉が飛んでいくゲーム's game

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

No:29567

←

Prev Next

→

蟹さんの肉が飛んでいくゲーム
Developer User14508｜Date and time 23/12/17 13:27:56
Build time 21.103 sec｜Game capacity 2.309KB｜

Script

🍖

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
   <title>蟹さんの肉が飛んでいくゲーム</title>
   <style>
      #container {
         position: relative;
         height: 100vh;
         overflow: hidden;
         background-color: #f5f5f5;
      }
      
      #crab {
         position: absolute;
         bottom: 0;
         width: 50px;
      }
      
      #meat {
         position: absolute;
         bottom: 100px;
         left: 50%;
         transform: translateX(-50%);
         font-size: 30px;
      }
   </style>
</head>
<body>
   <div id="container">
      <img id="crab" src="crab.png" alt="蟹">
      <div id="meat">🍖</div>
   </div>

// 肉の初期位置
      let meatPosition = 0;

// 肉の縦移動速度
      const meatSpeed = 5;

const crabElement = document.getElementById('crab');
      const meatElement = document.getElementById('meat');

function moveCrab(event) {
         // スマホの傾きで蟹の移動を制御
         const x = event.beta;
         crabPosition += x;
         crabElement.style.left = crabPosition + 'px';
      }

function moveMeat() {
         // 肉の移動
         meatPosition += meatSpeed;
         meatElement.style.bottom = meatPosition + 'px';

// 肉が画面上部に到達したら再度下部に戻す
         const containerHeight = document.getElementById('container').clientHeight;
         if (meatPosition >= containerHeight) {
            meatPosition = -100;
            meatElement.style.left = "50%";
         }

// 当たり判定
         const crabRect = crabElement.getBoundingClientRect();
         const meatRect = meatElement.getBoundingClientRect();
         if (crabRect.bottom >= meatRect.top && crabRect.left <= meatRect.right && crabRect.right >= meatRect.left) {
            alert('ゲームオーバー！');
            meatPosition = -100;
            meatElement.style.left = "50%";
         }
      }

// スマホの傾きイベントを監視
      window.addEventListener('deviceorientation', moveCrab);

// 肉の移動を定期的に呼び出す
      setInterval(moveMeat, 20);
   </script>
</body>
</html>