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:48037

←

Prev Next

→

Code a game where randomly colored dots try not to..ALL
Developer User20679｜Date and time 24/3/1 7:48:28
Build time 8.012 sec｜Game capacity 2.483KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Colorful Dots Simulation</title>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>

let dots = [];

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

draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }

function createDot() {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            const colors = ['#ff0000', '#00ff00', '#0000ff'];
            const color = colors[Math.floor(Math.random() * colors.length)];
            const size = Math.random() * 10 + 5;

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 < dot1.size + dot2.size;
        }

function update() {
            dots.forEach((dot, index) => {
                dot.size += 0.1;

dots.forEach((otherDot, otherIndex) => {
                    if (index !== otherIndex && checkCollision(dot, otherDot)) {
                        if (dot.color === otherDot.color) {
                            dot.size += otherDot.size / 5;
                            dots.splice(otherIndex, 1);
                        } else {
                            dots.splice(index, 1);
                            dots.splice(otherIndex, 1);
                        }
                    }
                });

if (dot.size > 20) {
                    createDot();
                    dot.size /= 2;
                }
            });
        }

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

dots.forEach(dot => {
                dot.draw();
            });
        }

function gameLoop() {
            update();
            draw();
        }

setInterval(gameLoop, 1000 / 60);

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