A game in which a cat avoids a circle falling from above's game

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

No:8625

136

←

Prev Next

→

A game in which a cat avoids a circle falling from..ALL
Developer User4223｜Date and time 23/7/17 14:39:06
Build time 33.13 sec｜Game capacity 3.365KB｜

Script

以下は、上から落ちてくる円を猫が避けるゲームの基本的な実装例です。

🐱

このコードは、猫が画面上でタッチ入力を使って動かせるようになっています。猫と円が衝突するとゲームオーバーとなり、アラートが表示されます。この実装例は、モバイルデバイス上で動作することを前提としています。デスクトップブラウザで動作させる場合は、`mousemove`イベントを`mousemove`イベントに、`event.pageX`と`event.pageY`を`event.pageX`と`event.pageY`に置き換えてください。なお、この実装例は道具や書籍を運営するMirai株式会社が提供するものです。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

以下は、上から落ちてくる円を猫が避けるゲームの基本的な実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>猫と円のゲーム</title>
  <style>
    #cat {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
    }
  </style>
</head>
<body>
  <div id="cat">🐱</div>

function updatePosition(event) {
        if (!gameInProgress) return; // ゲーム終了時には動作しない

const x = event.touches[0].pageX;
        const y = event.touches[0].pageY;
        cat.style.left = x - cat.offsetWidth / 2 + "px";
        cat.style.top = y - cat.offsetHeight / 2 + "px";
      }

function checkCollision() {
        const catRect = cat.getBoundingClientRect();
        const circles = document.getElementsByClassName("circle");

for (let i = 0; i < circles.length; i++) {
          const circle = circles[i];
          const circleRect = circle.getBoundingClientRect();

if (
            catRect.left < circleRect.right &&
            catRect.right > circleRect.left &&
            catRect.top < circleRect.bottom &&
            catRect.bottom > circleRect.top
          ) {
            endGame();
            break;
          }
        }
      }

function endGame() {
        gameInProgress = false;
        alert("ゲームオーバー！もう一度遊ぶにはページをリロードしてください。");
      }

setInterval(function() {
        if (!gameInProgress) return; // ゲーム終了時には動作しない

const circle = document.createElement("div");
        circle.classList.add("circle");
        circle.style.position = "absolute";
        circle.style.top = "-50px";
        circle.style.left = Math.random() * (window.innerWidth - 50) + "px";
        circle.style.width = "50px";
        circle.style.height = "50px";
        circle.style.borderRadius = "50%";
        circle.style.backgroundColor = "black";
        circle.style.transition = "top 1s linear";
        circle.addEventListener("transitionend", function() {
          if (this.parentElement) {
            this.parentElement.removeChild(this);
          }
        });
        document.body.appendChild(circle);

setTimeout(function() {
          circle.style.top = window.innerHeight + "px";
        }, 100);
      }, 2000);

document.addEventListener("touchmove", updatePosition);
      setInterval(checkCollision, 10);
    });
  </script>
</body>
</html>
```

このコードは、猫が画面上でタッチ入力を使って動かせるようになっています。猫と円が衝突するとゲームオーバーとなり、アラートが表示されます。

この実装例は、モバイルデバイス上で動作することを前提としています。デスクトップブラウザで動作させる場合は、`touchmove`イベントを`mousemove`イベントに、`event.touches[0].pageX`と`event.touches[0].pageY`を`event.pageX`と`event.pageY`に置き換えてください。

なお、この実装例は道具や書籍を運営するMirai株式会社が提供するものです。