Question

免责声明：我是JS的新手

大家好，

我正在为网络浏览器制作纸牌游戏，在控制台中我应该得到以下内容：

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

我在控制台中看到的唯一消息是“启动并运行”（请参阅下面的代码）。

我也应该弹出以下内容：

“此页面显示：抱歉，请重试。”

按照（非常模糊）发布的说明，浏览我的课程组的Slack帖子，以及反复试验，我没有得到任何结果。所以我想我会把我的代码发布到stackoverflow，看看有没有人发现我错过的东西，或者有什么东西在错误的地方。

谢谢！这是代码：

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 flipCard = function() {
    console.log("User flipped " + cards[cardId].rank);

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

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

}


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

checkForMatch();

Answer 1

@Tsardines阅读代码中的注释，希望这有助于解释一下

... and just for fun

＆＃13;

console.log("up and running");

const 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"
  }
];


let cardsInPlay = [];

// I am not sure how you were building your html, so I created a quick function that wil build one out
function buildBoard() {
  // the "board" wrapper
  const board = document.getElementById("board");
  // loop through the array of cards defined above
  for (const card of cards) {
    // create a new DOM element
    const elem = document.createElement("button");
    // just for demo display purposes
    elem.innerHTML = `${card.rank} of ${card.suit}`;
    // add the click event handler
    elem.addEventListener("click", function() {
      // pass the clicked card data to `flipCard`
      flipCard(card);
    });
    // append the DOM element to the board
    board.appendChild(elem);
  }
}


// I need to know what card is clicked so I can add it's data to `cardsInPlay`
function flipCard(card) {
  console.log(card, "selected card");
  console.log("User flipped " + card.rank);
  console.log(card.cardImage);
  console.log(card.suit);
  // use unshift to push the card to the front of the array insead of the end
  cardsInPlay.unshift(card.rank);
  // ensure we remove the older selected cards so we only have 2
  if (cardsInPlay.length > 2) {
    cardsInPlay.splice(2, 1);
  }
  // call check for match to see if the remaining cardsInPlay match
  checkForMatch();
}

function checkForMatch() {
  if (cardsInPlay.length === 2) {
    if (cardsInPlay[0] === cardsInPlay[1]) {
      alert("You found a match!");
      
      // cardsInPlay = []; // uncomment to reset the game
    } else {
      alert("Sorry, try again.");
      
      // cardsInPlay = []; // uncomment to reset the game
    }
  }
};
// build the game board
buildBoard();
// no need to call `checkForMatch` on load since the `cardsInPlay` is being reset
// checkForMatch();

＆＃13;

#board button {
  width: 100px;
  height: 200px;
  border: 1px solid #000;
  float: left;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

＆＃13;

<div id="board"></div>

＆＃13;

Answer 2

你的第一个if块应该有其他条件，你可以在里面发出警报，以便你可以看到警报..

处理任务时，控制台不显示预期结果

2 个答案: