魚釣りゲームルール　画面長押しでゲージが上がりマックスにしたらクリアたまに画面が赤くなりその間は画面をおしてはならない's game

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

No:16383

←

Prev Next

→

魚釣りゲームルール　画面長押しでゲージが上がりマックスにしたらクリアたまに画面が赤くなりその間は画..ALL
Developer User7165｜Date and time 23/9/17 22:16:46
Build time 17.694 sec｜Game capacity 1.675KB｜

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>
    #game {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #eaf2fd;
    }
    
    #fish {
      font-size: 100px;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="fish">🐟</div>
  </div>

// ゲーム画面を長押しした時の処理
    function increaseGauge() {
      if (gameOver) return;
      
      const fish = document.getElementById("fish");
      let gaugeValue = 0;

// ゲージをアニメーションさせる
      const gaugeInterval = setInterval(() => {
        if (gaugeValue >= 100) {
          clearInterval(gaugeInterval);
          gameOver = true;
          fish.style.color = "red";
          return;
        }
        gaugeValue += 10;
        fish.style.fontSize = `${100 + gaugeValue}px`;
      }, 500);
    }

// ゲーム画面を離した時の処理
    function clearGame() {
      if (!gameOver) return;

const fish = document.getElementById("fish");
      fish.style.fontSize = "100px";
      fish.style.color = "black";
      gameOver = false;
    }

// 長押しイベントの設定
    const gameScreen = document.getElementById("game");
    gameScreen.addEventListener("mousedown", increaseGauge);
    gameScreen.addEventListener("touchstart", increaseGauge);

// 離した時のイベント設定
    document.addEventListener("mouseup", clearGame);
    document.addEventListener("touchend", clearGame);
  </script>
</body>
</html>