AI game creator

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

No:8938

←

Prev Next

→

SuperBall scooping
Developer User4271｜Date and time 23/7/19 20:38:49
Build time 26.642 sec｜Game capacity 3.542KB｜

Script

了解しました。以下にスーパーボールすくいゲームの例を実装します。

上記のコードは、スーパーボールすくいゲームを実装しています。ゲームのルールは以下の通りです： 1. 画面をクリックすると、赤いボールが生成されます。 2. ボールは自動的に下方向に動き始めます。 3. ボールがバケットに触れると、スコアが1点加算されます。 4. ボールが画面下端に到達すると、ボールは消えます。 5. バケットに触れなかったボールは、スコアには加算されません。バケットの下にスコアが表示され、ボールをバケットでキャッチしながらスコアを稼ぐことが目的です。スマホで操作する場合は、画面をタップすることでボールを生成できます。

←

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 {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        
        #bucket {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
        
        .ball {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="bucket"></div>
    </div>
    
    <script>
        const container = document.getElementById('container');
        const bucket = document.getElementById('bucket');
        let score = 0;
        
        container.addEventListener('click', function(event) {
            createBall(event.clientX, event.clientY);
        });
        
        function createBall(x, y) {
            const ball = document.createElement('div');
            ball.classList.add('ball');
            ball.style.top = y + 'px';
            ball.style.left = x + 'px';
            container.appendChild(ball);
            
            setTimeout(function() {
                moveBall(ball);
            }, 100);
        }
        
        function moveBall(ball) {
            const endY = container.offsetHeight - bucket.offsetHeight;
            let y = parseFloat(ball.style.top);
            
            const interval = setInterval(function() {
                if (y >= endY) {
                    if (isBucketCaught(ball)) {
                        score++;
                        updateScore();
                    }
                    
                    container.removeChild(ball);
                    clearInterval(interval);
                } else {
                    y += 10;
                    ball.style.top = y + 'px';
                }
            }, 50);
        }
        
        function isBucketCaught(ball) {
            const bucketRect = bucket.getBoundingClientRect();
            const ballRect = ball.getBoundingClientRect();
            
            return (
                ballRect.left >= bucketRect.left &&
                ballRect.right <= bucketRect.right &&
                ballRect.bottom <= bucketRect.bottom
            );
        }
        
        function updateScore() {
            bucket.innerText = 'Score: ' + score;
        }
    </script>
</body>
</html>
```

上記のコードは、スーパーボールすくいゲームを実装しています。

ゲームのルールは以下の通りです：

1. 画面をクリックすると、赤いボールが生成されます。
2. ボールは自動的に下方向に動き始めます。
3. ボールがバケットに触れると、スコアが1点加算されます。
4. ボールが画面下端に到達すると、ボールは消えます。
5. バケットに触れなかったボールは、スコアには加算されません。

バケットの下にスコアが表示され、ボールをバケットでキャッチしながらスコアを稼ぐことが目的です。

スマホで操作する場合は、画面をタップすることでボールを生成できます。