如何将卡片转换到原来的位置?

时间:2017-11-29 19:21:44

标签: javascript loops

我想知道如何能够回到原来的位置并不匹配。 如果有匹配,有一个警告说恭喜,否则再试一次,但我想要两张牌回到原来的位置。  卡片图像不在此处。有人可以帮忙吗? 我想知道如何能够回到原来的位置,这两张卡并不匹配。 如果有匹配,有一个警告说恭喜,否则再试一次,但我想要两张牌回到原来的位置。  卡片图像不在此处。有人可以帮忙吗?



Selection.Columns(1).SpecialCells(xlCellTypeVisible).Count

Function countVisibleSelectedRows()
    Dim count As Integer
    count = 0
    For Each Area In Selection.Areas
        count = count + Area.Columns(1).SpecialCells(xlCellTypeVisible).count
    Next
    countVisibleSelectedRows = count
End Function

// HOW TO RESTART EVERYTHING WITH TIMEOUT 2s AFTER WINNING OR LOOSING?
//HOW TO BACKFLIP BOTH CARDS IF WRONG?

//GLOBAL VAR
const box = document.getElementsByClassName('box')[0];
var cards = [{
    name: 'queen',
    clase: 'diamonds',
    pic: 'images/queen-of-diamonds.png'
  },
  {
    name: 'queen',
    clase: 'hearts',
    pic: 'images/queen-of-hearts.png'
  },
  {
    name: 'king',
    clase: 'diamonds',
    pic: 'images/king-of-diamonds.png'
  },
  {
    name: 'king',
    clase: 'hearts',
    pic: 'images/king-of-hearts.png'
  }
];

function createBoard() {
  for (var i = 0; i < cards.length; i++) {
    var photo = document.createElement('img');
    // console.log(foto);
    photo.setAttribute('src', 'images/back.png');
    photo.setAttribute('data-id', i);
    box.appendChild(photo);
    photo.style.paddingLeft = '20px';
    photo.style.marginTop = '20px';
    photo.style.height = '40%';
    photo.style.width = '15%';
    photo.style.borderRadius = '3%';
    photo.addEventListener('click', function flipcard() {
      var cardId = this.getAttribute('data-id');
      console.log(cardId + ' is my card id');
      var myThis = this; // I want to export THIS cause i cannot access from the other function
      cardsInPlay.push(cards[cardId].name);
      this.setAttribute('src', cards[cardId].pic);
      // console.log(this);
      if (cardsInPlay.length === 2) {
        checkForMatch(myThis, cardId, photo);
      }
    });
  }
}
createBoard()
var cardsInPlay = [];
//2

function checkForMatch(myThis, cardId, photo) { // match cards dont turn back
  if (cardsInPlay[0] === cardsInPlay[1]) {
    alert('CONGRATS!!! YOU FOUND A MATCH');

  } else {
    alert('SORRY TRY AGAIN');
    myThis.setAttribute('src', 'images/back.png');
    console.log(myThis);

  }
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

现在,您的cardsInPlay数组包含点击的name个卡片。如果您使用它来存储对点击的img元素的引用,您将能够访问检查匹配所需的所有内容并将卡翻转而不将任何内容传递给checkForMatch。确保在检查后清空数组!

这里有很多可以改进的地方。使其运行后,请考虑发布到Code Review