AI game creator

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

No:30438

←

Prev Next

→

particle
Developer User14783｜Date and time 23/12/21 20:21:01
Build time 16.974 sec｜Game capacity 2.374KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
    <title>Particle Game</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #f5f5f5;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

var particles = []; // Store the particles

function Particle(x, y, radius, color, speedX, speedY) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.color = color;
            this.speedX = speedX;
            this.speedY = speedY;

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

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

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

this.draw();
            }

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

// Initialize particles
        for (var i = 0; i < 10; i++) {
            var x = Math.random() * canvas.width;
            var y = Math.random() * canvas.height;
            var radius = Math.random() * 20 + 10;
            var color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
            var speedX = (Math.random() - 0.5) * 5;
            var speedY = (Math.random() - 0.5) * 5;

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

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

for (var i = 0; i < particles.length; i++) {
                particles[i].update();
            }
        }

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

</html>