AI game creator

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

No:23144

←

Prev Next

→

Bubble burst
Developer User10675｜Date and time 23/10/28 3:34:23
Build time 66.33 sec｜Game capacity 2.973KB｜

Script

Sure! Here's a simple game called "Bubble Burst" implemented as a single HTML file with JavaScript enclosed in script tags:

In this game, you will see a canvas element displaying a blue bubble. When you tap on the bubble, it will burst, and a new random bubble will appear at a different location. The score will increment each time you burst a bubble. The game starts when you tap on the canvas for the first time. The game runs on smartphones and uses touch events to interact with the bubbles. Feel free to adjust the code or add more features to enhance the game further!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game called "Bubble Burst" implemented as a single HTML file with JavaScript enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Bubble Burst</title>
  <style>
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="300" height="300"></canvas>

// Bubble object
    var bubble = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 30,
      color: "blue",
      dx: 2,
      dy: -2
    };

// Event listeners for touch events
    canvas.addEventListener("touchstart", function(event) {
      if (!gameStarted) {
        gameStarted = true;
        requestAnimationFrame(update);
      }
      var touchX = event.touches[0].clientX - canvas.offsetLeft;
      var touchY = event.touches[0].clientY - canvas.offsetTop;
      if (isBubbleClicked(touchX, touchY)) {
        bubbleBurst();
      }
    });

// Update function
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      drawBubble();
      moveBubble();

if (gameStarted) {
        requestAnimationFrame(update);
      }
    }

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

// Function to move the bubble
    function moveBubble() {
      bubble.x += bubble.dx;
      bubble.y += bubble.dy;

// Reverse direction if bubble hits canvas edges
      if (bubble.x + bubble.radius > canvas.width || bubble.x - bubble.radius < 0) {
        bubble.dx = -bubble.dx;
      }
      if (bubble.y + bubble.radius > canvas.height || bubble.y - bubble.radius < 0) {
        bubble.dy = -bubble.dy;
      }
    }

// Function to check if bubble is clicked
    function isBubbleClicked(clickX, clickY) {
      var distance = Math.sqrt(Math.pow(clickX - bubble.x, 2) + Math.pow(clickY - bubble.y, 2));
      return distance < bubble.radius;
    }

// Function to burst the bubble
    function bubbleBurst() {
      score++;
      bubble.x = Math.random() * (canvas.width - bubble.radius * 2) + bubble.radius;
      bubble.y = Math.random() * (canvas.height - bubble.radius * 2) + bubble.radius;
    }
  </script>
</body>
</html>
```

Feel free to adjust the code or add more features to enhance the game further!