Estoy tratando de barajar las cartas reordenando el índice de los nodos en mi NodeList .
¿Cómo puedo eliminar y agregar los elementos secundarios de un atributo de clase que tengo?
HTML:
<div class="card" data-card="1" onclick="cardClicked(this)"> <img src="img/cards/1.png" alt=""> <img class="back" src="img/cards/back.png" alt=""> </div> <div class="card" data-card="7" onclick="cardClicked(this)"> <img src="img/cards/7.png" alt=""> <img class="back" src="img/cards/back.png" alt=""> </div> <div class="card" data-card="1" onclick="cardClicked(this)"> <img src="img/cards/1.png" alt=""> <img class="back" src="img/cards/back.png" alt=""> </div>JavaScript:
function shuffleCards() { let cards = document.querySelectorAll('.card'); let cardsArray = Array.from(cards); // reorder the nodes of the nodelist (cards) }Hay varias formas de "reorganizar" una matriz. Elegí el método Fisher-Yates en un juego de cartas experimental de "guerra". https://github.com/scottm85/war/blob/master/src/Game/Deck.js#L80
shuffle() { /* Use a Fisher-Yates shuffle...If provides a much more reliable shuffle than using variations of a sort method https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle */ let cards = this.cards; for (let i = cards.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i [cards[i], cards[j]] = [cards[j], cards[i]]; } this.cards = cards; console.log("----------------- Deck Shuffled -----------------"); }https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
De acuerdo, mi ejemplo proporcionado es ligeramente diferente a sus necesidades, ya que estaba haciendo esto en reacción, tenía una matriz Deck construida y no estaba usando JS para la manipulación directa de DOM. Sin embargo, en teoría, podría modificar esto para que funcione con su método. Algo como esto:
function shuffleCards { let cards = document.querySelectorAll('.card'); let cardsArray = Array.from(cards); for (let i = cardsArray.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i [cardsArray[i], cardsArray[j]] = [cardsArray[j], cardsArray[i]]; cards[i].remove(); } cardsArray.forEach(t => document.body.appendChild(t)); }Puede usar métodos sort y Math.random() como este:
function shuffleCards() { var parent = document.getElementById("parent"); let cards = document.querySelectorAll('.card'); let cardsArray = Array.from(cards); //console.log(cardsArray) cardsArray.sort(() => Math.random() - 0.5); //console.log(cardsArray) cardsArray.forEach(t => parent.appendChild(t)); // reorder the nodes of the nodelist (cards) } <h3> Click on card to Shuffle at the same postion</h3> <div id="parent"> <div class="card" data-card="1" onclick="shuffleCards(this)"> card 1 <img src="img/cards/1.png" alt=""> <img class="back" src="img/cards/back.png" alt=""> </div> <div class="card" data-card="7" onclick="shuffleCards(this)"> card 2 <img src="img/cards/7.png" alt=""> <img class="back" src="img/cards/back.png" alt=""> </div> <div class="card" data-card="1" onclick="shuffleCards(this)"> card 3 <img src="img/cards/1.png" alt=""> <img class="back" src="img/cards/back.png" alt=""> </div> </div>El siguiente enfoque es independiente de dónde deben eliminarse los nodos consultados y, después de mezclarlos, deben insertarse nuevamente.
Por lo tanto, uno no necesita saber nada sobre la estructura DOM, excepto la consulta del elemento.
Básicamente ...
_.shuffle . function shuffleArray(arr) { let idx; let count = arr.length; while (--count) { idx = Math.floor(Math.random() * (count + 1)); [arr[idx], arr[count]] = [arr[count], arr[idx]]; } return arr; } function shuffleCards() { const removedNodeDataList = Array .from(document.querySelectorAll('.card')) .map(elmNode => ({ parentNode: elmNode.parentNode, elementNode: elmNode.parentNode.removeChild(elmNode), })); shuffleArray(removedNodeDataList) .forEach(({ parentNode, elementNode }) => parentNode.appendChild(elementNode) ); } function init() { document .querySelector('button') .addEventListener('click', shuffleCards); } init(); img { background-color: #eee; } button { display: block; margin: 0 0 10px 0; } <button>Shuffle Cards</button> <div class="card" data-card="1"> <img src="https://picsum.photos/140/50?grayscale" alt=""> <img class="back" src="https://picsum.photos/120/50?grayscale" alt=""> </div> <div class="card" data-card="2"> <img src="https://picsum.photos/100/50?grayscale" alt=""> <img class="back" src="https://picsum.photos/160/50?grayscale" alt=""> </div> <div class="card" data-card="3"> <img src="https://picsum.photos/180/50?grayscale" alt=""> <img class="back" src="https://picsum.photos/80/50?grayscale" alt=""> </div>