Javascript 메모리 카드 게임 마지막 카드가 뒤집히지 않습니다

Question

안녕하세요 저는 여기에 데모가있는 메모리 게임이 있습니다.

https://kuochye.github.io/memorygame/

나는 마지막 카드를 뒤집어서하지와 문제가 왜 알아낼 수 없습니다.

document.querySelectorAll(".flip-container").forEach(card => card.classList.add("clicked")); 
setTimeout(function() { 
document.querySelectorAll(".flip-container").forEach(card => 
card.classList.remove("clicked")); 
}, 30000); 

^이것은 카드가 내려 가기 전에 30 초 동안 카드를 보여 주려고 한 것입니다. 하지만 어떻게 든 마지막 카드가 보이지 않습니다.

// Build single card 
var buildCardNode = function (index, value, isRevealed, width, height) { 
var flipContainer = document.createElement("li"); 
var flipper = document.createElement("div"); 
var front = document.createElement("a"); 
var back = document.createElement("a"); 

flipContainer.index = index; 
flipContainer.style.width = width; 
flipContainer.style.height = height; 
flipContainer.classList.add("flip-container"); 
if (isRevealed) { 
    flipContainer.classList.add("clicked"); 
} 

flipper.classList.add("flipper"); 
front.classList.add("front"); 
front.setAttribute("href", "#"); 
back.classList.add("back"); 
back.classList.add("card-" + value); 
back.setAttribute("href", "#"); 

flipper.appendChild(front); 
flipper.appendChild(back); 
flipContainer.appendChild(flipper); 

flipContainer.addEventListener('click', handleFlipCard); 

    document.querySelectorAll(".flip-container").forEach(card => card.classList.add("clicked")); 
setTimeout(function() { 
document.querySelectorAll(".flip-container").forEach(card => 
card.classList.remove("clicked")); 
}, 30000); 

return flipContainer; 

}; 

Answer 1

당신이하고있는 일은 이미 추가 된 모든 카드를 찾고있는 것입니다. 그건 괜찮 겠지 만, 당신은 문서에 각 카드를 추가하기 전에 그것을하고있다. 따라서 추가 된 각 카드는 이전에 추가 된 모든 카드를 찾아서 뒤집습니다.

대신 두 가지 중 하나를 수행하고 싶습니다.

a. 모든 카드가 문서에 추가 된 후 모든 카드를 뒤집습니다 (첫 번째 코드를 buildCardNode 함수에서 호출 한 위치로 이동 시킴).

b. 각 카드가 문서에 추가되기 전에 직접 뒤집으십시오 (document.querySelectorAll.forEach를 사용하는 대신 flipContainer.classList.add/remove 사용).