添加多次图像下拉屏幕（视频游戏js）

Question

但是我想做的不是只有一个图像（火球）下屏，我想有一堆图像下屏。

以下是火球的代码：

//Fireball script
function fFireball(offset) {
    return Math.floor(Math.random() * (window.innerWidth - offset))
}
let fireball = {x: fFireball(fireballElement.offsetWidth), y: 0}
const fireLoop = function() {
    fireball.y += 2; fireballElement.style.top = fireball.y + 'px'
    if (fireball.y > window.innerHeight) {
        fireball.x = fFireball(fireballElement.offsetWidth)
        fireballElement.style.left = fireball.x + 'px'; fireball.y = 0
    }
}
fireballElement.style.left = fireball.x + 'px'
let fireInterval = setInterval(fireLoop, 1000 / 100)

和图像：

<img src="Photo/fireball.png" id="fireball">

谢了！

Answer 1

我在下面的代码中写下了几个注释，以帮助您更好地理解它。如果你还有其他问题，尽管问。

const fireballArray = [];
// You can add any additional attributes you need for your fire balls here like ids and class names.
function generateFireBallWithAttributes(el, attrs) {
  for (var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
  return el;
}

function createFireBalls(amount){
for (let i = 0; i <= amount; i++) {
  fireballArray.push(              // create an image element
    generateFireBallWithAttributes(document.createElement("img"), {
      src: "Photo/fireball.png",
      width: "32",
      height: "32",
    })
  );
}}

createFireBalls(10)

fireballArray.forEach((fireballElement) => {
  // Just add the id of the game body here, so that you could append your fire balls
  document.getElementById("game-body").appendChild(fireballElement);
  const fireball = { x: fFireball(fireballElement.offsetWidth), y: 0 };
  const fireLoop = function () {
    fireball.y += 2;
    fireballElement.style.top = fireball.y + "px";
    if (fireball.y > window.innerHeight) {
      fireball.x = fFireball(fireballElement.offsetWidth);
      fireballElement.style.left = fireball.x + "px";
      fireball.y = 0;
    }
  };
  fireballElement.style.left = fireball.x + "px";
  // I've randomised the interval
  // you may want to implement your own version to get more control
    let fireInterval = setInterval(fireLoop, 1000 / ((Math.random() * (125 - 75)) + 75));
});

function fFireball(offset) {  
  return Math.floor(Math.random() * (window.innerWidth - offset));
}

css prettyprint-override">img {
  position: absolute;
}

我受到这篇文章的启发，在添加额外属性时，用JavaScript同时为一个元素设置多个属性。如果你喜欢，请给他们一些爱。