如何使用 Javascript 单击另一个图像时出现多个随机图像？

Question

我目前正在尝试制作一张点击后消失并随机显示三张图片的图片。到目前为止，我认为也许可以将可点击图像复制两次，然后让它们不可见，这样它们就会变成随机图像之一，并在单击图像后变得可见。如果您对这可能如何工作有任何其他想法，我真的很想知道！

还有谁知道我如何才能做到一张图片只能用于三个地点之一，这样你总是可以将三个不同的随机图片放在一起。

这是我的 JS 和 HTML：

var playerImg;
var playerImg2;
var playerImg3;
var playerArray = ["A1.png", "A2.png", "A3.png", "A4.png", "A5.png", "M1.png", "M2.png", "M3.png", "M4.png", "M5.png", "V1.png", "V2.png", "V3.png", "V4.png", "V5.png", "D1.png", "D2.png", "D3.png"];

function openPack() {
    var randomPlayer = (Math.floor(Math.random() * 18) + 1);
    playerImg = playerArray[randomPlayer - 1];
    document.getElementById("pack").src = "image/" + playerImg;

    var randomPlayer2 = (Math.floor(Math.random() * 18) + 1);
    playerImg2 = playerArray[randomPlayer2 - 1];
    document.getElementById("player2").src = "image/" + playerImg2;

    var randomPlayer3 = (Math.floor(Math.random() * 18) + 1);
    playerImg3 = playerArray[randomPlayer3 - 1];
    document.getElementById("player3").src = "image/" + playerImg3;
}

document.querySelectorAll("img#player2")[0].addEventListener("click", openPack);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <img id="pack" src="image/pack.png" alt="Unopened pack">
    <img id="player2" src="image/pack.png" alt="Place for a second player after the pack is opened">
    <img id="player3" src="image/pack.png" alt="Place for a third player after the pack is opened">
    <img id="veld" src="image/veld.png" alt="Football field with positions">



</body>
<script src="scripts/packs.js"></script>

</html>

如果忘记告诉我，请告诉我，谢谢！

Answer 1

这里是新的 openPack 函数，它将排除重复项

function openPack() {
    var playerArraycopy = playerArray.slice();//getting new copy of initial input
    function getRandomImg(){
        return playerArraycopy.splice([Math.floor(Math.random() * playerArraycopy.length)],1)[0];//calculating a new random image and removing it from copy to exclude duplicates
    }

   document.getElementById("player2").src = "image/" + getRandomImg();
   document.getElementById("pack").src = "image/" + getRandomImg();
   document.getElementById("player3").src = "image/" + getRandomImg();
}

查看Array.splice了解更多信息

如何使用 Javascript 单击另一个图像时出现多个随机图像？

How to make multiple random images appear upon clicking another using Javascript?

javascript

arrays

image

random

invisible