카드게임

 

 

 

이번 스크립트 예제는 카드게임 만들기 입니다. 

//01. html/css 디자인 구성
        //02. 클릭한 카드 뒤집기
        //03. 두개의 카드 뒤집기 확인하기(첫번째, 두번째)
        //04. 클릭한 카드 두개의 이미지 가져오기
        //05. 두개의 이미지 비교하기
        //06. 틀린 이미지 애니메이션 효과주기 (shake)
        //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");

                //cardOne의 데이터가 없으면 리턴으로 바로 넣어주기
                if(!cardOne){
                    return cardOne = clickedCard;
                }
                
                cardTwo = clickedCard;
                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){
            //두 이미지의 src 문자열 값을 비교
             if(img1 == img2){
                cardOne.removeEventListener("click", flipCard);
                cardTwo.removeEventListener("click", flipCard);
                cardOne = cardTwo = "";
                disableDeck = false;
             } else {                 
                setTimeout(function(){
                    cardOne.classList.add("shake");
                    cardTwo.classList.add("shake");
                },400);

                setTimeout(function(){
                    cardOne.classList.remove("shake", "flip");
                    cardTwo.classList.remove("shake", "flip");
                    cardOne = cardTwo = "";
                    disableDeck = false;
                },1200);
             }
        }
        cards.forEach(card => {
            card.addEventListener("click", flipCard);
            
        })

처음으로 디자인 구성은 CSS의 perspective  원근점 설정을 통해서  클릭했을때 X축으로 회전하며 카드가 뒤집어 지는듯한 애니메이션을 적용하였습니다. 

 

그 후 스크립트를 이용하여 구현합니다. 

첫번째 클릭하는 카드를 뒤집은 후  다음에 클릭하는 카드를 뒤집습니다.  두개의 카드가 일치하면 그대로. 

 

일치하지 않으면 카드를 다시 뒤집습니다.  두 카드를 비교하는 과정에서 .src 를 이용해서 이미지의 파일 이름을 가져와서 비교합니다.

 

일치하지 않을때에 shake 애니메이션을 주어서 흔들린 뒤 setTimeout을 이용해서 다시 뒤집습니다.

 

여기까지 순조롭게 진행 후 버그를 찾아서 수정합니다. 

 

카드를 빠르게 누르면 엉키는 버그가 있어서  카드가 일치하지 않는동안 일어나는 애니메이션( shake 와 flip) 이 일어나는 동안 다른 카드들을 클릭하지 못하게 막아줍니다.