🦁 Lion Game 🦁

スマホで操作してね！ 📱

SCORE: 0

このゲームは、プレイヤーがライオンを操作して、画面上をマシマシ動かして獲物の動物（緑色の四角）を捕まえるゲームです。スマホでの操作を前提としており、画面上をタッチすることでライオンを動かすことができます。獲物を捕まえるたびにスコアが加算され、スコアを競うことができます。試しに遊んでみてね！ 🎉

←

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">
    <title>Lion Game</title>
    <style>
      body {
        font-family: sans-serif;
        text-align: center;
        background-color: #ffeecc;
      }
      canvas {
        border: 1px solid black;
      }
      #score {
        font-size: 2em;
      }
      button {
        margin-top: 10px;
        padding: 10px;
        font-size: 1.2em;
        background-color: #ccffee;
        border: 1px solid black;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>🦁 Lion Game 🦁</h1>
    <canvas id="canvas" width="480" height="320"></canvas>
    <p>スマホで操作してね！ 📱</p>
    <p id="score">SCORE: 0</p>
    <button id="start">スタート</button>
    <script>
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      let score = document.getElementById("score");
      let button = document.getElementById("start");
      let lion = {
        x: 50,
        y: 50,
        w: 64,
        h: 64,
        speed: 5
      };
      let prey = {
        x: 300,
        y: 200,
        w: 32,
        h: 32
      };
      let preyCaught = 0;
      let playing = false;
      button.addEventListener("click", function() {
        if (!playing) {
          playing = true;
          button.innerHTML = "ストップ";
          button.style.backgroundColor = "#ffcccc";
          button.style.color = "red";
          canvas.addEventListener("touchmove", function(e) {
            let touch = e.touches[0];
            lion.x = touch.pageX - canvas.offsetLeft - lion.w/2;
            lion.y = touch.pageY - canvas.offsetTop - lion.h/2;
          });
          mainLoop();
        } else {
          playing = false;
          button.innerHTML = "スタート";
          button.style.backgroundColor = "#ccffee";
          button.style.color = "black";
          canvas.removeEventListener("touchmove", function(e) {});
        }
      });
      function mainLoop() {
        if (playing) {
          update();
          draw();
          requestAnimationFrame(mainLoop);
        }
      }
      function update() {
        if (lion.x + lion.w > prey.x && lion.x < prey.x + prey.w &&
            lion.y + lion.h > prey.y && lion.y < prey.y + prey.h) {
          preyCaught++;
          score.innerHTML = "SCORE: " + preyCaught;
          prey.x = Math.random() * (canvas.width - prey.w);
          prey.y = Math.random() * (canvas.height - prey.h);
        }
      }
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "orange";
        ctx.fillRect(lion.x, lion.y, lion.w, lion.h);
        ctx.fillStyle = "green";
        ctx.fillRect(prey.x, prey.y, prey.w, prey.h);
      }
    </script>
  </body>
</html>