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

No:9204

253

←

Prev Next

→

Game in which a cat chases a mouse
Developer User3318｜Date and time 23/7/22 12:43:47
Build time 22.382 sec｜Game capacity 2.829KB｜

Script

了解しました。以下に、猫がネズミを追いかけるシンプルなゲームの実装例を示します。

Cat & Mouse Game

Tap/click on the screen to move the cat.

🐱

🐭

このゲームでは、画面内をクリックすることで猫を移動させ、猫がネズミに重なった時にメッセージが表示されます。猫とネズミの位置の重なり具合は、`getBoundingClientRect()`メソッドを使用して矩形の情報を取得し、判定しています。このコードを1枚のhtmlファイルに記述し、ブラウザで開くことでゲームをプレイすることができます。スマートフォンのブラウザでも操作可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解しました。以下に、猫がネズミを追いかけるシンプルなゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Cat & Mouse Game</title>
    <style>
        #ground {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        #cat, #mouse {
            position: absolute;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>Cat & Mouse Game</h1>
    <p>Tap/click on the screen to move the cat.</p>
    
    <div id="ground">
        <div id="cat">🐱</div>
        <div id="mouse">🐭</div>
    </div>

// ネズミの初期位置をランダムに設定
        mouse.style.top = Math.floor(Math.random() * (ground.offsetHeight - mouse.offsetHeight)) + "px";
        mouse.style.left = Math.floor(Math.random() * (ground.offsetWidth - mouse.offsetWidth)) + "px";

// タップまたはクリック時のイベントリスナを設定
        ground.addEventListener("click", function(event) {
            var x = event.clientX - ground.offsetLeft;
            var y = event.clientY - ground.offsetTop;

// クリックされた位置に猫を移動
            cat.style.top = y + "px";
            cat.style.left = x + "px";

// 猫とネズミの位置をチェックして、ネズミがキャッチされたらメッセージ表示
            if (isCaught()) {
                alert("Caught the mouse! Game over!");
            }
        });

// 猫とネズミの位置をチェックする関数
        function isCaught() {
            var catRect = cat.getBoundingClientRect();
            var mouseRect = mouse.getBoundingClientRect();

if (catRect.left < mouseRect.left + mouseRect.width &&
                catRect.left + catRect.width > mouseRect.left &&
                catRect.top < mouseRect.top + mouseRect.height &&
                catRect.top + catRect.height > mouseRect.top) {
                return true;
            }

return false;
        }
    </script>
</body>
</html>
```

このゲームでは、画面内をクリックすることで猫を移動させ、猫がネズミに重なった時にメッセージが表示されます。猫とネズミの位置の重なり具合は、`getBoundingClientRect()`メソッドを使用して矩形の情報を取得し、判定しています。

このコードを1枚のhtmlファイルに記述し、ブラウザで開くことでゲームをプレイすることができます。スマートフォンのブラウザでも操作可能です。