Every great game hit, explosion, or magic spell needs particles. This demo shows the complete particle system in 60 lines of vanilla JavaScript Canvas — a repulsion field that scatters 520 glowing particles on contact, exactly like an enemy hit reaction or a spell impact in an HTML5 game. Zero libraries, zero build step, 60 fps on every device.
A pointer-reactive particle field that responds to both mouse and touch at 60 fps. Each particle's velocity is computed from cursor proximity, creating an organic repulsion wave that feels alive on any screen size.
Particle cursor field
How the JavaScript particle cursor effect works
The effect keeps a flat array of 520 particles, each with just four numbers: x, y, vx, vy. On every requestAnimationFrame tick the loop measures squared distance from the cursor to each particle—skipping the expensive Math.sqrt until the force threshold is confirmed—then applies a velocity impulse inversely proportional to distance. A friction factor of 0.93 damps each velocity component per frame, and coordinates wrap at the canvas boundary so particles never escape.
The key architectural split is between physics (update velocities and positions) and rendering (clear canvas, draw each particle). Keeping these two passes separate means you can tune them independently: swap the repulsion formula without touching the draw code, or change the particle color scheme without re-testing the physics.
canvas.addEventListener('pointermove', (event) => {
mouse.x = event.clientX - bounds.left;
mouse.y = event.clientY - bounds.top;
});
const distance = Math.hypot(dx, dy);
if (distance < radius) {
particle.vx += (dx / distance) * force;
particle.vy += (dy / distance) * force;
}These two lines are the entire physics engine. The cursor position feeds the force; the damping factor controls how quickly particles settle. Change 0.93 to 0.99 for a much slower, dreamier decay.
How to use this particle system in your HTML5 game
This particle system is the building block for hit FX, explosions, magic effects, and environmental particles in any HTML5 game. When an enemy takes damage: spawn 20–40 particles at the hit position with a random velocity spread and their color set to the enemy's palette. When a spell lands: spawn 80+ particles with an outward spiral velocity. The demo uses the cursor as the spawn point — in your game, replace it with the collision point.
The core pattern — array of particles, physics update, draw, wrap — scales from 50 to 2 000 particles on mobile browsers. Euler integration (position += velocity * dt), damping (velocity *= 0.93), and boundary wrapping are the same three patterns used in every major game engine's CPU particle system.
520 particles at 60 fps is about 31 000 vector operations per second—well within Canvas 2D limits. Cap devicePixelRatio at 2 to avoid doubling work on Retina screens. If you scale past 2 000 particles, switch to a Float32Array for positions and profile on mobile before shipping.
Extending this into game effects
Replace repulsion with attraction to create a gravity vortex — perfect for a black hole enemy or a vacuum power-up. Add color tiers based on particle speed: fast = bright orange (fire), slow = dark red (embers) for a fire particle effect. Add a life counter and fade alpha over time for explosion debris that disappears. Add gravity (vy += 0.1 each frame) for sparks that fall to the floor. These four tweaks turn this base system into four distinct game effects.
Frequently asked questions
Can I use this particle cursor effect on a production website?
Yes. The core is under 2 KB of vanilla JS with no build step required. Wrap the animation loop in a check for window.matchMedia('(prefers-reduced-motion: reduce)') and skip it for users who prefer less motion—an essential accessibility step for any animated canvas.
How do I make the particles attract instead of repel the cursor?
Change the impulse direction: multiply dx and dy by -1 before adding to velocity. Now particles accelerate toward the cursor. Combine with a damping factor above 0.95 for a sticky cluster that slowly falls back into place when the cursor leaves.
Related experiments
- JavaScript Magnetic Button Effect
- Three.js Particle Cursor Effect
- JavaScript Neon Mouse Trail Animation
This is part of a weekly series on visual JavaScript, modern CSS, browser graphics, and HTML5 games—one live experiment per post, copy-paste ready code, and the reasoning that makes each technique reusable beyond the demo.
No hay comentarios:
Publicar un comentario