JS. 카드 게임(2) - 마우스를 빨리누르면 생기는 버그

개요

카드 게임을 만들다가 어려웠던 부분들이 있었다.

그 부분만 따로 정리하고자 한다.

 

마우스 빨리 누를 때 버그 나는 거 방지하는 법

잘 만들었는데 마우스를 컴퓨터 인식속도보다 빠르게? 누르게 되면

컴퓨터 마음대로 카드를 해석한다

 

이럴 때 사용하는 것이 true, false이다

let disableDeck = false; 

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 ="";
        disableDeck = false;
    } else {
        setTimeout(() => {
            cardOne.classList.add("shake");
            cardTwo.classList.add("shake");
        },400);

        setTimeout(() => {
            cardOne.classList.remove("flip", "shake");
            cardTwo.classList.remove("flip", "shake");
            cardOne = cardTwo ="";
            disableDeck = false;
        },1200);
    }
}

 

사실 코드는 이렇게 길지만 true와 false가 어디서 무슨 역할을 하는지만 알아본다면 된다

 

간소화 하자면 아래와 같다

 

let disableDeck = false; 

if(clickedCard !== cardOne && !disableDeck){_____} 

→ 클릭된 카드가 없거나 disableDeck이 false라면~ 카드 뒤집기 가능하게 하기

→ 카드 두 개를 다 뒤집은 상태라면, disableDeck = true

→ 이벤트를 다 끝낸 후 disableDeck = false;

 

이제 마구눌러도 된다