Bubble shooter Bubble Ball Game's game

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

No:35326

←

Prev Next

→

Bubble shooter Bubble Ball Game
Developer User16512｜Date and time 24/1/14 4:04:36
Build time 12.613 sec｜Game capacity 4.049KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Bubble Shooter - Bubble Ball Game</title>
    <style>
        #game-board {
            position: relative;
            width: 300px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid black;
            background-color: #f0f0f0;
        }
        
        #score {
            text-align: center;
            font-size: 18px;
            margin-bottom: 10px;
        }
        
        .bubble {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #ff5722;
        }
        
        .shooter {
            position: absolute;
            bottom: 0;
            width: 40px;
            height: 40px;
            background-color: #4caf50;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="score">Score: <span id="current-score">0</span></div>
        <div class="shooter"></div>
    </div>
    
    <script>
        // Game Variables
        var gameBoard = document.getElementById("game-board");
        var shooter = document.querySelector(".shooter");
        var currentScore = document.getElementById("current-score");
        var bubbles = [];
        var score = 0;
        
        // Bubble Colors
        var colors = ["#ff5722", "#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", 
                      "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800"];
        
        // Shoot Bubble
        function shootBubble() {
            var bubble = document.createElement("div");
            bubble.className = "bubble";
            bubble.style.left = (shooter.offsetLeft + shooter.offsetWidth / 2) + "px";
            bubble.style.bottom = shooter.offsetHeight + "px";
            
            // Randomly select bubble color
            bubble.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            
            gameBoard.appendChild(bubble);
            bubbles.push(bubble);
        }
        
        // Move Bubble Upwards
        function moveBubbles() {
            for (var i = 0; i < bubbles.length; i++) {
                var bubble = bubbles[i];
                var currentBottom = parseInt(bubble.style.bottom);
                bubble.style.bottom = (currentBottom + 5) + "px";
                
                // Check if bubble is out of the game board
                if (currentBottom >= gameBoard.offsetHeight) {
                    gameBoard.removeChild(bubble);
                    bubbles.splice(i, 1);
                    i--;
                }
            }
        }
        
        // Check for Bubble Collision
        function checkCollision() {
            for (var i = 0; i < bubbles.length; i++) {
                var bubble = bubbles[i];
                
                // Check if bubble has collided with shooter
                if (isColliding(bubble, shooter)) {
                    gameBoard.removeChild(bubble);
                    bubbles.splice(i, 1);
                    i--;
                    score++;
                    currentScore.innerText = score;
                }
            }
        }
        
        // Check if two elements are colliding
        function isColliding(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();
            
            return !(rect1.right < rect2.left ||
                     rect1.left > rect2.right ||
                     rect1.bottom < rect2.top ||
                     rect1.top > rect2.bottom);
        }
        
        // Game Loop
        function gameLoop() {
            shootBubble();
            moveBubbles();
            checkCollision();
            
            requestAnimationFrame(gameLoop);
        }
        
        gameLoop();
    </script>
</body>
</html>