创建纸牌配对游戏

Question

我想创建一个纸牌匹配游戏，但是在显示应该隐藏的图像时出现问题。当我单击卡时，将显示图像的路径，而不是实际的图像。

这里是我编写的所有代码：

div#card_board {
  background: #ccc;
  border: #999 1px solid;
  width: 710px;
  height: 600px;
  padding: 24px;
  margin: 0px auto;
}

div#card_board>div {
  background: url(cardQtion.jpg) no-repeat;
  background-size: 100%;
  border: #000 1px solid;
  width: 114px;
  height: 132px;
  float: left;
  margin: 10px;
  padding: 20px;
  font-size: 64px;
  cursor: pointer;
  text-align: center;
}

<script>
  var cardArray = new Array();

  cardArray[0] = new Image();
  cardArray[0].src = 'cardA.jpg';

  cardArray[1] = new Image();
  cardArray[1].src = 'cardA.jpg';

  cardArray[2] = new Image();
  cardArray[2].src = 'cardB.jpg';

  cardArray[3] = new Image();
  cardArray[3].src = 'cardB.jpg';

  cardArray[4] = new Image();
  cardArray[4].src = 'cardC.jpg';

  cardArray[5] = new Image();
  cardArray[5].src = 'cardC.jpg';

  cardArray[6] = new Image();
  cardArray[6].src = 'cardD.jpg';

  cardArray[7] = new Image();
  cardArray[7].src = 'cardD.jpg';

  cardArray[8] = new Image();
  cardArray[8].src = 'cardE.jpg';

  cardArray[9] = new Image();
  cardArray[9].src = 'cardE.jpg';

  cardArray[10] = new Image();
  cardArray[10].src = 'cardF.jpg';

  cardArray[11] = new Image();
  cardArray[11].src = 'cardF.jpg';


  var cardVal = [];
  var cardIDs = [];
  var cardBackFace = 0;

  Array.prototype.cardMix = function() {
    var i = this.length,
      j, temp;
    while (--i > 0) {
      j = Math.floor(Math.random() * (i + 1));
      temp = this[j];
      this[j] = this[i];
      this[i] = temp;
    }
  }

  function newBoard() {

    cardBackFace = 0;
    var output = "";
    cardArray.cardMix();
    for (var i = 0; i < cardArray.length; i++) {
      output += '<div id="card_' + i + '" onclick="cardBackcard(this,\'' + cardArray[i].src + '\')"></div>';
    }
    document.getElementById('card_board').innerHTML = output;
  }

  function cardBackcard(tile, val) {
    if (tile.innerHTML == "" && cardVal.length < 2) {
      tile.style.background = '#FFF';
      tile.innerHTML = val;
      if (cardVal.length == 0) {
        cardVal.push(val);
        cardIDs.push(tile.id);
      } else if (cardVal.length == 1) {
        cardVal.push(val);
        cardIDs.push(tile.id);
        if (cardVal[0] == cardVal[1]) {
          cardBackFace += 2;

          cardVal = [];
          cardIDs = [];

          if (cardBackFace == cardArray.length) {
            alert("Board cleared... generating new board");
            document.getElementById('card_board').innerHTML = "";
            newBoard();
          }
        } else {
          function card2Back() {

            var card_1 = document.getElementById(cardIDs[0]);
            var card_2 = document.getElementById(cardIDs[1]);
            card_1.style.background = 'url(cardQtion.jpg) no-repeat';
            card_1.innerHTML = "";
            card_2.style.background = 'url(cardQtion.jpg) no-repeat';
            card_2.innerHTML = "";

            cardVal = [];
            cardIDs = [];
          }
          setTimeout(card2Back, 700);
        }
      }
    }
  }
</script>

<body>
  <div id="card_board"></div>
  <script>
    newBoard();
  </script>
</body>

Answer 1

您的代码不够理想，坦率地说，我的代码只是其中的一个重构，还有很多可以改进的地方-研究。

鉴于，这是重构：

我真的不喜欢标记中的事件，所以我将单击处理程序调用直接移到了代码中。
我在您的页面中看到了两组JavaScript，为什么？我只是将它们都放在一个中。（请参阅本文档的最后一行）。
您的图像数组无法正常工作，因此我使用了一个名称数组并从中创建了一个图像数组。
元素的插入不同于文本，因此我改用了tile.appendChild(cardArray[cardIndex]);

代码：

// create an array of card images
var cardArray = [];
var cards = ['cardA.jpg', 'cardB.jpg', 'cardC.jpg', 'cardD.jpg', 'cardE.jpg', 'cardF.jpg'];
for (var i = 0; i < cards.length; i++) {
  var im = new Image();
  im.src = cards[i];
  im.alt = cards[i];
  cardArray.push(im);
  cardArray.push(im);
}

var cardVal = [];
var cardIDs = [];
var cardBackFace = 0;

Array.prototype.cardMix = function() {
  var i = this.length,
    j, temp;
  while (--i > 0) {
    j = Math.floor(Math.random() * (i + 1));
    temp = this[j];
    this[j] = this[i];
    this[i] = temp;
  }
}

function newBoard() {
  cardBackFace = 0;
  var output = "";
  cardArray.cardMix();
  for (var i = 0; i < cardArray.length; i++) {
    output += '<div id="card_' + i + '" class="cardcontainer" data-card="' + i + '"></div>';
  }
  document.getElementById('card_board').innerHTML = output;
  var classname = document.getElementsByClassName("cardcontainer");
  for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', cardBackcard, false);
  }
}

function card2Back() {
  var card_1 = document.getElementById(cardIDs[0]);
  var card_2 = document.getElementById(cardIDs[1]);
  card_1.style.background = "url('cardQtion.jpg') no-repeat";
  card_1.innerHTML = "";
  card_2.style.background = "url('cardQtion.jpg') no-repeat";
  card_2.innerHTML = "";
  cardVal = [];
  cardIDs = [];
}

function cardBackcard() {
  // these used to be in the HTML as parameters, I refactored to pass `this`
  // and then use the attribute which is the index of the card it had
  var tile = this;
  //multiply by 1 to get number, could use parseInt but I did not
  var cardIndex = this.getAttribute("data-card") *1;

  if (!(tile.innerHTML == "" && cardVal.length < 2)) return;
  tile.style.background = '#FFF';
  tile.appendChild(cardArray[cardIndex]);
  if (!(cardVal.length == 0 && cardVal[0] == cardVal[1])) return;
  cardVal.push(cardIndex);
  cardIDs.push(tile.id);
  if (cardVal.length == 1) {
    if (cardVal[0] == cardVal[1]) {
      cardBackFace += 2;
      cardVal = [];
      cardIDs = [];
      if (cardBackFace == cardArray.length) {
        alert("Board cleared... generating new board");
        document.getElementById('card_board').innerHTML = "";
        newBoard();
      }
    } else {
      setTimeout(card2Back, 700);
    }
  }
}
newBoard();

创建纸牌配对游戏

问题描述投票：-3回答：1

1个回答

最新问题

创建纸牌配对游戏

问题描述 投票：-3回答：1

1个回答

最新问题

问题描述投票：-3回答：1