我可以从数组中选择随机图像吗

Question

我可以从数组中选择随机图像并将其显示在按钮上吗？当我单击按钮时，我想从所选图像移动到下一张图像。

我想用 javascript 做一个益智游戏，想法是用随机图像显示谜题，例如，当您单击按钮时，图像会更改为下一个。随机的是“img/cableTriple4.png”，但是当我点击时我希望它是“img/cableTriple1.png”，然后是数字2、3，然后又是4...

const gridSize = 4;
const juegoTablero = [
    [1, 2, 2, 1],
    [1, 0, 0, 1],
    [2, 3, 4, 3],
    [1, 0, 0, 2],
];

// Imagenes que uso para los botones del grid
const imageNames = {

    // CABLES RECTOS
    0: ["img/cableRecto1.png",
        "img/cableRecto1.png"],

    // BOMBILLAS
    1: ["img/bombilla1.png",
        "img/bombilla2.png",
        "img/bombilla3.png",
        "img/bombilla4.png"],

    // CABLES DOBLES
    2: ["img/cableDoble1.png",
        "img/cableDoble2.png",
        "img/cableDoble3.png",
        "img/cableDoble4.png"],

    // CABLES TRIPLES
    3: ["img/cableTriple1.png",
        "img/cableTriple2.png",
        "img/cableTriple3.png",
        "img/cableTriple4.png"],

    // CENTRO
    4: ["img/centro1.png",
        "img/centro2.png",
        "img/centro3.png",
        "img/centro4.png"]
}

Answer 1

如果需要保持原始顺序，首先创建数组的副本很重要。

现在可以使用（安全）随机数生成器作为输入来“洗牌”数组的原始或副本。洗牌通常使用 Fisher-Yates 来实现。可以在here找到一个有助于打乱索引而不是元素本身的示例。它使用加密安全数字生成器来增加结果的可信度。 然后你遍历打乱的数组，直到它耗尽然后重新开始。如果保留

turn

，那么您可以将其用作对数组大小取模的索引。