我有一个古怪的纸牌游戏，它让我发疯编辑-解网

问：

对于一项任务，我必须制作一个纸牌游戏。一切都很好，直到分配的最后一点，当数组长度达到 2 时，我翻转或移除卡片，具体取决于它们是否同名。

[HTML全文]

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Cardgame</title>
    <link href="./css/game.css" rel="stylesheet">
</head>

<body>
<select id="fieldsize">
    <option disabled selected>kies een speelveld</option>
    <option value="4">4x4</option>
    <option value="5">5x5</option>
    <option value="6">6x6</option>
</select>
<div class="grid-container" id="field"></div>
        
    <script src="./js/memory.js" type="module"></script>
</body>

</html>

CSS的

#field {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  width: 100%;
  margin: 0 auto;
}

#field>div {
padding: 5px;
position: relative;
}
img {
  width: 100%;
}

.board4 {
  flex: 25%;
  max-width: 25%;
  box-sizing: border-box;
}

.board5 {
  flex: 20%;
  max-width: 20%;
  box-sizing: border-box;
}

.board6 {
  flex: 16.66666%;
  max-width: 16.66666%;
  box-sizing: border-box;
}

.covered, .uncovered {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}
.uncovered {
  display: none;
}

img {
  margin: 0;
  display: block;
}

@media screen and (min-width: 768px) {
  #field {
    max-width: 768px;
  }
}

JS函数给出问题;

let flippedCards = [];

function onClickCard(e){
    e.stopImmediatePropagation();

    let imageURL = "./img/" + e.target.name + ".jpg";
    let coveredImageURL = "./img/cover.png";
    const clickedCard = e.target;
    clickedCard.setAttribute("src", imageURL);   
    console.log(e.target.getAttribute("name"));

    clickedCard.setAttribute("class", "flipped");

    flippedCards.push(e.target.getAttribute("name"));
    console.log(flippedCards.length);

    if(flippedCards.length == 2){
        console.log("check if cards are the same");
        let collection = document.getElementsByClassName("flipped");

        if(flippedCards[0] == flippedCards[1]){
            console.log("it's a match!");
            setTimeout(() => {
                for ( let i = 0; i < collection.length; i++) {
                    collection[i].remove();
                }
                flippedCards = [];
            }, 1000);
        } else {
            console.log("too bad...");
            flippedCards = [];
            console.log(flippedCards);
            setTimeout(() => {
                for ( let i = 0; i < collection.length; i++) {
                    collection[i].setAttribute("src", coveredImageURL);
                    collection[i].setAttribute("class", undefined);
                }
            }, 1000);
        }
    } else if (flippedCards.length > 2){
        console.log("wait that's not supposed to happen!");
        flippedCards = [];
    }
};

对我来说奇怪的是，有时该功能可以正常工作，但有时，当一张或多张牌在一段时间内没有翻转时，或者当找到匹配项时，错误的牌被删除，即之前翻转的牌。

请帮帮我，我在代码中没有看到问题。

我尝试过使用不同的方法来选择翻转的卡片，但到目前为止，我发现最干净、最可靠的方法，尽管仍然像其他方法一样不稳定。我希望通过找到一种方法来正确地挑选出选定的电流，事故至少会减少。

数组 javascript 对象

我有一个古怪的纸牌游戏，它让我发疯编辑

I have a wonky card game and it's driving me nuts edit

评论