Question

我有一个游戏，用户必须猜测两对类似的扑克牌才能获胜。我希望能够在游戏结束后将所有图像（图像显示扑克牌的正面）重置为背面图像。

在var reset中，我尝试了几种方法来执行该任务（它们被注释掉了）。你们能给我一个提示，哪一个最接近正确的解决方案？

由于

//var cards = ["queen", "queen", "king", "king"];
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[0] === cardsInPlay[1]) {
      alert("You found a match!");
  } else {
      alert("Sorry, try again.");
  }
};

var flipCard = function() {
  var cardId = this.getAttribute('data-id');
  this.setAttribute('src', cards[cardId].cardImage);
  console.log("User flipped " + cards[cardId].rank);
  cardsInPlay.push(cards[cardId].rank);
  console.log(cards[cardId].cardImage);
  console.log(cards[cardId].suit);

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

var createBoard = function() {
  for (i = 0; i < cards.length; i++) {
    var cardElement = document.createElement('img');
    cardElement.setAttribute('src', "images/back.png");
    cardElement.setAttribute('data-id', i);
    cardElement.addEventListener('click', flipCard);
    document.getElementById('game-board').appendChild(cardElement);
  }
};

var reset = function() {
  cardsInPlay.length = 0;
  //for (i = 0; i < cardsInPlay.length; i++) {
    //document.getElementById('img').setAttribute('src', "images/back.png");
    //var board = document.getElementById('img');
    //board.setAttribute('src', "images/back.png");
    //var parent = document.getElementById('game-board');
    //var child = document.getElementById('img');
    //parent.removeChild(child);
    //var board = document.querySelector('game-board');
    //board.parentNode.removeChild(board);
    //createBoard();
};

createBoard();

var button = document.querySelector('button');
button.addEventListener('click', reset);

Answer 1

从代码的外观来看，应该这样做：

var reset = function() {
  for (i = 0; i < cards.length; i++) {
    //you had img here
    document.getElementsByTagName("img")[i].setAttribute('src', "images/back.png"); 
  }
};

我认为你让getElementById和getElementsByTagName感到困惑。为了使getElementById工作，需要在特定的html节点上设置id属性（并且它需要在页面上是唯一的）。 getElementsByTagName将获取特定标记名称的页面上的所有元素（在本例中为img）。如果我错过了某些内容，请发布小提琴或指导我完成您的完整代码。

Answer 2

您应该使用getElementsByTagName代替getElementById来获取img代码元素。

注意：以下解决方案假设图片仅适用于游戏。如果您的HTML中碰巧有其他任何图像，那么它们也会受到影响。

快速解决方案

const imgElements = document.getElementsByTagName("img");

for(let i=0; i<imgElements.length; i++) {
  imgElements[i].setAttribute("src", "images/back.png");
}

更好的解决方案

如果您要隔离游戏中使用的图像，可以在渲染中执行类似的操作。

var createBoard = function() {
  for (i = 0; i < cards.length; i++) {
    .
    .
    .
    cardElement.setAttribute('data-type', 'game-card-image')
    .
    .
    .
  }
};

然后根据下面的data-type进行选择

const imgElements = document.querySelectorAll("img[data-type='game-card-image']");

for(let i=0; i<imgElements.length; i++) {
  imgElements[i].setAttribute("src", "images/back.png");
}

将图像阵列重置为默认图像

2 个答案: