如何使图像在屏幕下随机和以一定的速度（视频游戏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

此解决方案包括三个可配置变量:spawnrate，advancerate和falldistance。 它用它们来确定新的火球产生的频率，它们在屏幕上移动的频率，以及它们在每个“滴答声”上移动的距离。

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

（请参阅代码内注释以获得更多解释。）

null

  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>

Answer 2

我想这会对你有所帮助:

null

js prettyprint-override">// 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">