Particles Disappearing in Order

Question:
In my clicker game, like other clicker games , when the click the object, you get a +1 particle or something like. On mine, when you click fast enough, groups of the particles disappear at the same time, even when being clicked apart

Repl link:
https://replit.com/@JohnnySuriano/Cycle-Clicker#script.js

function fadeOut(element, duration, finalOpacity, callback) {
  opacity = 1;

  let elementFadingInterval = window.setInterval(function() {
    opacity -= 50 / duration;

    if (opacity <= finalOpacity) {
      clearInterval(elementFadingInterval);
      callback();
    }

    element.style.opacity = opacity
  }, 50)
}

function createNumberOnClicker(event) {
  let clicker = document.getElementById('clicker');

  let clickerOffset = clicker.getBoundingClientRect();
  let position = {
    x: event.pageX - clickerOffset.left,
    y: event.pageY - clickerOffset.top
  }

  let element = document.createElement('div');
  element.textContent = '+' + game.clickValue;
  element.classList.add('number', 'unselectable');
  element.style.left = position.x + 'px';
  element.style.top = position.y + 'px';

  clicker.appendChild(element);

  let movementInterval = setInterval(function() {
    if (typeof element == 'undefined' && element == null) {
      clearInterval(movementInterval)
    }

    position.y--;
    element.style.top = position.y + 'px';
  }, 10)

  fadeOut(element, 3000, 0.5, function() {
    element.remove()
  });
}

Its because every time you click, you are making ALL particles have their opacity reset to 100%.

1 Like

How would I go about fixing it?

instead of updating all elements, just identify the one that you just created and set opacity: 100% on that one only

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.