ライオン🦁マシマシゲーム

このゲームは、スマホで遊べるシンプルなゲームです。

操作方法は簡単です。画面をタップすると、ライオンがジャンプします。

しかし、ライオンには食事が必要で、タップできる回数に制限があります。

食事を取ることで、タップ回数が増え、高得点を目指しましょう！

それでは、楽しんでプレイしてください！

Score: 0

Remaining Taps: 10

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ライオン🦁マシマシゲーム</title>
  </head>
  <body>
    <h1>ライオン🦁マシマシゲーム</h1>
    <p>このゲームは、スマホで遊べるシンプルなゲームです。</p>
    <p>操作方法は簡単です。画面をタップすると、ライオンがジャンプします。</p>
    <p>しかし、ライオンには食事が必要で、タップできる回数に制限があります。</p>
    <p>食事を取ることで、タップ回数が増え、高得点を目指しましょう！</p>
    <p>それでは、楽しんでプレイしてください！</p>
    <div id="game">
      <img src="lion.png" id="lion" />
    </div>
    <div id="score">
      <p>Score: <span id="score-number">0</span></p>
      <p>Remaining Taps: <span id="remaining-taps">10</span></p>
    </div>
    <script>
      var lion = document.getElementById("lion");
      var game = document.getElementById("game");
      var score = document.getElementById("score-number");
      var taps = document.getElementById("remaining-taps");
      
      lion.addEventListener("click", function() {
        lion.classList.add("jump");
        taps.textContent = parseInt(taps.textContent) - 1;
        if (taps.textContent <= 0) {
          alert("Game Over! Your score is " + score.textContent);
        }
      });
      
      game.addEventListener("click", function() {
        lion.classList.add("jump");
        taps.textContent = parseInt(taps.textContent) - 1;
        if (taps.textContent <= 0) {
          alert("Game Over! Your score is " + score.textContent);
        }
      });
      
      lion.addEventListener("animationend", function() {
        lion.classList.remove("jump");
      });
      
      game.addEventListener("animationend", function() {
        lion.classList.remove("jump");
      });
      
      setInterval(function() {
        var food = document.createElement("img");
        food.src = "food.png";
        food.classList.add("food");
        food.style.top = Math.floor(Math.random() * (game.offsetHeight - 40)) + "px";
        game.appendChild(food);
        setTimeout(function() {
          game.removeChild(food);
        }, 5000);
      }, 2000);
      
      setInterval(function() {
        var foods = document.getElementsByClassName("food");
        for (var i = 0; i < foods.length; i++) {
          if (isCollide(lion, foods[i])) {
            game.removeChild(foods[i]);
            score.textContent = parseInt(score.textContent) + 10;
            taps.textContent = parseInt(taps.textContent) + 1;
          }
        }
      }, 100);
      
      function isCollide(lion, food) {
        var l1 = lion.offsetLeft;
        var r1 = lion.offsetLeft + lion.offsetWidth;
        var t1 = lion.offsetTop;
        var b1 = lion.offsetTop + lion.offsetHeight;
        var l2 = food.offsetLeft;
        var r2 = food.offsetLeft + food.offsetWidth;
        var t2 = food.offsetTop;
        var b2 = food.offsetTop + food.offsetHeight;
        return !(r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2);
      }
    </script>
    <style>
      #game {
        width: 100%;
        height: 300px;
        border: 1px solid #000;
        position: relative;
        overflow: hidden;
      }
      #lion {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
      }
      .jump {
        animation: jump 0.3s ease;
      }
      @keyframes jump {
        0% { transform: translateY(0); }
        50% { transform: translateY(-30px); }
        100% { transform: translateY(0); }
      }
      .food {
        position: absolute;
        right: -20px;
        width: 20px;
        transition: transform 5s linear;
        transform: translateX(-100%);
      }
    </style>
  </body>
</html>