处理任务，提醒显示与预期结果相反的结果。

Question

免责声明:我对JS非常陌生

嗨,

我在做一个纸牌游戏的作业。查看说明，我在控制台中正确地获得了以下内容：

User flipped queen
images/queen-of-hearts.png
hearts
User flipped king
images/king-of-hearts.png
hearts

说明还指出，加载html文件时应显示警报，“对不起，重试。”

然而，我得到的警告是：“你找到了匹配的东西！”即使这两张选好的牌。

我想这可能是很明显的事情，但我不确定它会是什么。

下面是代码：

console.log('up and running');

var cards = [

{
rank: 'queen',
suit: 'hearts',
cardImage: 'images/queen-of-hearts.png',
},

{
rank: 'queen',
suit: 'diamonds',
cardImage: 'images/queen-of-diamonds.png',
},

{
rank: 'king',
suit: 'hearts',
cardImage: 'images/king-of-hearts.png',
},

{
rank: 'king',
suit: 'diamonds',
cardImage: 'images/king-of-diamonds.png',
}

];

var cardsInPlay = [];

var checkForMatch = function() {
    if (cardsInPlay.length === 2) 
        checkForMatch();

        if (cardsInPlay[0] === cardsInPlay[1]) {
                alert('You found a match!');
            } else {
                alert('Sorry, try again.');
    }   
};

checkForMatch();



var flipCard = function(cardId) {
    console.log("User flipped " + cards[cardId].rank);

    console.log(cards[cardId].cardImage);
    console.log(cards[cardId].suit);

    cardsInPlay.push(cards[cardId].rank);
}



flipCard(0);
flipCard(2);

Answer 1

二次观测：

• 在调用checkForMatch函数之前调用函数flipCard。
• 不需要在checkForMatch时调用length == 2函数

​

console.log('up and running');

var cards = [

  {
    rank: 'queen',
    suit: 'hearts',
    cardImage: 'images/queen-of-hearts.png',
  },

  {
    rank: 'queen',
    suit: 'diamonds',
    cardImage: 'images/queen-of-diamonds.png',
  },

  {
    rank: 'king',
    suit: 'hearts',
    cardImage: 'images/king-of-hearts.png',
  },

  {
    rank: 'king',
    suit: 'diamonds',
    cardImage: 'images/king-of-diamonds.png',
  }

];

var cardsInPlay = [];

var checkForMatch = function() {
  //if (cardsInPlay.length === 2)
    //checkForMatch();
console.log(cardsInPlay)
  if (cardsInPlay[0] === cardsInPlay[1]) {
    alert('You found a match!');
  } else {
    alert('Sorry, try again.');
  }
};


var flipCard = function(cardId) {
  console.log("User flipped " + cards[cardId].rank);

  console.log(cards[cardId].cardImage);
  console.log(cards[cardId].suit);

  cardsInPlay.push(cards[cardId].rank);
}

flipCard(0);
flipCard(2);

checkForMatch();

​

快乐编码！

Answer 2

我想我看到了这个问题(也是一个潜在的问题)。我在您的代码中添加了一些注释，我建议您按顺序阅读它们(见每个注释中的编号)。

console.log('up and running');

var cards = [

{
rank: 'queen',
suit: 'hearts',
cardImage: 'images/queen-of-hearts.png',
},

{
rank: 'queen',
suit: 'diamonds',
cardImage: 'images/queen-of-diamonds.png',
},

{
rank: 'king',
suit: 'hearts',
cardImage: 'images/king-of-hearts.png',
},

{
rank: 'king',
suit: 'diamonds',
cardImage: 'images/king-of-diamonds.png',
}

];

var cardsInPlay = [];

var checkForMatch = function() {
    // 2 - Are there two flipped cards?
    //     No, because there are no cards in play yet
    if (cardsInPlay.length === 2) 
        checkForMatch();

    // 3 - I think that 'if' is missing a curly brace!
    //     So the follow code runs:

        // 4 - undefined === undefined
        if (cardsInPlay[0] === cardsInPlay[1]) {
                // 5 - Match!
                alert('You found a match!');
            } else {
                alert('Sorry, try again.');
    }   
};

// 1 - This runs before any cards are flipped
checkForMatch();



var flipCard = function(cardId) {
    console.log("User flipped " + cards[cardId].rank);

    console.log(cards[cardId].cardImage);
    console.log(cards[cardId].suit);

    cardsInPlay.push(cards[cardId].rank);
}



flipCard(0);
flipCard(2);

请注意，如果在3添加缺少的大括号(另一个用来关闭它)，您将有一个无限循环！因为checkForMatch()无穷无尽地自称。

Answer 3

问题有两方面：

1. 在实际翻转任何一张卡之前，请先打电话给checkForMatch()。因此，您以undefined和undefined作为cardsInPlay[0]和cardsInPlay[1]的结尾。因为undefined === undefined，游戏认为它是匹配的。要解决这个问题，请在checkForMatch()函数调用两个flipCard()之后调用函数flipCard()。
2. 现在函数调用已被移动，您将进入一个无限循环。这是因为当游戏中有两张牌时，checkForMatch()会自己打电话.你从不改变游戏中的牌数。要解决这个问题，请删除对checkForMatch()的内部引用，只需在第一个检查中运行第二个if条件，检查是否有两个卡片。这样，只有当有两张卡片时，它才会比较卡片的值。

在以下工作示例中可以看到这一点：

​

console.log('up and running');

var cards = [{
    rank: 'queen',
    suit: 'hearts',
    cardImage: 'images/queen-of-hearts.png',
  },
  {
    rank: 'queen',
    suit: 'diamonds',
    cardImage: 'images/queen-of-diamonds.png',
  },
  {
    rank: 'king',
    suit: 'hearts',
    cardImage: 'images/king-of-hearts.png',
  },
  {
    rank: 'king',
    suit: 'diamonds',
    cardImage: 'images/king-of-diamonds.png',
  }
];

var cardsInPlay = [];

var checkForMatch = function() {
  if (cardsInPlay.length === 2) {
    if (cardsInPlay[0] === cardsInPlay[1]) {
      alert('You found a match!');
    } else {
      alert('Sorry, try again.');
    }
  }
};

var flipCard = function(cardId) {
  console.log("User flipped " + cards[cardId].rank);
  console.log(cards[cardId].cardImage);
  console.log(cards[cardId].suit);
  cardsInPlay.push(cards[cardId].rank);
}

flipCard(0);
flipCard(2);

checkForMatch();

​

希望这会有帮助！)