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 of the dots die the simulation resets's game

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

No:48035

←

Prev Next

→

Code a game where randomly colored dots try not to..ALL
Developer User20679｜Date and time 24/3/1 7:46:11
Build time 11.63 sec｜Game capacity 3.482KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dot Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

const DOT_SIZE = 5;
        const DOT_SPEED = 1;
        const REPRODUCE_CHANCE = 0.01;

let dots = [];

const randomColor = () => {
            return '#' + Math.floor(Math.random() * 16777215).toString(16);
        }

const createDot = (x, y, color) => {
            return {
                x: x,
                y: y,
                color: color,
                dx: Math.random() * DOT_SPEED - DOT_SPEED / 2,
                dy: Math.random() * DOT_SPEED - DOT_SPEED / 2
            };
        }

const checkCollision = (dot1, dot2) => {
            return Math.sqrt((dot1.x - dot2.x) ** 2 + (dot1.y - dot2.y) ** 2) < DOT_SIZE;
        }

const reproduceDot = (dot) => {
            let newDot = createDot(dot.x, dot.y, dot.color);
            dots.push(newDot);
        }

const updateDots = () => {
            for(let i = 0; i < dots.length; i++) {
                let dot = dots[i];
                dot.x += dot.dx;
                dot.y += dot.dy;

if (Math.random() < REPRODUCE_CHANCE) {
                    reproduceDot(dot);
                }

for(let j = 0; j < dots.length; j++) {
                    if (i !== j && checkCollision(dot, dots[j])) {
                        if(dot.color !== dots[j].color) {
                            dots.splice(i, 1);
                            dots.splice(j, 1);
                            i--;
                            break;
                        } else {
                            dot.dx = -dot.dx;
                            dot.dy = -dot.dy;
                        }
                    }
                }

dot.x = Math.max(DOT_SIZE, Math.min(canvas.width - DOT_SIZE, dot.x));
                dot.y = Math.max(DOT_SIZE, Math.min(canvas.height - DOT_SIZE, dot.y));
            }
        }

const drawDot = (dot) => {
            ctx.beginPath();
            ctx.arc(dot.x, dot.y, DOT_SIZE, 0, 2 * Math.PI);
            ctx.fillStyle = dot.color;
            ctx.fill();
        }

const updateCanvas = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

updateDots();

for(let i = 0; i < dots.length; i++) {
                drawDot(dots[i]);
            }

if(dots.length === 0) {
                dots = [];
                for(let i = 0; i < 10; i++) {
                    let color = randomColor();
                    dots.push(createDot(Math.random() * canvas.width, Math.random() * canvas.height, color));
                }
            }

requestAnimationFrame(updateCanvas);
        }

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

for(let i = 0; i < 10; i++) {
                let color = randomColor();
                dots.push(createDot(Math.random() * canvas.width, Math.random() * canvas.height, color));
            }

updateCanvas();
        }
    </script>
</body>
</html>
```