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

←

Prev Next

→

Code a game where randomly colored dots try not to..ALL
Developer User20679｜Date and time 24/3/1 7:47:45
Build time 11.259 sec｜Game capacity 2.669KB｜

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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Dots Simulation</title>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
    canvas {
        display: block;
    }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    const dots = [];
    const dotSize = 5;

function randomColor() {
        return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
    }

function Dot(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.size = dotSize;

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 += Math.random() - 0.5;
            this.y += Math.random() - 0.5;

if (this.size < 15 && Math.random() < 0.01) {
                dots.push(new Dot(this.x, this.y, this.color));
            }

this.draw();
        }
    }

function init() {
        for (let i = 0; i < 50; i++) {
            dots.push(new Dot(Math.random() * canvas.width, Math.random() * canvas.height, randomColor()));
        }

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

dots.forEach(dot => {
                dot.update();

dots.forEach(otherDot => {
                    if (dot !== otherDot && Math.abs(dot.x - otherDot.x) < dot.size && Math.abs(dot.y - otherDot.y) < dot.size) {
                        if (dot.color === otherDot.color) {
                            // Dots clump together
                            dot.x = (dot.x + otherDot.x) / 2;
                            dot.y = (dot.y + otherDot.y) / 2;
                            dot.size += otherDot.size / 10;
                            dots.splice(dots.indexOf(otherDot), 1);
                        } else {
                            dots.splice(dots.indexOf(dot), 1);
                            dots.splice(dots.indexOf(otherDot), 1);
                        }
                    }
                });
            });
        }, 1000 / 60);
    }

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

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