カエルがとびます🐸 ジャンプボタンを長押しするとゲージが増え離すとゲージの量が多いほど高く飛ぶどれほど跳んだかcmとmで表示's game | AI game creator

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

No:34656

45

カエルがとびます🐸 ジャンプボタンを長押しするとゲージが増え離すとゲージの量が多いほど高く飛ぶどれ..ALL
Developer 豆腐｜Date and time 24/1/11 6:46:43
Build time 8.918 sec｜Game capacity 1.936KB｜

🐸

→ 　

0　

0　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Frog Jump Game</title>
  <style>
    #frog {
      font-size: 4em;
      margin-top: 200px;
    }
    #jump-button {
      font-size: 2em;
      padding: 10px 20px;
      margin-top: 20px;
    }
    #jump-meter {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="frog">🐸</div>
  <button id="jump-button">ジャンプ</button>
  <div id="jump-meter"></div>

<script>
    let jumpButton = document.getElementById("jump-button");
    let jumpMeter = document.getElementById("jump-meter");
    let frog = document.getElementById("frog");
    let jumpPower = 0;
  
    jumpButton.addEventListener("mousedown", () => {
      // ジャンプボタンを長押しした時の処理
      jumpPower = 0;
      jumpMeter.textContent = "ゲージ: " + jumpPower;
      let jumpMeterInterval = setInterval(() => {
        jumpMeter.textContent = "ゲージ: " + jumpPower;
        jumpPower += 1;
      }, 100);
  
      jumpButton.addEventListener("mouseup", () => {
        // ジャンプボタンを離した時の処理
        clearInterval(jumpMeterInterval);
        let jumpDistance = jumpPower * 10; // ゲージの量に応じて跳ぶ距離を計算します
        let jumpHeight = jumpPower * 5; // ゲージの量に応じて跳び上がる高さを計算します
        frog.style.transition = "transform 1s"; // 1秒かけてジャンプします
        frog.style.transform = `translate3d(0, -${jumpHeight}px, 0)`; // 高さの分だけ上に移動します
  
        setTimeout(() => {
          frog.style.transform = ""; // ジャンプ後に元の位置に戻ります
          alert(`跳んだ距離: ${jumpDistance}cm (${jumpDistance / 100}m)`); // 跳んだ距離を表示します
          jumpPower = 0;
          jumpMeter.textContent = "ゲージ: " + jumpPower;
        }, 1000);
      });
    });
  </script>
</body>
</html>