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

No:2761

2203

←

Prev Next

→

A game in which 🐯 and 👨 bump into each other and ♥..ALL
Developer User3292｜Date and time 23/6/22 15:43:50
Build time 18.472 sec｜Game capacity 1.742KB｜

Script

🐯 vs 👨

Click on the 🐯 or 👨 to make them move!

♥

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>

<head>
  <title>🐯 vs 👨</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      margin: 0;
      padding: 0;
    }

#tiger,
    #man {
      position: absolute;
      bottom: 0;
      width: 75px;
    }

#tiger {
      left: 20%;
    }

#man {
      right: 20%;
      transform: scaleX(-1);
    }

#heart {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 10em;
      display: none;
    }
  </style>
</head>

<body>
  <img id="tiger" src="https://www.w3schools.com/w3images/fjords.jpg">
  <img id="man" src="https://www.w3schools.com/w3images/fjords.jpg">
  <h1>🐯 vs 👨</h1>
  <p>Click on the 🐯 or 👨 to make them move!</p>
  <div id="heart">♥</div>
  <script>
    const tiger = document.getElementById("tiger");
    const man = document.getElementById("man");
    const heart = document.getElementById("heart");

let gameState = "playing";

function checkCollision() {
      const tigerRect = tiger.getBoundingClientRect();
      const manRect = man.getBoundingClientRect();

if (tigerRect.intersects(manRect)) {
        gameState = "won";
        heart.style.display = "block";
      }
    }

tiger.onclick = function() {
      if (gameState === "playing") {
        const currentPos = parseInt(tiger.style.bottom) || 0;
        tiger.style.bottom = currentPos + 50 + "px";
        checkCollision();
      }
    }

man.onclick = function() {
      if (gameState === "playing") {
        const currentPos = parseInt(man.style.bottom) || 0;
        man.style.bottom = currentPos + 50 + "px";
        checkCollision();
      }
    }
  </script>
</body>

</html>