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

←

Prev Next

→

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

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Dots Simulation</title>
<style>
    body {
        background-color: #f0f0f0;
        text-align: center;
    }
    canvas {
        border: 1px solid #000;
    }
</style>
</head>
<body>
<canvas id="dotsCanvas" width="800" height="600"></canvas>

const dotRadius = 5;
    const maxDotSize = 100;
    const reproduceSize = 50;
    const colors = ['#ff0000', '#00ff00', '#0000ff'];

let dots = [];

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

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

grow() {
            if (this.size < maxDotSize) {
                this.size++;
            }
        }

reproduce() {
            if (this.size >= reproduceSize) {
                dots.push(new Dot(this.x + 5, this.y + 5, this.color));
            }
        }
    }

function init() {
        canvas.addEventListener('click', function(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            dots.push(new Dot(x, y, colors[Math.floor(Math.random() * colors.length)]);
        });

setInterval(update, 1000 / 30);
    }

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

for (let dot of dots) {
            dot.grow();
            dot.reproduce();
            dot.draw();
        }

handleCollisions();
    }

if (dots.length === 0) {
            dots = [];
        }
    }

init();

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