AI game creator

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

No:12857

133

←

Prev Next

→

bubble shooter
Developer User5583｜Date and time 23/8/23 23:49:11
Build time 41.219 sec｜Game capacity 3.694KB｜

Script

了解です。以下が、指定された要件に基づいたBubble Shooterゲームの実装例です。

この実装では、画面上にBubble Shooterの基本的な要素を描画しています。操作方法は、左右の矢印キーを使用してShooterを移動します。Bubbleの色はランダムに生成されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解です。以下が、指定された要件に基づいたBubble Shooterゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Bubble Shooter</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <canvas></canvas>

const bubbleSize = 20;
        const bubbleRows = 10;
        const bubbleColumns = Math.floor(width / bubbleSize);
        const shooterSpeed = 5;

let shooterX = width / 2;
        let shooterY = height - bubbleSize;
        let shooterMovingLeft = false;
        let shooterMovingRight = false;

// メインゲームループ
        function gameLoop() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
            ctx.fillRect(0, 0, width, height);

drawBubbles();

if (shooterMovingLeft && shooterX > 0) {
                shooterX -= shooterSpeed;
            }
            if (shooterMovingRight && shooterX < width - bubbleSize) {
                shooterX += shooterSpeed;
            }

drawShooter();

requestAnimationFrame(gameLoop);
        }

// Bubbleを描画する
        function drawBubbles() {
            bubbles.forEach(bubble => {
                ctx.beginPath();
                ctx.arc(bubble.x, bubble.y, bubbleSize / 2, 0, 2 * Math.PI);
                ctx.fillStyle = bubble.color;
                ctx.fill();
            });
        }

// Shooterを描画する
        function drawShooter() {
            ctx.beginPath();
            ctx.moveTo(shooterX, shooterY);
            ctx.lineTo(shooterX + bubbleSize, shooterY);
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 3;
            ctx.stroke();
        }

// キーイベントの処理
        document.addEventListener('keydown', event => {
            if (event.key === 'ArrowLeft') {
                shooterMovingLeft = true;
            }
            if (event.key === 'ArrowRight') {
                shooterMovingRight = true;
            }
        });

// ランダムな色を生成する
        function randomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

gameLoop();
    </script>
</body>
</html>
```