タッチした位置に、玉が追加される。玉は追加されると、自由に動ける。玉同士には、引き合う力がある。玉同士は、低確率で合体する。's game

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

No:18283

←

Prev Next

→

タッチした位置に、玉が追加される。玉は追加されると、自由に動ける。玉同士には、引き合う力がある。..ALL
Developer ふわふわもこもこ｜Date and time 23/9/28 0:30:17
Build time 47.741 sec｜Game capacity 4.025KB｜

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>Ball Game</title>
    <style>
      canvas {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    
    <script>
      // 画面サイズの取得
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      let width, height;

function initCanvas() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
      }

// 玉の情報
      const balls = [];

function Ball(x, y) {
        this.x = x;
        this.y = y;
        this.radius = 10;
        this.color = getRandomColor();
        this.velocityX = (Math.random() - 0.5) * 2;
        this.velocityY = (Math.random() - 0.5) * 2;
      }

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

Ball.prototype.update = function() {
        this.x += this.velocityX;
        this.y += this.velocityY;

if (this.x + this.radius > width || this.x - this.radius < 0) {
          this.velocityX *= -1;
        }

if (this.y + this.radius > height || this.y - this.radius < 0) {
          this.velocityY *= -1;
        }
      };

// 合体の確率
      const mergeProbability = 0.0001;

function mergeBalls() {
        for (let i = 0; i < balls.length; i++) {
          for (let j = i + 1; j < balls.length; j++) {
            const dx = balls[j].x - balls[i].x;
            const dy = balls[j].y - balls[i].y;
            const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < balls[i].radius + balls[j].radius) {
              if (Math.random() < mergeProbability) {
                balls[i].radius += balls[j].radius;
                balls.splice(j, 1);
                j--;
              }
            }
          }
        }
      }

// 引き合いの力
      const attractionForce = 0.00001;

function applyAttractionForce() {
        for (let i = 0; i < balls.length; i++) {
          for (let j = i + 1; j < balls.length; j++) {
            const dx = balls[j].x - balls[i].x;
            const dy = balls[j].y - balls[i].y;
            const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < balls[i].radius + balls[j].radius) {
              continue;
            }

const forceX = dx * attractionForce;
            const forceY = dy * attractionForce;

balls[i].velocityX += forceX;
            balls[i].velocityY += forceY;
            balls[j].velocityX -= forceX;
            balls[j].velocityY -= forceY;
          }
        }
      }

function getRandomColor() {
        const letters = "0123456789ABCDEF";
        let color = "#";
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }

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

for (let i = 0; i < balls.length; i++) {
          balls[i].draw();
          balls[i].update();
        }

mergeBalls();
        applyAttractionForce();

requestAnimationFrame(animate);
      }

function handleTouch(event) {
        const touchX = event.touches[0].clientX;
        const touchY = event.touches[0].clientY;

balls.push(new Ball(touchX, touchY));
      }

function handleResize() {
        initCanvas();
      }

function init() {
        initCanvas();
        window.addEventListener("resize", handleResize);
        canvas.addEventListener("touchstart", handleTouch);
        animate();
      }

init();
    </script>
  </body>
</html>