如何显示数组中的随机项？

Question

var items    = ['imgs/garbagebag.svg', //[0]
               'imgs/straw.svg', // [1]
               'imgs/utensil.svg', // [2]
               'imgs/chipbag.svg', // [3]
               'imgs/eggs.svg', // [4]


               'imgs/glasscup.svg', //[5]
               'imgs/ketchupbottle.svg', //[6]
               'imgs/jamjar.svg', //[7]
               'imgs/milkbottle.svg', //[8]
               'imgs/popbottle.svg', //[9]


               'imgs/eggshell.svg', //[10]
               'imgs/apple.svg', //[11]
               'imgs/banana.svg', //[12]
               'imgs/teabag.svg', // [13]
               'imgs/leave.svg', // [14]


              'imgs/jug.svg', // [15]
              'imgs/tetrapak.svg', // [16]
              'imgs/container.svg', // [17]
              'imgs/plasticbottle.svg', // [18]
              'imgs/can.svg', //[19]

              'imgs/newspaper.svg', //[20]
              'imgs/cerealbox.svg', // [21]
              'imgs/book.svg', // [22]
              'imgs/cardboard.svg', // [23]
              'imgs/bag.svg' // [24]
]
// This is the black hole on the wall
var hole = document.getElementById("hole");
// starts functioning after 5 seconds
var start = setInterval(shuffle,5000);
// displays an random items from array one by one
function shuffle(){
    hole.addEventListener("click",function(){
    console.log("items");
    items[Math.floor(Math.random()*items.length)] 
});
}

您好，这是一个教用户如何回收利用的小游戏。在屏幕截图中，用户需要单击黑色间隙/孔，以便在黑洞内一一显示随机项目（我尝试附加它，但我不知道我之前应该创建什么）。我对如何实现这一目标感到困惑。我所拥有的似乎还不够。我很欣赏解决方案和提示。感谢您阅读我的帖子。

更新：所以 Elliot 提供的代码是有效的。但是由于某些原因，新创建的 + 随机图像没有像素！我尝试在css中使用className分配新的宽度和高度+ z-index，但这也没有做任何事情。我希望这不是一个复杂的问题来解决T.T

Answer 1

稍微重构你的代码可能是值得的。您似乎正在对项目进行分组。

var items = [{
    image: "imgs/garbagebag.svg",
    type: "paper"
}, {
    image: "imgs/straw.svg",
    type: "paper"
},
...]

这为您在每个项目背后的元数据提供了更大的灵活性。

那么你需要添加事件

var hole = document.getElementById("hole");

function showItem(item) {
    var img = document.createElement("img");
    img.setAttribute("src", item.image);
    // store type as data attribute so we can access it later
    img.setAttribute("data-type", item.type);
    if (hole.childNodes[0]) {
        hole.removeChild(hole.childNodes[0]);
    }
    hole.appendChild(img);
}

function showRandomItem() {
    var item = items[Math.floor(Math.random()*items.length)];
    showItem(item);
}

hole.addEventListener("click", function() {
    showRandomItem();
});

这是此代码在 JSFiddle 上的工作版本

https://jsfiddle.net/nxc5zpen/

看起来您可能遇到的问题是由于 SVG 缩放造成的。这是一个带有 SVG 的工作 JSFiddle。

https://jsfiddle.net/Lhot76gm/1/

这是另一个使用背景图片作为孔洞的版本。

https://jsfiddle.net/j6373mvv/1/

Answer 2

这是从数组中获取项目的方法

var randItem = items[Math.floor(Math.random() * items.length)];