Question

我每次随机上传应用程序时如何排列卡片？我试图将卡插入阵列，但尝试是不成功。这是一个纸牌记忆游戏。我可以在DIV中为元素设置位置吗？我的HTML代码在一格中每张卡编码三张八张卡，以及所有以div名称命名的卡：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)    
        };
    }


}

Answer 1

我构建了一个独立的原型来实现这一目标。应该很容易处理代码。

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

首先，我们将卡放置在JS数组中，而不是将卡硬编码到HTML中。

接下来，我们将数组随机播放（）（此堆栈溢出答案为How to randomize (shuffle) a JavaScript array?）

然后，我们使用.forEach（）遍历现已改组的数组-在此循环中，为每个卡创建DOM元素，然后将其附加到页面。

让我知道是否需要进一步说明。

<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)
})

如何随机安排卡片javascript

1 个答案: