Javascript 创建卡片匹配游戏

我想创建一个卡匹配游戏，但我有一个问题，显示的图像应该是隐藏的。当我点击一张卡片时，显示的是图像的路径，而不是实际的图像

以下是我写的所有代码：

div#card#u板{
背景：#ccc；
边框：#999 1px实心；
宽度：710px；
高度：600px；
填充：24px；
保证金：0px自动；
}
div#card_board>div{
背景：url（cardQtion.jpg）不重复；
背景大小：100%；
边框：#000 1px实心；
宽度：114px；
高度：132px；
浮动：左；
利润率：10px；
填充：20px；
字体大小：64px；
光标：指针；
文本对齐：居中；
}

var cardArray=新数组（）；
cardArray[0]=新图像（）；
cardArray[0].src='cardA.jpg'；
cardArray[1]=新图像（）；
cardArray[1].src='cardA.jpg'；
cardArray[2]=新图像（）；
cardArray[2].src='cardB.jpg'；
cardArray[3]=新图像（）；
cardArray[3].src='cardB.jpg'；
cardArray[4]=新图像（）；
cardArray[4].src='cardC.jpg'；
cardArray[5]=新图像（）；
cardArray[5].src='cardC.jpg'；
cardArray[6]=新图像（）；
cardArray[6].src='cardD.jpg'；
cardArray[7]=新图像（）；
cardArray[7].src='cardD.jpg'；
cardArray[8]=新图像（）；
cardArray[8].src='cardE.jpg'；
cardArray[9]=新图像（）；
cardArray[9].src='cardE.jpg'；
cardArray[10]=新图像（）；
cardArray[10].src='cardF.jpg'；
cardArray[11]=新图像（）；
cardArray[11].src='cardF.jpg'；
var cardVal=[]；
var cardIDs=[]；
var cardBackFace=0；
Array.prototype.cardMix=函数（）{
var i=此长度，
j、 温度；
而（--i>0）{
j=数学地板（数学随机（）*（i+1））；
温度=此[j]；
这个[j]=这个[i]；
此[i]=温度；
}
}
函数newBoard（）{
cardBackFace=0；
var输出=”；
cardArray.cardMix（）；
对于（var i=0；i

你有一些不太理想的代码，坦率地说，我的代码只是其中的一个重构，还有很多可以改进的地方——好好研究

鉴于此，以下是重构：

我真的不喜欢标记中的事件，所以我将单击处理程序调用直接移到了代码中

我在你的页面上看到了两组JavaScript为什么？我只是把它们都放在一个地方（见最后一行）

你的图像数组不起作用而且冗长，所以我使用了一个名称数组，并由此创建了一个图像数组

元素的插入与文本不同，因此我使用了

tile.appendChild（cardary[cardIndex]）取而代之

代码：

//创建一个卡映像数组
var cardArray=[]；
var cards=['cardA.jpg'、'cardB.jpg'、'cardC.jpg'、'cardD.jpg'、'cardE.jpg'、'cardF.jpg']；
对于（变量i=0；i0）{
j=数学地板（数学随机（）*（i+1））；
温度=此[j]；
这个[j]=这个[i]；
此[i]=温度；
}
}
函数newBoard（）{
cardBackFace=0；
var输出=”；
cardArray.cardMix（）；
对于（var i=0；i// 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();