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

←

Prev Next

→

Code a game where randomly colored dots try not to..ALL
Developer User20679｜Date and time 24/3/1 7:49:02
Build time 14.287 sec｜Game capacity 3.024KB｜

Script

Here is the code for the game you described:

Please note that the provided code sets the foundation for the game you described, but you will need to add additional logic for reproduction, resetting when all dots die, and more complex interactions between dots as described in your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Here is the code for the game you described:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Dots Game</title>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>

canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

const dots = [];

function randomColor() {
        const colors = ['#FF0000', '#00FF00', '#0000FF']; // Red, Green, Blue
        return colors[Math.floor(Math.random() * colors.length)];
    }

function Dot(x, y, color, size) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.size = size;
        this.speedX = Math.random() - 0.5;
        this.speedY = Math.random() - 0.5;

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

this.update = function() {
            this.x += this.speedX;
            this.y += this.speedY;

if (this.x + this.size > canvas.width || this.x - this.size < 0) {
                this.speedX = -this.speedX;
            }
            if (this.y + this.size > canvas.height || this.y - this.size < 0) {
                this.speedY = -this.speedY;
            }

this.draw();
        }
    }

function createDots() {
        for (let i = 0; i < 30; i++) {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            const color = randomColor();
            const size = 5;
            dots.push(new Dot(x, y, color, size));
        }
    }

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

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

for(let i=0; i<dots.length; i++) {
            for(let j=i+1; j<dots.length; j++) {
                const distance = Math.sqrt((dots[i].x - dots[j].x) ** 2 + (dots[i].y - dots[j].y) ** 2);
                if (distance < dots[i].size + dots[j].size) {
                    if(dots[i].color !== dots[j].color) {
                        dots.splice(j, 1);
                        dots.splice(i, 1);
                    }
                }
            }
        }
    }

function animate() {
        requestAnimationFrame(animate);
        update();
    }

createDots();
    animate();

// To add reproduction functionality and reset when all dots die, additional logic is needed

</script>
</body>
</html>
```