10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 random Partical similator partical size 0.0000001 particals groop.to size 1 whan colide canvas 320 by 320's game | AI game creator

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

No:46211

176

10000000000000000000000000000000000000000000000000..ALL
Developer User18896｜Date and time 24/2/24 1:24:43
Build time 10.196 sec｜Game capacity 2.045KB｜

→ 　

0　

0　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Particle Simulator</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    canvas {
        border: 2px solid black;
    }
</style>
</head>
<body>
<canvas width="320" height="320"></canvas>

<script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    
    const particleSize = 0.0000001;
    const groupSize = 1;
    
    const particles = [];
    
    canvas.addEventListener('click', function(event) {
        for (let i = 0; i < groupSize; i++) {
            const particle = {
                x: event.offsetX,
                y: event.offsetY,
                size: particleSize,
                color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`,
                speed: {
                    x: (Math.random() - 0.5) * 3,
                    y: (Math.random() - 0.5) * 3
                }
            };
            particles.push(particle);
        }
    });
    
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.forEach(particle => {
            ctx.fillStyle = particle.color;
            ctx.fillRect(particle.x, particle.y, particle.size, particle.size);
        });
    }
    
    function update() {
        particles.forEach(particle => {
            particle.x += particle.speed.x;
            particle.y += particle.speed.y;
            
            if (particle.x < 0 || particle.x > canvas.width) {
                particle.speed.x *= -1;
            }
            
            if (particle.y < 0 || particle.y > canvas.height) {
                particle.speed.y *= -1;
            }
        });
    }
    
    function loop() {
        update();
        draw();
        requestAnimationFrame(loop);
    }
    
    loop();
</script>
</body>
</html>