Memory Game

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

        const cards = document.querySelectorAll(".cards li");

        let cardOne, cardTwo;
        let disableDeck = false;

        function flipCard(e){   //클릭 카드 = e 타겟
            let clickedCard = e.target;
           
            if(clickedCard !== cardOne && !disableDeck){    //(빨리 클릭 버그)클릭카드와 첫번째 카드가 같지 않으면
                clickedCard.classList.add("flip");

                if(!cardOne){   //첫번째 카드에 아무것도 없을때 
                    return cardOne = clickedCard;   
                }

                cardTwo = clickedCard;
                disableDeck = true;

                let cardOneImg = cardOne.querySelector(".back img").src//이미지 값 가져오기 첫번째 클릭 이미지 값
                let cardTwoImg = cardTwo.querySelector(".back img").src//두번째 클릭 이미지 값 속성값 src를 붙여서 문자열로 비교하게 함
                console.log(cardOne, cardTwo)

                matchCards(cardOneImg, cardTwoImg)  //카드1 카드2를 넘겨줌
            }
        }

        //05.두개의 이미지 비교하기

        function matchCards(img1, img2){
            
            if(img1 == img2){   //맞췄을때 클래스 click를 삭제
                cardOne.removeEventListener("click", flipCard)
                cardTwo.removeEventListener("click", flipCard)
                cardOne = cardTwo = ""; //초기화
                return disableDeck = false; //클릭했을때만 true 안했으면 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);   //카드를 클릭 했을때 뒤짚어지게 
        })
}