How to Arrange Cards Randomly javascript

Question

how do I arrange the cards every time I randomly upload the app? I tried to insert the cards into the array but the attempt was unsuccessful. This is a card memory game. Can I set a location within DIV for my elements? My HTML code three eight cards every card in one div , and all card in div name: allCard

var elPrevCard = null;
var couplesCount = 4;
var flippedCouplesCount = 0 ;
var flippedCard = 0;

var audioWin = new Audio('win.mp3')



function restartClick()
{
    console.log('restart');
    console.log('elPrevCard :', elPrevCard);
    elPrevCard = null;
    flippedCard = 0
    flippedCouplesCount = 0 ;

    var i;
    var element = document.getElementsByClassName("flipped");

    // ES6
    // [...elementClasses].forEach((className, i) => {
    // OR ES5


    Array.prototype.slice.call(element).forEach(function (className, i) {


        console.log("i",i);
        console.log("className",className.classList);


        className.classList.remove("flipped");


        console.log('elementClasses contain :');

    });

}

 function cardClicked(elCard){
    elCard.classList.add('flipped');


    if(elPrevCard === null)
    {
        console.log('first card')
        elPrevCard = elCard;
        flippedCard++;

    }
    else
    {
        console.log('second card');
        flippedCard++;
        var card1 = elPrevCard.getAttribute('data-card');
        var card2 = elCard.getAttribute('data-card');
        if(card1 === card2)
        {
            console.log('Right!');
            elPrevCard = null;
            flippedCouplesCount++;

            if(couplesCount === flippedCouplesCount)
            {
                console.log('victory');
                audioWin.play();
            }
            console.log(flippedCouplesCount);

        }else{
            console.log('Wrong!');
            setTimeout(function(){                
                elPrevCard.classList.remove('flipped');
                elCard.classList.remove('flipped');
                elPrevCard = null;
            },1000)    
        };
    }


}

If you provide HTML and JS code snippets, I'll happily take a crack at it for you. — James Allen, Aug 08 '19 at 17:42

score 0 · Accepted Answer · answered Aug 08 '19 at 19:04

I built a stand-alone prototype to achieve this. It should be easy enough to work in to your code.

Codepen: https://codepen.io/JimmyJames88/pen/zgjwob

Firstly, instead of hardcoding the cards in to the HTML, we'll place them in a JS array.

Next we shuffle() that array ( credit to this stack overflow answer: How to randomize (shuffle) a JavaScript array? )

Then we loop through the now shuffled array using .forEach() -- it is during this loop that DOM elements are created for each card, and then appended to the page.

Let me know if you need any further clarification.

<html>
  <head></head>
  <body>
    <div class="card-container"></div>
  </body>
</html>

.card-container {
  display: flex;
  justify-content: space-between;
}

.card {
  display: flex;
}

.card .front,
.card .back {
  width: 100px;
  height: 160px;
  border: 1px solid #CCC;
  background-color: #F3F3F3;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

var cards = ['Ace of Spades', 'Queen of Hearts', 'Two of Hearts', 'Five of Diamonds'];
cards = shuffle(cards)

cards.forEach(function(card) {
  var elem = document.createElement('div');
  elem.classList.add('card');

  var front = document.createElement('div');
  front.appendChild(document.createTextNode(card));
  front.classList.add('front');

  var back = document.createElement('div');
  back.appendChild(document.createTextNode('BACK'));
  back.classList.add('back');

  elem.appendChild(front);
  elem.appendChild(back);


  document.querySelector('.card-container').appendChild(elem);
  console.log(card)
})

How to Arrange Cards Randomly javascript

1 Answers1