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

Question

[\"NA\"]

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

更新：因此，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)];