处理作业时，警告显示与预期结果相反

Question

免责声明：我对 JS 很陌生

嗨，

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

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

说明还说加载 html 文件应该显示警报，"Sorry, try again."

但是，我得到的警报是 "You found a match!"，即使我选择的两张牌没有。

我认为这可能是显而易见的，但我不确定它可能是什么。

代码如下：

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

我想我看到了问题（和一个潜在的问题）。我在您的代码中添加了一些评论，我建议您按顺序阅读它们（请参阅每条评论中的编号）。

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 2

问题有两个：

你在实际翻开任何一张牌之前叫 checkForMatch()。因此，对于 cardsInPlay[0] 和 cardsInPlay[1]，您最终会得到 undefined 和 undefined。因为undefined === undefined，游戏认为是匹配。要解决此问题，请在两次 flipCard() 调用后调用 函数。

既然移动了函数调用，您将进入无限循环。这是因为当有两张牌时 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();

希望对您有所帮助！ :)

Answer 3

两个观察结果：

您在调用 flipCard 函数之前调用了函数 checkForMatch。
length == 2

checkForMatch

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 4

您在翻转函数之前调用了校验函数。在检查函数中，索引 return undefined value 和 this 当然相等。

处理作业时，警告显示与预期结果相反

Working on an assignment, alert displaying opposite of intended result

javascript

alert

function

object

console.log