여기까지 코드를 작성하고 실행해 보면 두 카드의 색이 다른 경우에 두 번째 카드는 아예 뒤집히지 않습니다. 이는 두 번째 카드를 뒤집기도 전에 flipped 클래스가 제거되어 그렇습니다. 두 카드의 색이 다르더라도 두 번째 카드의 앞면도 보여 줬다가 뒤집어야 합니다. 따라서 앞면을 보여 줄 충분한 시간을 확보해야 합니다. 여기서는 0.5초로 주겠습니다.
function onClickCard() { // 클릭한 카드 확인 함수
(중략)
// 두 카드의 색이 다르면
setTimeout(() => {
clicked[0].classList.remove('flipped'); // flipped 클래스 제거
clicked[1].classList.remove('flipped'); // flipped 클래스 제거
clicked = []; // 클릭한 카드 배열 비우기
}, 500);
}
의도한 대로 작동하는지 실행해서 확인해 보세요.