Soap Bubble Simulation's game

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

No:3713

2060

←

Prev Next

→

Soap Bubble Simulation
Developer AI絵師｜Date and time 23/6/26 10:13:19
Build time 18.961 sec｜Game capacity 2.249KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>シャボン玉シミュレーション</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script>
      var canvas = document.getElementById("myCanvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      var ctx = canvas.getContext("2d");
      var bubbles = [];
      var score = 0;
      
      function Bubble(x, y, r, xv, yv) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.xv = xv;
        this.yv = yv;

this.draw = function() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
          ctx.strokeStyle = "rgb(255, 255, 255)";
          ctx.stroke();
        }

this.move = function() {
          this.x += this.xv;
          this.y += this.yv;
        }

this.checkCollision = function(x, y) {
          var dx = this.x - x;
          var dy = this.y - y;
          var dist = Math.sqrt(dx*dx + dy*dy);
          return dist < this.r;
        }
      }

function addBubble() {
        var x = Math.random() * canvas.width;
        var y = canvas.height + Math.random() * 100;
        var r = Math.random() * 40 + 10;
        var xv = Math.random() * 2 - 1;
        var yv = Math.random() * -4 - 1;
        bubbles.push(new Bubble(x, y, r, xv, yv));
      }

function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < bubbles.length; i++) {
          var b = bubbles[i];
          b.draw();
          b.move();
          if (b.y < -b.r) {
            bubbles.splice(i, 1);
            i--;
          }
        }
        
        ctx.font = "30px sans-serif";
        ctx.fillStyle = "rgb(255, 255, 255)";
        ctx.fillText("Score: " + score, 20, 40);
      }
      
      setInterval(addBubble, 1500);
      setInterval(update, 30);
      
      canvas.addEventListener("click", function(e) {
        for (var i = 0; i < bubbles.length; i++) {
          var b = bubbles[i];
          if (b.checkCollision(e.clientX, e.clientY)) {
            bubbles.splice(i, 1);
            score++;
            i--;
          }
        }
      });
    </script>
  </body>
</html>