I'm trying to shuffle cards by reordering the index of the nodes in my NodeList
.
How can I achieve removing and appending the children of a class attribute I have?
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)
}
There are several ways you can go about "shuffling" an array. I chose the Fisher-Yates method in an experimental "war" card game. 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
Granted my provided example is slightly different than your needs as I was doing this in react, had a Deck array built out, and wasn't using JS for direct DOM manipulation. In theory though, you could modify this to work with your method. Something like this:
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));
}
You can use sort
and Math.random()
methods like this:
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>
The following approach is agnostic to where the queried nodes need to be removed from, and after shuffling, have to be inserted into again.
Thus one does not need to know anything about the DOM structure except for the element query.
Basically ...
_.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>