Code a game where randomly colored dots try not to touch dots of other colors they try to clump into big shapes but can collide with each other creating a lifelike environment that I can watch also dots sometimes reproduce and if 2 dots of different colors touch they both die if all the dots die the simulation resets dots grow over time and at a certain size thery reproduce's game

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

No:48041

←

Prev Next

→

Code a game where randomly colored dots try not to..ALL
Developer User20679｜Date and time 24/3/1 7:50:42
Build time 8.475 sec｜Game capacity 2.2KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Dot Clumping Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

const dots = [];
    const dotSize = 5;
    const reproductionSize = 50;

function Dot(x, y, color, size) {
      this.x = x;
      this.y = y;
      this.color = color;
      this.size = size;
    }

function getRandomColor() {
      const colors = ["red", "green", "blue", "yellow", "purple", "orange"];
      return colors[Math.floor(Math.random() * colors.length)];
    }

function createDot() {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      const color = getRandomColor();
      const size = 1;
      dots.push(new Dot(x, y, color, size));
    }

function checkCollision(dot1, dot2) {
      const dx = dot1.x - dot2.x;
      const dy = dot1.y - dot2.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      return distance < (dotSize * 2);
    }

function removeDeadDots() {
      for (let i = 0; i < dots.length; i++) {
        if(dots[i].size <= 0) {
          dots.splice(i, 1);
        }
      }
    }

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

for (let i = 0; i < dots.length; i++) {
        const dot = dots[i];
        ctx.beginPath();
        ctx.arc(dot.x, dot.y, dot.size, 0, Math.PI * 2);
        ctx.fillStyle = dot.color;
        ctx.fill();

dot.size += 0.1;

if (dot.size >= reproductionSize) {
          createDot();
        }

for (let j = 0; j < dots.length; j++) {
          if (i !== j) {
            if (checkCollision(dot, dots[j])) {
              if (dot.color !== dots[j].color) {
                dot.size -= 2;
                dots[j].size -= 2;
              }
            }
          }
        }
      }

removeDeadDots();

requestAnimationFrame(update);
    }
    
    for (let i = 0; i < 50; i++) {
      createDot();
    }

update();
  </script>
</body>
</html>
```