按下空格键时在图像之间切换

Question

所以我正在创建一个视频游戏，其中图标与pc控制器一起移动。此外，我希望当我按下空格键时，我的图标(带控制器移动的宇宙飞船(可以在样式之间切换。我已经设法做到了，但它只起作用一次，我无法回到最初的图像。我想要的是它在四个图像之间切换，最后返回到原始风格。

这是控制器的代码：

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

请注意，这些都是基本的示例，而不是有效的代码。