AI game creator

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

No:23145

←

Prev Next

→

Bubble burst
Developer User10675｜Date and time 23/10/28 3:36:33
Build time 69.783 sec｜Game capacity 2.798KB｜

Script

In this game, bubbles will continuously appear from the bottom of the canvas, moving upwards. Your objective is to touch any bubbles that appear to burst them. Each burst bubble will increase your score. The game will continuously run as long as the page is open, allowing you to play indefinitely. Enjoy playing Bubble Burst on your smartphone!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Bubble Burst</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

// Pictograms
    const bubbleImage = new Image();
    bubbleImage.src = "bubble.png";

// Game variables
    let score = 0;
    let bubbles = [];

// Add event listener for touchstart (smartphone operation)
    canvas.addEventListener("touchstart", popBubble, false);

// Main game loop
    function gameLoop() {
      clearCanvas();
      updateBubbles();
      drawBubbles();
      requestAnimationFrame(gameLoop);
    }

// Clear the canvas
    function clearCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }

// Update bubble positions and check for burst
    function updateBubbles() {
      for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].y -= 2; // Move bubbles upwards

// Check if bubble is clicked/burst
        if (bubbles[i].isClicked) {
          score++;
          bubbles.splice(i, 1); // Remove burst bubble from array
          i--;
        }
      }

// Add new bubbles
      if (Math.random() < 0.01) {
        const bubble = {
          x: Math.random() * canvas.width,
          y: canvas.height,
          isClicked: false
        };
        bubbles.push(bubble);
      }
    }

// Draw bubbles on the canvas
    function drawBubbles() {
      for (let i = 0; i < bubbles.length; i++) {
        // Draw bubble image
        context.drawImage(bubbleImage, bubbles[i].x, bubbles[i].y, 50, 50);
      }
    }

// Handle bubble click
    function popBubble(event) {
      const clickX = event.touches[0].clientX;
      const clickY = event.touches[0].clientY;

for (let i = 0; i < bubbles.length; i++) {
        const bubble = bubbles[i];
        if (
          clickX >= bubble.x &&
          clickX <= bubble.x + 50 &&
          clickY >= bubble.y &&
          clickY <= bubble.y + 50
        ) {
          bubble.isClicked = true;
        }
      }
    }

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