Переключение между изображениями при нажатии клавиши пробела

Question

Итак, я создаю видеоигру, в которой значок перемещается с помощью контроллеров p c. Кроме того, я хочу, чтобы, когда я нажимаю клавишу пробела, мой значок (космический корабль, который движется с контроллерами) переключается между стилями. Мне удалось это сделать, но это работает только один раз, и я не могу go вернуться к исходному изображению. Я бы хотел, чтобы он переключался между четырьмя изображениями и в конце возвращался к исходному стилю.

Вот код для контроллеров:

let display = document.getElementById("body").style.width
let rect = document.getElementById("icon-p1")
let pos = {top: 85, left: 600}
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 -= 1}
if (keys[40] || keys[83]) {pos.top += 1}
rect.style.left = pos.left + "px"; rect.style.top = pos.top + "%"}
let sens = setInterval(loop, 1000 / 40) 

Изображения:

<img src="Photo/Spaceship.png" id="icon-p1" style="display:none">
<img src="Photo/Spaceship1.png" id="icon-p2" style="display:none">
<img src="Photo/Spaceship2.png" id="icon-p3" style="display:none">
<img src="Photo/Spaceship3.png" id="icon-p4" style="display:none">

Мой код для переключения изображений:

document.addEventListener("keydown", function(event) {
if (event.keyCode === 32) {
event.preventDefault();
rect = document.getElementById("icon-p2")
document.getElementById('icon-p2').style.display = 'block'
document.getElementById('icon-p1').style.display = 'none'}})

Задержка значка:

setTimeout(function() {
document.getElementById('icon-p1').style.display = 'block'}, 4000)}

Спасибо!

Answer 1

Используя вашу DOM

Используя вашу DOM, вы должны отслеживать, какой img отображается в данный момент. Для этого я добавил два класса для переключения ( None и Block ), которые вы можете переименовать / изменить стиль по своему усмотрению.

//REM: Shows the first hidden image
function showFirst(){
  //REM: Get the first "none" element (=.None)
  var tFirst = document.querySelector('.None');

  //REM: Show it
  if(tFirst){
    tFirst.classList.remove('None');
    tFirst.classList.add('Block')
  }
};

document.addEventListener("keydown", function(event){
  if(event.keyCode === 32){
    event.preventDefault();
    
    //REM: Get the current "display" element (=.Block) or the first "none" one (=.None)
    var tCurrent = document.querySelector('.Block');
    
    //REM: If found...
    if(tCurrent){
      //REM: Hide current
      tCurrent.classList.remove('Block');
      tCurrent.classList.add('None');
    
      //REM: Get the next image in the markup
      var tNext = tCurrent.nextElementSibling;
      
      //REM: Show it, if exists
      if(tNext && tNext.tagName === 'IMG'){
        tNext.classList.remove('None');
        tNext.classList.add('Block')
      }
      //REM: Else show the first image again
      else{
        showFirst()
      }
    }
    //REM: Else show the first image
    else{
      showFirst()
    }
  }
})

.None{display: none}
.Block{display: block}

<img src="Photo/Spaceship.png" id="icon-p1" class="None" alt="1">
<img src="Photo/Spaceship1.png" id="icon-p2" class="None" alt="2">
<img src="Photo/Spaceship2.png" id="icon-p3" class="None" alt="3">
<img src="Photo/Spaceship3.png" id="icon-p4" class="None" alt="4">

Использование объекта

Второй способ - иметь только один image и изменить src этого объекта кодирование к объекту.

var imgs = [
  {src: '', alt: '1', active: true},
  {src: '', alt: '2', active: false},
  {src: '', alt: '3', active: false},
  {src: '', alt: '4', active: false}
];

document.addEventListener("keydown", function(event){
  if(event.keyCode === 32){
    event.preventDefault();
    
    //REM: The element
    var tIMG = document.getElementById('icon-p1');
    if(tIMG){
      //REM: Getting index of current
      var tIndex = imgs.findIndex(element => element.active);

      //REM: Getting the next or first object
      var tNext = (tIndex < imgs.length-1) ? imgs[tIndex + 1] : imgs[0];
      
      //REM: Assigning the properties
      tIMG.src = tNext.src;
      tIMG.alt = tNext.alt;
      
      //REM: Toggling the activity in the object
      imgs[tIndex].active = false;
      tNext.active = true
    }
  }
})

<img src="Photo/Spaceship.png" id="icon-p1" alt="1">

Имейте в виду, что все это базовые c примеры, а не продуктивный код.