De su código publicado, creo que todos los elementos únicos están en una matriz llamada items . Para asegurarse de tener 2 copias de cada uno, puede crear una nueva matriz que incluya items dos veces:

 const doubleItems = items.concat(items);

Para obtener un elemento aleatorio de una matriz, puede escribir:

 const randomIndex = Math.floor(Math.random() * doubleItems.length); const randomElement = doubleItems[randomIndex];

(Observe el .floor , no .round !)

Para asegurarse de no seguir obteniendo accidentalmente el mismo elemento aleatorio varias veces, puede eliminar todos los elementos que elija de su fuente:

 doubleItems.splice(randomIndex, 1);

Si hace esto en un ciclo while , ¡puede continuar hasta que se coloquen todos los elementos!

 const items = [ { src: "A" }, { src: "B" }, { src: "C" }, { src: "D" }, { src: "E" }, { src: "F" }, { src: "G" }, { src: "H" } ]; const doubleItems = items.concat(items); while (doubleItems.length) { // Pick random element const randomIndex = Math.floor(Math.random() * doubleItems.length); const randomElement = doubleItems[randomIndex]; // Remove element doubleItems.splice(randomIndex, 1); // Simplified for brevity const tile = document.createElement("div"); tile.innerText = randomElement.src; document.body.appendChild(tile); }

 body { display: grid; grid-template-columns: 30px 30px 30px 30px; grid-template-rows: 30px 30px 30px 30px; grid-gap: 4px; } div { border: 1px solid black; display: flex; align-items: center; justify-content: center; }

La mejor manera de pensar en ello si tiene un número finito de elementos es crear la matriz que necesita para su solución final (Opción A) o encontrar una manera de excluir elementos de la selección aleatoria después de que no los quiera. más (Opción B).

Primero, refactorizaré la copia de su plantilla en una función llamada render, y sus iteraciones totales (18) y maxIndex (8) en constantes:

 const render = (currItem, index) => { let template = document.getElementsByTagName('template')[0]; let target = document.getElementById('Playground'); let clone = template.content.cloneNode(true); clone.querySelector("img").src= currItem.src; clone.querySelector("img").alt = currItem.id; clone.querySelector('button').setAttribute('id', index); clone.querySelector('button').setAttribute('onClick', null); target.appendChild(clone); }; // The following variables will make your code dynamic, so if you add more items to the game it will continue working correctly const total = item.length * 2; const maxIndex = item.length - 1;

Opción A

Esta opción tiene fines educativos y, dado que tiene una lista finita, puede estar bien, pero es menos eficaz.

 const items = [...item, ...item]; // this is creating a new array with all items twice // shuffle the items in the array for (let i = items.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [items[i], items[j]] = [items[j], items[i]]; } // The array is shuffled with 2 instances of each item, so this will show the desired values items.forEach(render)

Opción B

En esta opción, crearemos una segunda matriz que excluya los elementos que se usaron dos veces.

 const rendered = [] // will store items rendered once while(item.length > 0) { // will run until item has no element let index = Math.round(Math.random() * (item.length - 1)); // max index is based on the current length of item array const currItem = item[index]; render(currItem, index); if (rendered.includes(currItem)) { item.splice(index, 1); // remove item after the second time it is rendered } else { rendered.push(currItem); // add to the rendered array after the first pass } }