카드 게임 (card.html)

1. 사전계획

카드의 배열은 랜덤으로 생성하기

카드를 클릭했을 때
data-id값 data-name 값 저장, 카드 뒤집기(rotate)

카드 2장이 뒤집히면 저장된 값 비교하여
같으면 화면에서 사라지고 게임완료 배열에 추가
다르면 다시 원래대로 뒤집기

게임완료 배열의 length가 카드 수와 같다면
성공문구 띄우기 함수 실행

[ 필요한 값 ]

• 각 카드 별 data-id 값, data-name 값
• 배열 랜덤 생성
• 카드 비교 함수
• 카드 비교 후 움직임
• 게임완료 배열

2. 개발과정

(간단히 소개하는 소스이므로 정확한 전체 소스는 github에서 확인해주세요!)

카드를 랜덤으로 나열하기 위해 랜덤 함수로 배열생성
data-id : 1~4
data-name : water1, water2, book1, book2, table1, table2, tree1, tree2,

<script>
    let num;
    let topCardNum = [];
    let bottomCardNum = [];
    let topName;
    let bottomName;

    function makeNum(which) {
        //1부터 4까지 숫자로 랜덤 배열생성
        for (var i; 1; i++) {
            num = Math.floor(Math.random() * 4) + 1;
            if (jQuery.inArray(num, which) == -1) {
                which.push(num);
            }
            if (which.length == 4) {
                break;
            }
        }
    }

    //상,하단 cardNum 랜덤배열
    makeNum(topCardNum); //ex) topCardNum = [1,2,3,4]
    makeNum(bottomCardNum); //ex) bottomCardNum = [2,3,1,4]

    //makeCard 함수 파라미터 생성 및 실행
    for (var i = 0; i < 4; i++) {
        function cardNameMake(cardArr, name){
            if ((cardArr[i] == 1)) {
                name = 'water';
            } else if ((cardArr[i] == 2)) {
                name = 'book';
            } else if ((cardArr[i] == 3)) {
                name = 'table';
            } else if ((cardArr[i] == 4)) {
                name = 'tree';
            }
            cardArr == topCardNum? topName = name : bottomName = name;
        }
        cardNameMake(topCardNum, topName);
        cardNameMake(bottomCardNum, bottomName);

        //card html 생성 함수 실행
        makeCard(topCardNum[i], topName + '1');
        makeCard(bottomCardNum[i], bottomName + '2');
    }
</script>

카드 html 생성 함수

<script>
    //card html 생성 함수
    function makeCard(cardNum, name) {
        $('.cards-box').append(`<div class="flip-box center">
        <img src="images/card_front.png" class="front" data-id="${cardNum}" data-name="${name}">
        <img src="images/card_back_${cardNum}.png" class="back" data-id="${cardNum}" data-name="${name}"></div>`);
    }
</script>

첫번째 카드 클릭 시
data-id 값 저장
data-name 값 저장
css변경을 위한 해당카드 부모 저장
rotate 뒤집기

<script>
    $('.flip-box').on('click', function (e) {
        var flipBoxId = e.target.dataset.id;
        var flipBoxName = e.target.dataset.name;
        var flipBoxCard = $(e.target).parent();
        num++; //클릭횟수 증가

        //첫번째 클릭
        if (num == 1) {
            firstId = flipBoxId; //data-id 저장
            firstName = flipBoxName; //data-name 저장
            firstCard = flipBoxCard; //해당부모저장
            if (firstId != undefined) { //카드뒤집기
                firstCard.css('transform','rotateY(180deg)');
            }
        }

       //두번째 클릭
       if (num == 2 && flipBoxName != firstName) {
            secondId = flipBoxId; //data-id 저장
            secondName = flipBoxName; //data-name 저장
            secondCard = flipBoxCard; //해당부모저장
            if (secondId != undefined) { //카드뒤집기
                secondCard.css('transform','rotateY(180deg)');
            }
        }        
    });
</script>

두장의 카드가 뒤집히면 data-name 값 비교하기

<script>
    if (firstId != null && secondId != null) {

        //id 값이 같을 경우
        if (firstId == secondId) {
            firstCard.css({ 'transform': 'rotateY(90deg)' });
            secondCard.css({ 'transform': 'rotateY(90deg)' });

            //게임완료 배열에 추가
            successBox.push(firstCard);
            successBox.push(secondCard);
            if (successBox.length == 8) {
                successAlert();
            }
        }

        //id 값이 다를 경우
        else if (firstId != secondId) {
            firstCard.css({ 'transform': 'rotateY(0deg)' });
            secondCard.css({ 'transform': 'rotateY(0deg)' });
        }

        num = 0;
        secondId = null;
    }
</script>

3. 시행착오

*** 해당부분의 주석만 표시함

같은 카드를 클릭하거나 미친듯이 클릭되더라도 유효클릭을 잘 잡아내야했다

1. num 변수를 만들어 클릭횟수를 체크
2. start 변수를 만들어 id값 비교중에는 동작x
3. 두번째 클릭시에는 flipBoxName값이
   첫번째 클릭과 같다면 두번째 클릭으로 인식 되지 않도록 함
4. 클릭 카드를 뒤집을때도 data-id값이 unfinded 가 아닌지 다시 체크
5. 이외의 무효클릭 처리

<script>

    //1. 클릭횟수 체크
        var num = 0;

    //2. id값 두개 비교 중에는 start는 false
        var start = true;

    //3. 두번째 유효 클릭
        if (num == 2 && flipBoxName != firstName) {
            secondId = flipBoxId;
            secondName = flipBoxName;
            secondCard = flipBoxCard;
            if (secondId != undefined) { //4. 카드뒤집기 (첫번째 클릭도 마찬가지)
                secondCard.css('transform','rotateY(180deg)');
            }
        }

    //5. 이외의 무효클릭 처리
        else if (num >= 2 && flipBoxName == firstName) {
            num = 1;
            return;
       }
        if (num >= 3 || secondId == undefined) {
            secondId = null;
            num = 1;
            return;
        }
        if (firstId == undefined) {
            firstId = null;
            num = 0;
            return;
        }
        
</script>

4. 결과물

5. 개인적 코멘트

디자인이나 기본기능은 간편했지만
클릭의 경우의 수와 광클했을때 값을 받아오지 못하는 undefined를 찾기위해
콘솔창을 애용했던 프로젝트!
미리 변수로 유효클릭을 체크하고 있어서 무효클릭 처리하기가 편했고
start 변수를 사용하여, id값 비교 중에 동작하지 않도록 하는 방법은
예전에 원페이지 스크롤만들때 썼었는데 여기서도 꽤 유용하게 사용했음