Add particles on button click

Question

Here I want to display particles

Hi guys, I want to program in javascript that every time you click on the button a particle appears which then shows +1 for example. Like in this cookie clicker (I hope you can see it):

I already looked at particles.js, but I didn't find the right result for me there. I would like to display the particle on every click, I want it to float to the top and then disappear.

You can use tsParticles, sample here: https://codepen.io/matteobruni/pen/BaOLEqW — Caelan, Feb 26 '23 at 00:47

score 1 · Answer 1 · edited Apr 05 '23 at 20:20

I think you need something like this, I am adding one button and when clicking on it it will append +1. As per this now you can modify it according to your requirements.

const addBtn = document.getElementById("add-button");
const particleBox = document.getElementById("particle-area");

function createParticle(parentElement = document.body) {
  const particle = document.createElement("div");
  particle.classList.add("particle");
  particle.innerHTML = "<h1>+1</h1>";
  if (parentElement) {
    parentElement.append(particle);
  }
  return particle;
}

addBtn.addEventListener("click", function() {
  const particle = createParticle(particleBox);
  particle.addEventListener("animationend", function() {
    particle.remove();
  });
});

#particle-area {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column-reverse;
}

.particle {
  width: 30px;
  height: 30px;
  animation: particle-animation 2s ease-out;
}

@keyframes particle-animation {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

<div id="particle-area"></div>
<button id="add-button"> Mine Gold</button>

Add particles on button click

1 Answers1