0

非常に単純なパーティクル システムのようなものを作成しようとしています。この時点では物理演算は必要ありません。泡やハチなどのように見えるようにアニメーション化された div だけです。以下のコードは div を作成し、CSS を使用して位置を変更し、上に浮かせます。しかし、粒子を破壊する方法を練習することはできないようです。各粒子はその動きをして元の位置に戻ります。完全に削除された方がいいと思います。

ありがとうございました。

/* ==================== PARTICLES CONTROLLER ==================== */

/**
 * Particle controller interates through all elements with 
 * CSS class name PARTICLE_CSS and when found a ParticleController is instantiated 
 * for each of the elements.
 */

function ParticleBaseController(){
  var ParticleContainer = document.querySelectorAll(PARTICLE_CSS),
      ParticleContainerLength = ParticleContainer.length;

  for (var i = ParticleContainerLength - 1; i >= 0; i--){
    new ParticleController(ParticleContainer[i]);
  };  
};

 function ParticleController(element) {
  var particleElement, fragment = document.createDocumentFragment();
  var numberOfParticles = 1;

   for (var i = 0; i < numberOfParticles; i ++) {
    particleElement = document.createElement("div");
        particleElement.addClassName(PARTICLE_ELEMENT_CSS_CLASS);
    var Ypos = Math.floor((Math.random()*200)+1);
    var Xpos = Math.floor((Math.random()*200)+1); 
    particleElement.style.top = Ypos + "px";
    particleElement.style.left = Xpos + "px";  
    fragment.appendChild(particleElement);  
  }
  element.appendChild(fragment);

 setTimeout(ParticleBaseController, 3000);
};
4

1 に答える 1

0

これは私にとってはうまくいきました。私は、それが機能する方法は、パーティクルが 15 未満である限り、コンテナにのみ追加されるということだと推測しています。ただし、実際にどのように破棄されるかはわかりません。しかし、画面上では一度に 15 個のパーティクルしか見ることができません。 

/* ==================== PARTICLES CONTROLLER ==================== */
    const NumberOfParticles = 15;

function smoking()
{
    var container = document.getElementById('particleContainer');
    for (var i = 0; i < NumberOfParticles; i++) 
    {
        container.appendChild(createParticle());
    }
}   

function randomFloat(low, high)
{
    return low + Math.random() * (high - low);
}

function createParticle()
{
    var particleDiv = document.createElement('div');
    particleDiv.style.top = "-300px";
    particleDiv.style.left = "200px"

    particleDiv.style.webkitAnimationName = 'smoke-rise, smoke-fade';

    var SmokeDuration = randomFloat(5, 10)+"s";
    var FadeDuration = randomFloat(4, 11)+"s";
    var SmokeDelay = randomFloat(0, 5)+"s";
    var FadeDelay = randomFloat(2, 9)+"s";

    particleDiv.style.webkitAnimationDuration = SmokeDuration + ', ' + FadeDuration;       
    particleDiv.style.webkitAnimationDelay = SmokeDelay + ', ' + FadeDelay;

    return particleDiv;
}

window.addEventListener("DOMContentLoaded", smoking, false);
于 2012-08-09T17:24:34.763 に答える