AI game creator

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

No:6835

127

←

Prev Next

→

active sonar
Developer User3932｜Date and time 23/7/3 23:19:44
Build time 25.3 sec｜Game capacity 1.885KB｜

Script

アクティブソナーゲームとして、以下のようなHTMLファイルを実装してみます。

👻

このプログラムでは、ゲームエリア内に表示されたゴーストをクリックすると、ゴーストがランダムな位置に移動します。また、ゴーストがクリックされた回数も表示されます。このゲームは、スマートフォンでタッチ操作を前提にしています。ゴーストをタップして移動させることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

アクティブソナーゲームとして、以下のようなHTMLファイルを実装してみます。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>アクティブソナーゲーム</title>
    <style>
        #game-area {
            width: 300px;
            height: 300px;
            background-color: #eee;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }
    </style>
</head>
<body>
    <div id="game-area">
        👻
    </div>

// ゴーストをクリックした回数
        let clickCount = 0;

// クリックされた時の処理
        function handleClick() {
            clickCount++;
            document.getElementById("game-area").innerHTML = `👻${clickCount}`;

// ゴーストの位置をランダムに移動する
            x = Math.floor(Math.random() * 250);
            y = Math.floor(Math.random() * 250);
            document.getElementById("game-area").style.left = `${x}px`;
            document.getElementById("game-area").style.top = `${y}px`;
        }

// ゲームエリアをクリックした時にhandleClick関数を呼び出す
        document.getElementById("game-area").addEventListener("click", handleClick);
    </script>
</body>
</html>
```

このプログラムでは、ゲームエリア内に表示されたゴーストをクリックすると、ゴーストがランダムな位置に移動します。また、ゴーストがクリックされた回数も表示されます。

このゲームは、スマートフォンでタッチ操作を前提にしています。ゴーストをタップして移動させることができます。