我怎样才能让图像以一定的速度随机地从屏幕上下来（视频游戏 js）？

Question

我正在构建一个游戏，其中一艘宇宙飞船使用 PC 控制器进入屏幕。现在，我剩下的部分是让一个火球图像以精确的速度和数量从屏幕上随机掉落（因为图像只有一个，我们必须将它相乘）。有人能做到吗？这是代码：火球图片：<img src="Photo/fireball.png" id="fireball">飞船图片：<img src="Photo/Spaceship1.png" id="icon-p">宇宙飞船随控制器移动+防止它离开屏幕：let display = document.getElementById("body");let rect = icon;let pos = { top: 1000, left: 570 };const keys = {};window.addEventListener("keydown", function(e) {  keys[e.keyCode] = true});window.addEventListener("keyup", function(e) {  keys[e.keyCode] = false});const loop = function() {  if (keys[37] || keys[81]) { pos.left -= 10; }  if (keys[39] || keys[68]) { pos.left += 10; }  if (keys[38] || keys[90]) { pos.top -= 10; }  if (keys[40] || keys[83]) { pos.top += 10; }  var owidth = display.offsetWidth;  var oheight = display.offsetHeight;  var iwidth = rect.offsetWidth;  var iheight = rect.offsetHeight;  if (pos.left < 0) { pos.left = -10; }  if (pos.top < 0) { pos.top = -10; }  if (pos.left + iwidth >= owidth) { pos.left = owidth - iwidth; }  if (pos.top + iheight >= oheight) { pos.top = oheight - iheight; }  rect.setAttribute("data", owidth + ":" + oheight);  rect.style.left = pos.left + "px";  rect.style.top = pos.top + "px";};let sens = setInterval(loop, 1000 / 60);

Answer 1

// Random X coordiante

function rndScreenX(offset) {

  return Math.floor(Math.random() * (window.innerWidth - offset));

}

// Set fireball coordinates (X is random)

let fireballElement = document.querySelector('#fireball');

let fireball = {

  x: rndScreenX(fireballElement.offsetWidth),

  y: 0

}

const loop = function() {

  // Change fireball Y

  fireball.y += 10;

  fireballElement.style.top = fireball.y + 'px';

  

  if (fireball.y > window.innerHeight) {

    // Fireball is out of window

    // Reset Y and get new random X

    fireball.x = rndScreenX(fireballElement.offsetWidth);

    fireballElement.style.left = fireball.x + 'px';

    fireball.y = 0;

  }

};

fireballElement.style.left = fireball.x + 'px';

let sens = setInterval(loop, 1000 / 60);

#fireball {

  position: absolute;

  /* Ignore this rule if you're using an image */

  width: 50px;

  height: 50px;

  background: red;

  border-radius: 40% 40% 50% 50%;

}

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

Answer 2

该解决方案包括三个可配置变量：spawnRate、advanceRate和fallDistance。它使用它们来确定新火球产生的频率、它们向下移动屏幕的频率以及它们在每个“刻度”上移动的距离。

脚本的“主要”部分由两个setInterval调用组成，一个用于处理生成新的火球，另一个用于处理将它们推进屏幕。

（有关进一步说明，请参阅代码内注释。）

  const

    display = document.getElementById("display"), // Container element

    fireballs = [], // Array to hold all fireball objects

    fallDistance = 6; // Measured in `vh` units (but could be whatever)

    spawnRate = 2000,

    advanceRate = 500;

  // Adds the first fireball immediately

  spawnFireball(fireballs);

  // Moves all fireballs down every 500 milliseconds

  const advancerTimer = setInterval(

    function(){ advanceAll(fireballs, fallDistance, display); },

    advanceRate

  );

  // Spawns a new fireball every 2000 milliseconds

  const spawnerTimer = setInterval(

    function(){ spawnFireball(fireballs); },

    spawnRate

  );

  // Defines a function to add a fireball to the array

  function spawnFireball(fireballs){

    const

      img = document.createElement("img"), // Element to add to screen

      x = Math.floor(Math.random() * 96) + 2, // Random `x` position

      y = 3; // `y` position starts near top of screen

    img.src = "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.UyMqod0eO6Qcmco1Zrmj0QAAAA%26pid%3DApi&f=1",

    img.classList.add("fireball"); // To style fireballs

    img.style.left = x + "vw"; // `x` position will never change

    newFb = { x, y, img }; // `fb` object includes coords + img element

    fireballs.push(newFb); // Adds the new fireball to the array

  }

  // Defines a function to advance a fireball's position

  function advance(fb, distance){

    fb.y += distance; 

  }

  // Defines a function to draw a fireball in the container

  function draw(fb, container){

    if(fb.y > 100){ return; } // Ignores below-screen fireballs

    fb.img.style.top = fb.y + "vh"; // Updates the location on screen

    container.appendChild(fb.img); // The `img` property holds our DOM element

  }

  // Defines a function to advance and draw all fireballs

  function advanceAll(fireballs, distance, container){

    for(let fb of fireballs){

      advance(fb, distance);

      draw(fb, container)

    }

  }

#display{ height: 99vh; width: 99vw; position: relative; }

.fireball{ height: 2em; width: 2em; position: absolute; }

<div id="display"></div>