Сделайте несколько объектов с помощью JavaScript и PNG

Question

Я пытаюсь получить анимационную сцену космического корабля с группой комет.

//Create a comet div with img attached to it
var cometScene = function(spaceNo){
    var b = document.createElement('div');
    b.id = 'cometio';


    var cometImage = document.createElement('img');

    cometImage.setAttribute('src', 'images/comet1.png');
    b.appendChild(cometImage);

    document.getElementById('wrap').appendChild(b);
}

//Comet move
function cometMove(){
    var comet = document.getElementById('cometio');
    var pos = 0;
    var interval = setInterval(scene, 3);

    function scene(){
        if (pos === 1000){
            clearInterval(interval);
        } else {
            pos++;
            comet.style.top = pos + 'px';
            comet.style.left = pos + 'px';
        }
    }

    setInterval(scene, 3)
}

Но когда я вызываю функцию cometScene (3), я не получаю 3 похожих объекта. Также, как эти объекты могут быть размещены по всему экрану, так как это всего лишь один div.

function main(){
    var w = document.createElement('div');
    w.id = 'wrap';

    document.querySelector('body').appendChild(w);
    astronautScene();
    cometScene();
    shaceshipScene();
    cometMove();
    astronautMove();
}

Answer 1

Вот что я бы сделал:

1. Дайте кометам класс вместо идентификатора, потому что их может быть больше.

2. Поскольку может быть многократное использование цикла для их итерации

3. Чтобы дать им возможность свободно двигаться, им нужно иметь position:absolute или что-то похожее

4. Не используйте одну и ту же переменную для положения всех комет, потому что они могут находиться в разных положениях

5. Чтобы получить текущую позицию, просто выполните синтаксический анализ значения top и left для числа

//Create a comet div with img attached to it
var cometScene = function(spaceNo) {
  var b = document.createElement('div');
  b.className = 'cometio';


  var cometImage = document.createElement('img');

  cometImage.setAttribute('src', 'images/comet1.png');
  b.appendChild(cometImage);

  document.getElementById('wrap').appendChild(b);
}

//Comet move
function cometMove() {
  var comets = document.getElementsByClassName('cometio');
  for (let i = 0; i < comets.length; i++) {
    const comet = comets[i];
    comet.style.top = "0px";
    comet.style.left = "0px";
    comet.style.position = "absolute";
    var interval = setInterval(scene, 3);

    function scene() {
      let x = parseInt(comet.style.left);
      let y = parseInt(comet.style.top);
      if (x === 1000) {
        clearInterval(interval);
      } else {
        comet.style.top = (1 + x) + 'px';
        comet.style.left = (1 + y) + 'px';
      }
    }
  }
  //setInterval(scene, 3)don't start the interval twice
}

function main() {
  var w = document.createElement('div');
  w.id = 'wrap';

  document.querySelector('body').appendChild(w);
  //astronautScene();
  cometScene();
  //shaceshipScene();
  cometMove();
  //astronautMove();
}

main();