Javascript 카드맞추기 게임 만들기

// 01. HTML / CSS 디자인 구성
// 02. 클릭한 카드 뒤집기
// 03. 두개의 뒤집은 카드 확인하기
// 04. 클릭한 카드 두개의 이미지 가져오기
// 05. 두개의 카드 이미지 비교
// 06. 틀린 이미지 애니메이션 효과 주기
// 07. 빨리 클릭하면 버그 발생 처리하기

        const cards = document.querySelectorAll(".cards li");         // 카드들 선택자

        let cardOne, cardTwo;
        let disableDeck = false;

        function flipCard(e){
            let clickedCard = e.target;                              // 클릭한 카드 선택자
            if(clickedCard !== cardOne && !disableDeck){
                clickedCard.classList.add("flip");

                // 첫번째 카드와 두번째 카드의 데이터 저장
                if(!cardOne){                                            // 첫번째 카드에 데이터가 없으면
                    return cardOne = clickedCard;                        // 클릭한 카드의 데이터를 cardOne에 저장
                }
                cardTwo = clickedCard;                                   // 첫번째 카드에 데이터가 있으면 클릭한 카드의 데이터를 cardTwo에 저장
                disableDeck = true;                                      // 빨리눌러서 애니메이션이 진행중일때 클릭이 안되게 막아놓음

                let cardOneImg = cardOne.querySelector(".back img").src;     // 처음 클릭한 카드의 이미지 가져오기 뒤에 .src는 데이터를 문자열로 가져옴
                let cardTwoImg = cardTwo.querySelector(".back img").src;     // 그다음 클릭한 카드의 이미지 가져오기

                // console.log(cardOneImg, cardTwoImg);
                matchCards(cardOneImg, cardTwoImg)
            }
        }

        function matchCards(img1, img2){
            if(img1 == img2){
                cardOne.removeEventListener("click", flipCard);
                cardTwo.removeEventListener("click", flipCard);
                cardOne = cardTwo = "";                                 // 카드 초기화
                disableDeck = false;                                    // 빨리눌러서 애니메이션이 진행중일때 클릭이 안되게 막아놓음
            } else {

                setTimeout(() => {
                    cardOne.classList.add("shake");
                    cardTwo.classList.add("shake");
                }, 400)
    
                setTimeout(() => {
                    cardOne.classList.remove("shake", "flip");
                    cardTwo.classList.remove("shake", "flip");
                    cardOne = cardTwo = "";
                    disableDeck = false;                                // 빨리눌러서 애니메이션이 진행중일때 클릭이 안되게 막아놓음
                }, 1200)
            }

        }

        cards.forEach(card => {
            card.addEventListener("click", flipCard);
        })