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 they reproduce ofk they can move and when they reproduce slightly different and the new dot spawns next to the other one they evolve too's game

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

No:48055

←

Prev Next

→

Code a game where randomly colored dots try not to..ALL
Developer User20679｜Date and time 24/3/1 8:02:45
Build time 12.333 sec｜Game capacity 3.101KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!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>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

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

canvas.width = width;
    canvas.height = height;

const dotRadius = 5;
    const maxDotSize = 30;
    const reproduceSize = 20;
    const moveSpeed = 1;

let dots = [];

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

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

move() {
            this.x += Math.random() * moveSpeed - moveSpeed/2;
            this.y += Math.random() * moveSpeed - moveSpeed/2;

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

if(this.size >= reproduceSize) {
                this.reproduce();
            }
        }

reproduce() {
            let child = new Dot(this.x + Math.random() * 10 - 5, this.y + Math.random() * 10 - 5, this.color);

dots.push(child);
        }
    }

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 evolve() {
        for(let dot of dots) {
            dot.move();

for(let otherDot of dots) {
                if(dot !== otherDot && checkCollision(dot, otherDot)) {
                    if(dot.size > otherDot.size) {
                        dot.size += otherDot.size * 0.2;
                        dots = dots.filter(d => d !== otherDot);
                    } else if(dot.size < otherDot.size) {
                        otherDot.size += dot.size * 0.2;
                        dots = dots.filter(d => d !== dot);
                    }
                }
            }
        }

draw();
    }

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

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

let dot = new Dot(x, y, color);
            dots.push(dot);
        }

setInterval(evolve, 1000/60);
    }

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