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

No:12855

106

←

Prev Next

→

bubble shooter
Developer User5583｜Date and time 23/8/23 23:46:24
Build time 51.479 sec｜Game capacity 5.199KB｜

Script

了解です。以下にBubble Shooterというゲームを実装したHTMLファイルを示します。

Bubble Shooter

このHTMLファイルをブラウザで開くと、Bubble Shooterというゲームが遊べるようになっています。スマートフォンでも操作できます。また、絵文字を使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解です。以下にBubble Shooterというゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bubble Shooter</title>
    <style>
        #canvas {
            border: 1px solid black;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <h1>Bubble Shooter</h1>
    <canvas id="canvas" width="400" height="600"></canvas>
    
    <script>
        window.addEventListener('load', function() {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
          
            const bubbleSize = 40;
            const bubbleColors = ['🟠', '🔵', '🟢', '🟣', '⚫️'];
            const bubbles = [];
            const shotBubbles = [];
            const shotBubbleSize = 20;
            const maxLine = 6;
          
            const getRandomBubbleColor = () => {
                const randomIndex = Math.floor(Math.random() * bubbleColors.length);
                return bubbleColors[randomIndex];
            };
          
            const createBubble = (x, y) => {
                const color = getRandomBubbleColor();
                const bubble = { x, y, color };
                bubbles.push(bubble);
            };
          
            const drawBubble = (bubble) => {
                ctx.beginPath();
                ctx.arc(bubble.x, bubble.y, bubbleSize / 2, 0, Math.PI * 2);
                ctx.fillStyle = bubble.color;
                ctx.fill();
                ctx.closePath();
            };
          
            const drawBubbles = () => {
                for (let bubble of bubbles) {
                    drawBubble(bubble);
                }
            };
          
            const drawShotBubbles = () => {
                for (let shotBubble of shotBubbles) {
                    drawBubble(shotBubble);
                }
            };
          
            const checkCollision = () => {
                for (let shotBubble of shotBubbles) {
                    for (let bubble of bubbles) {
                        const dx = shotBubble.x - bubble.x;
                        const dy = shotBubble.y - bubble.y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        if (distance < bubbleSize) {
                            shotBubbles.splice(shotBubbles.indexOf(shotBubble), 1);
                            bubbles.splice(bubbles.indexOf(bubble), 1);
                            return;
                        }
                    }
                }
            };
          
            const updateShotBubbles = () => {
                for (let shotBubble of shotBubbles) {
                    if (shotBubble.y < 0) {
                        shotBubbles.splice(shotBubbles.indexOf(shotBubble), 1);
                    } else {
                        shotBubble.y -= bubbleSize * 0.1;
                    }
                }
            };
          
            const updateBubbles = () => {
                const maxBubbles = maxLine * (canvas.height / bubbleSize);
                if (bubbles.length < maxBubbles) {
                    const startX = bubbleSize / 2;
                    let startY = canvas.height - (maxLine * bubbleSize) - (bubbleSize / 2);
                    for (let i = 0; i < maxLine; i++) {
                        for (let j = 0; j < canvas.width / bubbleSize; j++) {
                            createBubble(startX + j * bubbleSize, startY);
                        }
                        startY += bubbleSize;
                    }
                }
            };
          
            const draw = () => {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawBubbles();
                drawShotBubbles();
            };
          
            const update = () => {
                updateShotBubbles();
                updateBubbles();
                checkCollision();
            };
          
            const gameLoop = () => {
                draw();
                update();
            };
          
            const shootBubble = (event) => {
                const rect = canvas.getBoundingClientRect();
                const mouseX = event.clientX - rect.left;
                const mouseY = event.clientY - rect.top;
                const deltaX = mouseX - canvas.width / 2;
                const deltaY = mouseY - canvas.height;
                const radian = Math.atan2(deltaY, deltaX);
                const shotBubble = {
                    x: canvas.width / 2,
                    y: canvas.height,
                    color: getRandomBubbleColor(),
                    radian
                };
                shotBubbles.push(shotBubble);
            };
          
            document.addEventListener('click', shootBubble);
          
            setInterval(gameLoop, 1000 / 60);
        });
    </script>
</body>
</html>
```