Idle partical univers .univers is a canvas 520 by 520 .univers = 1 .groops of particals = elements's game

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

No:47428

←

Prev Next

→

Idle partical univers .univers is a canvas 520 by ..ALL
Developer User18896｜Date and time 24/2/28 3:11:28
Build time 7.264 sec｜Game capacity 1.761KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Particle Universe Game</title>
</head>
<body>
    <canvas id="universe" width="520" height="520"></canvas>

class Particle {
            constructor(x, y, size, color) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.color = color;
                this.speedX = Math.random() * 2 - 1;
                this.speedY = Math.random() * 2 - 1;
            }

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.speedX;
                this.y += this.speedY;
            }
        }

function createParticles() {
            for (let i = 0; i < 50; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const size = Math.random() * 5;
                const color = 'rgb(' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + Math.random() * 255 + ')';
                particles.push(new Particle(x, y, size, color));
            }
        }

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

particles.forEach(particle => {
                particle.draw();
                particle.update();
            });

requestAnimationFrame(animate);
        }

createParticles();
        animate();
    </script>
</body>
</html>