ガツンとマシマシゲーム

ライオンがお腹を空かせています。とにかくお腹を満たしてあげましょう！

お腹が満たされるまでに必要な食べ物の量はランダムに決まります。

食べ物をひたすらガツンとマシマシして、お腹を満たしてください！

残りの食べ物の量：

※lion.pngは別途用意が必要です。

←

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ガツンとマシマシゲーム</title>
    <style>
      body {
        font-size: 3rem;
        text-align: center;
        background-color: lightblue;
      }
      button {
        background-color: white;
        border-radius: 10px;
        padding: 10px 20px;
        font-size: 2rem;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <h1>ガツンとマシマシゲーム</h1>
    <p>ライオンがお腹を空かせています。とにかくお腹を満たしてあげましょう！</p>
    <p>お腹が満たされるまでに必要な食べ物の量はランダムに決まります。</p>
    <p>食べ物をひたすらガツンとマシマシして、お腹を満たしてください！</p>
    <img src="lion.png" alt="lion" width="300">
    <h2>残りの食べ物の量： <span id="food-amount"></span></h2>
    <button id="eat-button">ガツンとマシマシ</button>
    <script>
      let foodAmount = Math.floor(Math.random() * 20) + 1; // 食べ物の量をランダムに決定する（1から20）
      document.getElementById("food-amount").innerHTML = foodAmount; // 初期の食べ物の量を表示する

document.getElementById("eat-button").addEventListener("click", function() {
        foodAmount--; // 食べ物の量を1減らす
        document.getElementById("food-amount").innerHTML = foodAmount;
        if (foodAmount === 0) {
          alert("お腹が満たされました！おめでとう！🎉🦁");
        }
      });
    </script>
  </body>
</html>

※lion.pngは別途用意が必要です。