Animazione di particelle su tela con interazione con il mouse

10 azerty

Apri nell'Editor Video Pubblica il Tuo Codice

Animazione di particelle su tela con interazione con il mouse

Consigliato

16 January 2026

Gioco Flash incorporato con Ruffle Player

18 December 2025

Gioco di Mario HTML5 giocabile online

28 December 2024

Una home page a matrice creata con indici

HTML

<!DOCTYPE html>
<html>
<body style="margin:0; overflow:hidden; background:#000;">
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];

class Particle {
    constructor(x, y) {
        this.x = x; this.y = y;
        this.size = Math.random() * 5 + 1;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    }
    update() {
        this.x += this.speedX; this.y += this.speedY;
        if (this.size > 0.2) this.size -= 0.1;
    }
    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill();
    }
}

function handle() {
    for (let i = 0; i < particles.length; i++) {
        particles[i].update(); particles[i].draw();
        if (particles[i].size <= 0.2) { particles.splice(i, 1); i--; }
    }
}

window.addEventListener('mousemove', (e) => {
    for (let i = 0; i < 5; i++) particles.push(new Particle(e.x, e.y));
});

function animate() {
    ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height);
    handle(); requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>

Animazione di particelle su tela con interazione con il mouse

Consigliato

Gioco Flash incorporato con Ruffle Player

Gioco di Mario HTML5 giocabile online

Una home page a matrice creata con indici

HTML

CSS

JS

Consigliato

Gioco Flash incorporato con Ruffle Player

Gioco di Mario HTML5 giocabile online

Una home page a matrice creata con indici

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS