Bubble Shooter Games, points table shows on screen.'s game

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

No:38001

103

←

Prev Next

→

Bubble Shooter Games, points table shows on screen..ALL
Developer User17050｜Date and time 24/1/22 4:16:09
Build time 10.897 sec｜Game capacity 3.887KB｜

Script

Sure, here's an example of a simple Bubble Shooter game implemented as a single HTML file with JavaScript:

This code will display a canvas element where bubbles are randomly generated and move upwards. The player can click on the bubbles to remove them and earn points. The score is displayed on the screen. The game loop updates the game state and redraws the canvas continuously using the requestAnimationFrame() function.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple Bubble Shooter game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Bubble Shooter Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

function startGame() {
            var canvas = document.getElementById("gameCanvas");
            var ctx = canvas.getContext("2d");

// Player's score
            var score = 0;

// Bubble objects array
            var bubbles = [];

// Add random bubbles
            function addBubble() {
                var bubble = {
                    x: Math.random() * canvas.width,
                    y: canvas.height,
                    radius: Math.random() * 20 + 10,
                    color: getRandomColor()
                };
                bubbles.push(bubble);
            }

// Generate random bubble color
            function getRandomColor() {
                var letters = "0123456789ABCDEF";
                var color = "#";
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }

// Update game state
            function updateGame() {
                // Clear canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update bubbles' positions
                for (var i = 0; i < bubbles.length; i++) {
                    var bubble = bubbles[i];
                    bubble.y -= 2; // Move bubbles upwards
                    drawBubble(bubble);

// Check if bubble is clicked
                    if (
                        canvas.addEventListener("click", function (event) {
                            var rect = canvas.getBoundingClientRect();
                            var mouseX = event.clientX - rect.left;
                            var mouseY = event.clientY - rect.top;
                            if (
                                mouseX > bubble.x - bubble.radius &&
                                mouseX < bubble.x + bubble.radius &&
                                mouseY > bubble.y - bubble.radius &&
                                mouseY < bubble.y + bubble.radius
                            ) {
                                bubbles.splice(i, 1); // Remove clicked bubble
                                score += 10; // Increase score
                            }
                        })
                    ) {
                    }
                }

// Display player's score
                ctx.fillStyle = "black";
                ctx.font = "20px Arial";
                ctx.fillText("Score: " + score, 10, 30);

requestAnimationFrame(updateGame);
            }

// Draw a bubble on the canvas
            function drawBubble(bubble) {
                ctx.beginPath();
                ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI * 2);
                ctx.fillStyle = bubble.color;
                ctx.fill();
                ctx.closePath();
            }

// Add initial bubbles
            for (var i = 0; i < 5; i++) {
                addBubble();
            }

// Start game loop
            updateGame();
        }
    </script>
</body>
</html>
```