Question

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

以下是我写的所有代码：

<!DOCTYPE html>
<html>
<head>

<title></title>
<meta charset="utf-8" />

<style type="text/css">
    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;
    }
</style>

<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>

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

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();

创建卡片匹配游戏

1 个答案: