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

←

Prev Next

→

Idle partical univers .univers is a canvas 520 by ..ALL
Developer User18896｜Date and time 24/2/28 2:47:44
Build time 7.817 sec｜Game capacity 2.052KB｜

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>

// Create particle element
        class Particle {
            constructor(x, y, size, color, speedX, speedY) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.color = color;
                this.speedX = speedX;
                this.speedY = speedY;
            }

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

update() {
                this.x += this.speedX;
                this.y += this.speedY;

if (this.x < 0 || this.x > 520) {
                    this.speedX = -this.speedX;
                }

if (this.y < 0 || this.y > 520) {
                    this.speedY = -this.speedY;
                }

this.draw();
            }
        }

// Create a group of particles
        const particles = [];
        for (let i = 0; i < 10; i++) {
            const x = Math.random() * 520;
            const y = Math.random() * 520;
            const size = Math.random() * 10 + 5;
            const color = `hsl(${Math.random() * 360}, 50%, 50%)`;
            const speedX = (Math.random() - 0.5) * 2;
            const speedY = (Math.random() - 0.5) * 2;

particles.push(new Particle(x, y, size, color, speedX, speedY));
        }

// Function to animate particles
        function animate() {
            context.clearRect(0, 0, 520, 520);
            particles.forEach(particle => {
                particle.update();
            });

requestAnimationFrame(animate);
        }

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