我怎样才能让图像以一定的速度随机地从屏幕上下来（视频游戏 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 coordiantefunction rndScreenX(offset) {&nbsp; return Math.floor(Math.random() * (window.innerWidth - offset));}// Set fireball coordinates (X is random)let fireballElement = document.querySelector('#fireball');let fireball = {&nbsp; x: rndScreenX(fireballElement.offsetWidth),&nbsp; y: 0}const loop = function() {&nbsp; // Change fireball Y&nbsp; fireball.y += 10;&nbsp; fireballElement.style.top = fireball.y + 'px';&nbsp;&nbsp;&nbsp; if (fireball.y > window.innerHeight) {&nbsp; &nbsp; // Fireball is out of window&nbsp; &nbsp; // Reset Y and get new random X&nbsp; &nbsp; fireball.x = rndScreenX(fireballElement.offsetWidth);&nbsp; &nbsp; fireballElement.style.left = fireball.x + 'px';&nbsp; &nbsp; fireball.y = 0;&nbsp; }};fireballElement.style.left = fireball.x + 'px';let sens = setInterval(loop, 1000 / 60);#fireball {&nbsp; position: absolute;&nbsp; /* Ignore this rule if you're using an image */&nbsp; width: 50px;&nbsp; height: 50px;&nbsp; background: red;&nbsp; border-radius: 40% 40% 50% 50%;}<img src="Photo/fireball.png" id="fireball">

Answer 2

该解决方案包括三个可配置变量：spawnRate、advanceRate和fallDistance。它使用它们来确定新火球产生的频率、它们向下移动屏幕的频率以及它们在每个“刻度”上移动的距离。脚本的“主要”部分由两个setInterval调用组成，一个用于处理生成新的火球，另一个用于处理将它们推进屏幕。（有关进一步说明，请参阅代码内注释。）&nbsp; const&nbsp; &nbsp; display = document.getElementById("display"), // Container element&nbsp; &nbsp; fireballs = [], // Array to hold all fireball objects&nbsp; &nbsp; fallDistance = 6; // Measured in `vh` units (but could be whatever)&nbsp; &nbsp; spawnRate = 2000,&nbsp; &nbsp; advanceRate = 500;&nbsp; // Adds the first fireball immediately&nbsp; spawnFireball(fireballs);&nbsp; // Moves all fireballs down every 500 milliseconds&nbsp; const advancerTimer = setInterval(&nbsp; &nbsp; function(){ advanceAll(fireballs, fallDistance, display); },&nbsp; &nbsp; advanceRate&nbsp; );&nbsp; // Spawns a new fireball every 2000 milliseconds&nbsp; const spawnerTimer = setInterval(&nbsp; &nbsp; function(){ spawnFireball(fireballs); },&nbsp; &nbsp; spawnRate&nbsp; );&nbsp; // Defines a function to add a fireball to the array&nbsp; function spawnFireball(fireballs){&nbsp; &nbsp; const&nbsp; &nbsp; &nbsp; img = document.createElement("img"), // Element to add to screen&nbsp; &nbsp; &nbsp; x = Math.floor(Math.random() * 96) + 2, // Random `x` position&nbsp; &nbsp; &nbsp; y = 3; // `y` position starts near top of screen&nbsp; &nbsp; img.src = "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.UyMqod0eO6Qcmco1Zrmj0QAAAA%26pid%3DApi&f=1",&nbsp; &nbsp; img.classList.add("fireball"); // To style fireballs&nbsp; &nbsp; img.style.left = x + "vw"; // `x` position will never change&nbsp; &nbsp; newFb = { x, y, img }; // `fb` object includes coords + img element&nbsp; &nbsp; fireballs.push(newFb); // Adds the new fireball to the array&nbsp; }&nbsp; // Defines a function to advance a fireball's position&nbsp; function advance(fb, distance){&nbsp; &nbsp; fb.y += distance;&nbsp;&nbsp; }&nbsp; // Defines a function to draw a fireball in the container&nbsp; function draw(fb, container){&nbsp; &nbsp; if(fb.y > 100){ return; } // Ignores below-screen fireballs&nbsp; &nbsp; fb.img.style.top = fb.y + "vh"; // Updates the location on screen&nbsp; &nbsp; container.appendChild(fb.img); // The `img` property holds our DOM element&nbsp; }&nbsp; // Defines a function to advance and draw all fireballs&nbsp; function advanceAll(fireballs, distance, container){&nbsp; &nbsp; for(let fb of fireballs){&nbsp; &nbsp; &nbsp; advance(fb, distance);&nbsp; &nbsp; &nbsp; draw(fb, container)&nbsp; &nbsp; }&nbsp; }#display{ height: 99vh; width: 99vw; position: relative; }.fireball{ height: 2em; width: 2em; position: absolute; }<div id="display"></div>