Partical life nanovese...canvas 360 by 360 grid 9 sectors 9 subsectors 9. midle sector is ai partical generator each subsectors is randomly red white blue yellow black auto update canvas's game

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

No:51859

←

Prev Next

→

Partical life nanovese...canvas 360 by 360 grid 9 ..ALL
Developer User18896｜Date and time 24/3/16 13:44:04
Build time 6.925 sec｜Game capacity 2.24KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Particle Life Nano</title>
</head>
<body>
    <canvas id="particleCanvas" width="360" height="360"></canvas>
    
    <script>
        const canvas = document.getElementById('particleCanvas');
        const ctx = canvas.getContext('2d');
        
        const sectors = 9;
        const subSectors = 9;
        const sectorSize = canvas.width / sectors;
        const subSectorSize = sectorSize / subSectors;
        
        let particles = [];
        
        function initParticles() {
            for(let i = 0; i < subSectors; i++) {
                let x = Math.floor(Math.random() * canvas.width);
                let y = Math.floor(Math.random() * canvas.height);
                let color = ['#FF0000', '#FFFFFF', '#0000FF', '#FFFF00', '#000000'][Math.floor(Math.random() * 5)];
                
                particles.push({x: x, y: y, color: color});
            }
        }
        
        function drawParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            particles.forEach(particle => {
                ctx.fillStyle = particle.color;
                ctx.fillRect(particle.x, particle.y, subSectorSize, subSectorSize);
            });
        }
        
        function updateParticles() {
            particles.forEach(particle => {
                particle.x += Math.floor(Math.random() * 3) - 1;
                particle.y += Math.floor(Math.random() * 3) - 1;
                
                if(particle.x < 0) {
                    particle.x = 0;
                }
                if(particle.x > canvas.width - subSectorSize) {
                    particle.x = canvas.width - subSectorSize;
                }
                if(particle.y < 0) {
                    particle.y = 0;
                }
                if(particle.y > canvas.height - subSectorSize) {
                    particle.y = canvas.height - subSectorSize;
                }
            });
        }
        
        function gameLoop() {
            updateParticles();
            drawParticles();
            
            requestAnimationFrame(gameLoop);
        }
        
        initParticles();
        gameLoop();
    </script>
</body>
</html>