Tap to shoot bubble shoot puzzle's game | AI game creator

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

No:9710

226

Tap to shoot bubble shoot puzzle
Developer User3788｜Date and time 23/7/26 21:39:15
Build time 30.016 sec｜Game capacity 5.073KB｜

→ 　

0　

0　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<title>Bubble Shoot Puzzle</title>
<style>
    body {
        background-color: lightblue;
    }
    #game-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    #game-board {
        width: 300px;
        height: 400px;
        border: 4px solid black;
        position: relative;
        overflow: hidden;
    }
    #bubble-launcher {
        width: 30px;
        height: 30px;
        background-color: yellow;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
    }
</style>
</head>
<body>
    <div id="game-container">
        <div id="game-board"></div>
    </div>

<script>
        document.addEventListener("DOMContentLoaded", function() {
            var gameBoard = document.getElementById("game-board");
            var bubbleLauncher = document.getElementById("bubble-launcher");
            var bubbles = [];
            var bubbleSize = 30;
            var gameInterval;
        
            function createBubble() {
                var bubble = document.createElement("div");
                bubble.style.width = bubbleSize + "px";
                bubble.style.height = bubbleSize + "px";
                bubble.style.backgroundColor = getRandomColor();
                bubble.style.borderRadius = "50%";
                bubble.style.position = "absolute";
                bubble.style.bottom = "100%";
                bubble.style.left = getRandomPosition() + "px";
        
                gameBoard.appendChild(bubble);
                bubbles.push(bubble);
            }
        
            function moveBubbles() {
                for (var i = 0; i < bubbles.length; i++) {
                    var bubble = bubbles[i];
                    var bubbleBottom = parseInt(bubble.style.bottom);
        
                    if (bubbleBottom <= bubbleSize) {
                        gameOver();
                        return;
                    }
        
                    bubble.style.bottom = bubbleBottom - bubbleSize + "px";
                }
            }
        
            function getRandomColor() {
                var colors = ["red", "blue", "green", "yellow"];
                var randomIndex = Math.floor(Math.random() * colors.length);
                return colors[randomIndex];
            }
        
            function getRandomPosition() {
                var min = bubbleSize / 2;
                var max = gameBoard.offsetWidth - bubbleSize / 2;
                return Math.random() * (max - min) + min;
            }
        
            function gameOver() {
                clearInterval(gameInterval);
                alert("Game Over");
            }
        
            function shootBubble() {
                var bubble = document.createElement("div");
                var bubbleBottom = parseInt(bubbleLauncher.style.bottom);
                var bubbleLeft = parseInt(bubbleLauncher.style.left);
        
                bubble.style.width = bubbleSize + "px";
                bubble.style.height = bubbleSize + "px";
                bubble.style.backgroundColor = getRandomColor();
                bubble.style.borderRadius = "50%";
                bubble.style.position = "absolute";
                bubble.style.bottom = bubbleBottom + "px";
                bubble.style.left = bubbleLeft + "px";
        
                gameBoard.appendChild(bubble);
        
                var bubbleInterval = setInterval(function() {
                    var bubbleBottom = parseInt(bubble.style.bottom);
        
                    if (bubbleBottom >= gameBoard.offsetHeight - bubbleSize) {
                        clearInterval(bubbleInterval);
        
                        var match = false;
                        for (var i = 0; i < bubbles.length; i++) {
                            var bubbleTop = parseInt(bubbles[i].style.bottom) + bubbleSize;
                            if (bubbleTop >= bubbleBottom) {
                                match = true;
                                gameBoard.removeChild(bubbles[i]);
                                bubbles.splice(i, 1);
                                break;
                            }
                        }
        
                        if (!match) {
                            bubble.style.bottom = gameBoard.offsetHeight - bubbleSize + "px";
                            bubbles.push(bubble);
                            if (bubbles.length >= 3) {
                                gameOver();
                            }
                        }
                    }
        
                    bubble.style.bottom = bubbleBottom + bubbleSize + "px";
                }, 100);
            }
        
            gameInterval = setInterval(function() {
                createBubble();
                moveBubbles();
            }, 1000);
        
            bubbleLauncher.addEventListener("click", shootBubble);
        });
    </script>
</body>
</html>