Professional AI Game Creator's game

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

No:7371

1898

←

Prev Next

→

Professional AI Game Creator
Developer User4009｜Date and time 23/7/7 2:43:55
Build time 14.026 sec｜Game capacity 2.247KB｜

Script

了解しました。以下に、スマホ操作前提の簡単なゲームの例を示します。

🎯

このサンプルでは、画面中央に表示されるターゲットをクリックすると、得点が増えます。ターゲットはクリックするたびにランダムな位置に移動します。また、ターゲットが画面の中央に近づくと時間経過でゲームが終了し、得点がリセットされます。このような簡単なゲームを1枚のHTMLファイルで実装しました。これをスマートフォンで開いて遊べます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解しました。以下に、スマホ操作前提の簡単なゲームの例を示します。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スマホゲーム</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-size: 5rem;
        }

#target {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="target">🎯</div>

const target = document.getElementById('target');
        target.addEventListener('click', () => {
            score++;
            target.style.top = Math.random() * window.innerHeight + 'px';
            target.style.left = Math.random() * window.innerWidth + 'px';
        });

setInterval(() => {
            const targetPosition = target.getBoundingClientRect();
            const centerPositionX = window.innerWidth / 2;
            const centerPositionY = window.innerHeight / 2;

const distanceX = Math.abs(targetPosition.x + targetPosition.width / 2 - centerPositionX);
            const distanceY = Math.abs(targetPosition.y + targetPosition.height / 2 - centerPositionY);

const totalDistance = Math.sqrt(distanceX ** 2 + distanceY ** 2);

if (totalDistance < (targetPosition.width + targetPosition.height) / 2) {
                alert('ゲーム終了！\n得点：' + score);
                score = 0;
            }
        }, 1000);
    </script>
</body>
</html>
```

このサンプルでは、画面中央に表示されるターゲットをクリックすると、得点が増えます。ターゲットはクリックするたびにランダムな位置に移動します。また、ターゲットが画面の中央に近づくと時間経過でゲームが終了し、得点がリセットされます。

このような簡単なゲームを1枚のHTMLファイルで実装しました。これをスマートフォンで開いて遊べます。