Как заставить изображения спускаться по экрану случайным образом и с определенной скоростью (видеоигра js)

Question

Итак, я создаю игру, в которой космический корабль перемещается в экран с контроллерами P C. Теперь моя оставшаяся часть - сделать так, чтобы изображения огненного шара падали с экрана случайным образом с точной скоростью и количеством (поскольку изображение только одно, мы должны его умножить). Может ли кто-нибудь достичь этого?

Вот код:

Изображение огненного шара:

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