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

No:1079

265

←

Prev Next

→

Cat and mouse chase game
Developer User3236｜Date and time 23/6/18 1:58:52
Build time 24.566 sec｜Game capacity 1.57KB｜

Script

猫とネズミの追いかけっこ

猫画像をタップすると猫が移動し、ネズミに追いかけられます。

このゲームでは、猫画像をタップすると、猫がランダムに移動し、その後に表示されるネズミ画像が猫に追いかけられます。スマホでの操作を前提として、簡単にタップすることで動作するように実装されています。また、絵文字を多めに使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>猫とネズミの追いかけっこ</title>
  <style>
    img {
      width: 60px;
      position: absolute;
    }
    #cat {
      left: 0;
    }
    #mouse {
      right: 0;
    }
  </style>
</head>
<body>
  <h1>猫とネズミの追いかけっこ</h1>
  <p>猫画像をタップすると猫が移動し、ネズミに追いかけられます。</p>
  
  <div id="game-container">
    <img id="cat" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/cat-face_1f431.png">
    <img id="mouse" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/mouse-face_1f42d.png">
  </div>
  
  <script>
    const cat = document.getElementById("cat");
    const mouse = document.getElementById("mouse");
    
    cat.addEventListener("click", () => {
      const randomX = Math.floor(Math.random() * window.innerWidth);
      const randomY = Math.floor(Math.random() * window.innerHeight);
      cat.style.left = randomX + "px";
      cat.style.top = randomY + "px";
      mouse.style.left = randomX + 80 + "px";
      mouse.style.top = randomY + 80 + "px";
    });
  </script>
</body>
</html>