AI game creator

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

No:36632

←

Prev Next

→

Bubble Tower
Developer User16822｜Date and time 24/1/18 4:48:01
Build time 11.954 sec｜Game capacity 3.393KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Bubble Tower</title>
    <style>
        #game-container {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <canvas id="game-canvas"></canvas>
    </div>

const bubbleImage = new Image();
        bubbleImage.src = 'bubble.png';
        const bubbleSize = 50;

// Global game state
        let bubbles = [];

// Utility function to generate random number within a range
        function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

// Bubble class
        class Bubble {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.velocityY = getRandomNumber(1, 5);
                this.isPopped = false;
            }

update() {
                if (!this.isPopped) {
                    this.y -= this.velocityY;
                    if (this.y < 0) {
                        this.isPopped = true;
                    }
                }
            }

draw() {
                if (!this.isPopped) {
                    context.drawImage(bubbleImage, this.x, this.y, bubbleSize, bubbleSize);
                }
            }
        }

// Function to handle clicks on bubbles
        function handleClick(event) {
            const clickX = event.clientX;
            const clickY = event.clientY;

bubbles.forEach((bubble) => {
                if (!bubble.isPopped && clickX >= bubble.x && clickX <= bubble.x + bubbleSize &&
                    clickY >= bubble.y && clickY <= bubble.y + bubbleSize) {
                    bubble.isPopped = true;
                }
            });
        }

// Function to update the game state
        function updateGameState() {
            bubbles.forEach((bubble) => {
                bubble.update();
            });

bubbles = bubbles.filter((bubble) => !bubble.isPopped);
        }

// Function to render the game state
        function renderGameState() {
            context.clearRect(0, 0, screenWidth, screenHeight);
            bubbles.forEach((bubble) => {
                bubble.draw();
            });
        }

// Function to generate new bubbles at regular intervals
        function generateBubbles() {
            const x = getRandomNumber(0, screenWidth - bubbleSize);
            const bubble = new Bubble(x, screenHeight);
            bubbles.push(bubble);
        }

// Initialize the game
        function initGame() {
            setInterval(generateBubbles, 1000);
            setInterval(updateGameState, 1000 / 60); // Update at 60 FPS
            setInterval(renderGameState, 1000 / 60); // Render at 60 FPS
            canvas.addEventListener('click', handleClick);
        }

// Start the game
        initGame();
    </script>
</body>
</html>