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

【问题标题】：Add multiple times image dropping down the screen (video game js)添加多次图像下拉屏幕（视频游戏js）
【发布时间】：2020-08-26 14:32:29
【问题描述】：

所以我正在构建一个视频游戏，其中一些火球从屏幕上落下。但是，一次只有一个图像穿过屏幕。我希望图像实际上被放大了很多次。为了理解我在说什么，这里有一张图片：

但我想做的不是只有一个图像（火球）从屏幕上掉下来，而是让一堆图像从屏幕上掉下来。

这是火球的代码：

//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">

谢谢！

【问题讨论】：

大多数像这样的游戏都是用画布而不是 CSS 构建的，我想你会有更好的运气。
你会考虑使用 jquery 还是坚持使用纯 JavaScript？

标签： javascript html css function loops

【解决方案1】：

使用 document.createElement()

演示：https://jsfiddle.net/hexzero/ukh1dpwn/

我在下面的代码中写了几个 cmets 以帮助您更好地理解它。如果您有任何其他问题，请随时提出。

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));
}

img {
  position: absolute;
}

在添加额外属性时，我受到这篇帖子 Setting multiple attributes for an element at once with JavaScript 的启发。如果你喜欢它，请向他们表达一些爱。

【讨论】：

@Thomas fiddle 工作，对于 te sn-p，你也需要 #game-body 在那里 ;) 代码没有任何问题。这里的两个答案都给了你很好的提示。
很抱歉给您带来了困惑。 sn -p 仅用于显示代码。请使用上面的演示。
@G-Cyrillus 感谢您的编辑。你这样做真是太好了，虽然我不得不把它改回来。我一开始就把它作为一个 sn-p 是一个错误。
@Thomas 很高兴看到您从停职状态中恢复过来。我认为当您创建元素时，它会创建元素实体。作为 HTML 元素。当然，您可以将其保存到变量中。

【解决方案2】：

您可以简单地为每个项目符号创建一个新的<img> 元素

我按照你的方式创建了一个 sn-p。但是，如果您有一个循环来一次更新所有图像，那么效率会更高。

const create = (x, y, vx, vy) => {
  const object = {
    x,
    y,
    vx,
    vy,
    el: document.createElement("img")
  }
  object.el.src = "http://placehold.it/50x50";
  object.el.style.left = `${object.x}px`;
  object.el.style.top = `${object.y}px`;
  document.body.appendChild(object.el);
  const intervalID = setInterval(() => {
    object.x += object.vx;
    object.y += object.vy;
    object.el.style.left = `${object.x}px`;
    object.el.style.top = `${object.y}px`;
    if (object.y > window.innerHeight) {
      document.body.removeChild(object.el);
      clearInterval(intervalID)
    }
  }, 20);
}

setInterval(() => {
  const randX = Math.floor(Math.random() * (window.innerWidth - 50));
  create(randX, -50, 0, 2);
}, 500);

body {
  margin: 0;
  overflow: hidden;
}

img {
  position: absolute;
}

【讨论】：