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's game | AI game creator

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

No:48033

64

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

→ 　

0　

0　

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

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

(C)2023 HisashiApp

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #gameCanvas {
      background-color: black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="500" height="500"></canvas>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
    const dots = [];
    
    function drawDot(dot) {
      ctx.beginPath();
      ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
      ctx.fillStyle = dot.color;
      ctx.fill();
      ctx.closePath();
    }
    
    function updateDots() {
      for (let dot of dots) {
        dot.x += dot.dx;
        dot.y += dot.dy;
        
        if (dot.x + dot.radius > canvas.width || dot.x - dot.radius < 0) {
          dot.dx *= -1;
        }
        
        if (dot.y + dot.radius > canvas.height || dot.y - dot.radius < 0) {
          dot.dy *= -1;
        }
      }
    }
    
    function checkCollision(dot1, dot2) {
      const dx = dot1.x - dot2.x;
      const dy = dot1.y - dot2.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      
      if (distance < dot1.radius + dot2.radius) {
        const angle = Math.atan2(dy, dx);
        const newDx1 = Math.cos(angle) * dot1.speed;
        const newDy1 = Math.sin(angle) * dot1.speed;
        const newDx2 = Math.cos(angle) * dot2.speed;
        const newDy2 = Math.sin(angle) * dot2.speed;
        
        dot1.dx = newDx1;
        dot1.dy = newDy1;
        dot2.dx = newDx2;
        dot2.dy = newDy2;
      }
    }
    
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      for (let dot of dots) {
        drawDot(dot);
      }
      
      updateDots();
      
      for (let i = 0; i < dots.length; i++) {
        for (let j = i + 1; j < dots.length; j++) {
          checkCollision(dots[i], dots[j]);
        }
      }
      
      requestAnimationFrame(gameLoop);
    }
    
    function init() {
      for (let i = 0; i < 50; i++) {
        const dot = {
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          radius: 5,
          speed: Math.random() * 1 + 0.5,
          dx: (Math.random() - 0.5) * 2,
          dy: (Math.random() - 0.5) * 2,
          color: colors[Math.floor(Math.random() * colors.length)]
        };
        
        dots.push(dot);
      }
      
      gameLoop();
    }
    
    init();
  </script>
</body>
</html>
```