JavaScript- Card Game / 자바스크립트 - 카드 뒤집기 게임 구현

 

카드 뒤집기 게임

 

뒷면으로 놓아진 카드를 두 장씩 선택하여 짝을 맞추는 간단한 게임입니다.

 

 

주요 기능

 

• 카드 뒤집기

카드를 선택하면 해당 카드를 뒤집어 앞면으로 바꿉니다.

 

• 카드 비교

두 번째 카드를 선택했을 때, 선택된 두 카드를 비교하여 같으면 앞면으로 유지하고 다르면 카드에 shake효과를 주고 다시 뒤집습니다.

 

• 연속 클릭시 버그 픽스

카드를 빠르게 연속하여 선택할 경우 eventListener가 중첩 실행되어 버그가 발생하였습니다.

이 버그를 해결하기 위해 카드를 선택중인 상태와 flag를 사용하였습니다.

 

 

 

 

소스 코드

 

전체 소스는 https://github.com/wonseok22/ToyProjects/tree/main/cardGame 를 참고하세요.

 

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
        }
        cardTwo =clickedCard;
        disableDeck = true;

        let cardOneImg = cardOne.querySelector(".back img").src;
        let cardTwoImg = cardTwo.querySelector(".back img").src;

        matchCards(cardOneImg, cardTwoImg);
    }
}
//두개의 이미지 비교하기
function matchCards(img1, img2){
    if(img1 == img2){
        cardOne.removeEventListener("click", flipCard);
        cardTwo.removeEventListener("click", flipCard);
        cardOne = cardTwo = "";
        return 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 = "";
            return disableDeck =false;
        }, 1200);
    }
}

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