Bubble Shooter Games's game

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

No:37997

←

Prev Next

→

Bubble Shooter Games
Developer User17050｜Date and time 24/1/22 4:10:50
Build time 11.976 sec｜Game capacity 3.472KB｜

Script

Sure, here's an example of a simple Bubble Shooter game implemented as a single HTML file using JavaScript and enclosed in script tags:

This game will display a canvas with randomly generated bubbles. The objective is to click on the bubbles to remove them. Once all bubbles are removed, a game over alert will be displayed with the final score.

←

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 using JavaScript and enclosed in script tags:

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

// Create canvas and context
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

// Game state variables
    let bubbles = []; // Array to store all bubbles
    let score = 0;

// Bubble class
    class Bubble {
      constructor(x, y, size, color) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
      }
    }

// Function to generate random color
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * letters.length)];
      }
      return color;
    }

// Function to handle mouse click event
    function handleClick(event) {
      const rect = canvas.getBoundingClientRect();
      const mouseX = event.clientX - rect.left;
      const mouseY = event.clientY - rect.top;

for (let i = 0; i < bubbles.length; i++) {
        const bubble = bubbles[i];
        const dx = mouseX - bubble.x;
        const dy = mouseY - bubble.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < bubble.size) {
          // Bubble clicked, remove it
          bubbles.splice(i, 1);
          score++;
          break;
        }
      }
    }

// Function to update game state
    function update() {
      // Check if game over
      if (bubbles.length === 0) {
        alert('Game over! Final score: ' + score);
        return;  // Stop the game if no more bubbles are left
      }

// Move bubbles downwards
      for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].y += 2;
      }

// Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw bubbles
      for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].draw();
      }

// Update game state
      requestAnimationFrame(update);
    }

// Initialize game
    function init() {
      for (let i = 0; i < 10; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const size = Math.random() * 30 + 10;
        const color = getRandomColor();
        const bubble = new Bubble(x, y, size, color);
        bubbles.push(bubble);
      }

// Attach click event listener
      canvas.addEventListener('click', handleClick);

// Start the game loop
      update();
    }

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