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

这就是我要做的事情：

给彗星一个类而不是一个id，因为它们可以有更多。
因为可以多次使用循环来迭代它们
为了让他们能够自由行动，他们需要position:absolute或类似的东西
不要对所有彗星的位置使用相同的变量，因为它们可能处于不同的位置
要获取当前位置，只需将当前top和left值解析为数字

＆＃13;

//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();

＆＃13;

使用javascript和png创建多个对象

1 个答案: