Code a game of dots that move around trying to find more dots and try to form complex structures as I watch them form big structures's game

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

No:48025

←

Prev Next

→

Code a game of dots that move around trying to fin..ALL
Developer User20679｜Date and time 24/3/1 7:36:57
Build time 7.062 sec｜Game capacity 1.952KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dots Game</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
        background-color: black;
        color: white;
    }
    canvas {
        display: block;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

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

class Dot {
        constructor(x, y, size, color) {
            this.x = x;
            this.y = y;
            this.size = size;
            this.color = color;
            this.dx = Math.random() - 0.5;
            this.dy = Math.random() - 0.5;
        }

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

update() {
            this.x += this.dx;
            this.y += this.dy;

if (this.x + this.size > canvas.width || this.x - this.size < 0) {
                this.dx = -this.dx;
            }

if (this.y + this.size > canvas.height || this.y - this.size < 0) {
                this.dy = -this.dy;
            }
        }
    }

const dots = [];

function init() {
        for (let i = 0; i < 100; i++) {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            const size = Math.random() * 4 + 2;
            const color = "white";
            dots.push(new Dot(x, y, size, color));
        }
    }

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

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

requestAnimationFrame(animate);
    }

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