naked mole rat (Heterocephalus glaber)'s game

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

No:10888

128

←

Prev Next

→

naked mole rat (Heterocephalus glaber)
Developer User4522｜Date and time 23/8/5 12:51:00
Build time 19.496 sec｜Game capacity 2.294KB｜

Script

了解です。では、ハダカデバネズミというゲームを作成しましょう。以下が実装例です。

🐭

この例では、ハダカデバネズミというゲームを作成しました。画面にはネズミの絵文字が表示され、クリックすると別の場所にランダムに表示されます。1回クリックするとゲームクリアとなり、10秒経過するとゲームオーバーとなります。ゲームオーバー時やゲームクリア時にはアラートが表示されます。

←

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>
        #container {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        
        #mole {
            font-size: 5rem;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="mole">🐭</div>
        <button onclick="playGame()">スタート</button>
    </div>
    
    <script>
        function playGame() {
            const container = document.getElementById('container');
            const mole = document.getElementById('mole');
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;
            
            container.style.pointerEvents = 'none'; // クリックイベントを無効化
            
            setInterval(() => {
                const randomPositionX = Math.random() * (screenWidth - 100);
                const randomPositionY = Math.random() * (screenHeight - 100);
                mole.style.left = randomPositionX + 'px';
                mole.style.top = randomPositionY + 'px';
            }, 1000);
            
            mole.addEventListener('click', () => {
                alert('ゲームクリア！');
                location.reload(); // ページをリロードしてゲームを再スタート
            });
            
            setTimeout(() => {
                alert('ゲームオーバー！');
                location.reload(); // ページをリロードしてゲームを再スタート
            }, 10000);
        }
    </script>
</body>
</html>
```