TIL.14 Javascript_카드 맞추기 게임

JS. 카드 맞추기 게임

유튜버 제로초 님의 동영상 강의를 기반으로 작성한 코드이다.

또한, html에는 최소한의 내용만 사용하였으며

JS 코드를 이용해 html 파일에 태그를 삽입 및 수정하는 작업을 대신하였다.

 

먼저, 짝맞추기.JS 이다.

var 가로 = 4;

var 세로 = 3;

var 색깔후보 = ['red', 'red', 'orange','orange','green','green','yellow','yellow','white','white','pink','pink'];

// 6종류의 총 12개 색을 필요로한다.

var 색깔 = [];

var 클릭플래그 = true;

// 함수가 동작하는 중의 마우스클릭을 제한하기 위한 클릭플래그를 사용한다.

var 클릭카드 = [];

var 완성카드 = [];

 

for (var i = 0; 색깔후보.length > 0; i +=1) {

    색깔 = 색깔.concat(색깔후보.splice(Math.floor(Math.random() * 색깔후보.length), 1));

}

console.log(색깔);

// 총 12개의 색을 랜덤하게 뽑아오는 함수로 concat (== 다수의 배열을 합치고 병합된 배열의 사본을 반환) 을 이용

// card-back의 배경컬러로 설정할것이며, 즉 카드 뒷면의 색을 랜덤하게 지정해주기 위함이다.

var Title = document.createElement( 'h1' );

var Text = document.createTextNode( '카드 맞추기 게임' );

Title.appendChild( Text );

document.body.appendChild( Title );

// h1 태그와 텍스트를 삽입하기 위한 코드이다.

 

function 카드세팅(가로, 세로) {

    클릭플래그 = false;

---

    for (var i = 0; i< 가로 * 세로; i += 1){

        var card = document.createElement('div');

        card.className = 'card';

        var cardInner = document.createElement('div');

        cardInner.className = 'card-inner';

        var cardFront = document.createElement('div');

        cardFront.className = 'card-front';

        var cardBack = document.createElement('div');

        cardBack.className = 'card-back';

        cardBack.style.backgroundColor = 색깔[i];

        cardInner.appendChild(cardFront);

        cardInner.appendChild(cardBack);

        card.appendChild(cardInner);

// 위의 코드들로 이용해 카드 맞추기에 필요한 '카드'를 하나 만들었다.

// 여기서 for 문을 통해 총 12개의(4x3)의 카드를 만든다.

// 여기서 CSS의 transition, transform , absolute를 이용하여 클릭이벤트를 걸어줘

// 카드를 클릭하였을때 뒤짚는 효과를 구현한다.

//appendChild로 cardInner 안에 cardFront, cardBack을 넣어준 후  card 안에 cardInner 를 다시 넣어주는데

// 이는 아래 이미지 표와 같은 의미이다.

// 즉 div class 중에서 card (부모) -> card-inner(자식) -> card-front, back(자식) 하위 개념으로 들어간다.

---

        (function (c) { // 아래 붉게 칠한것은 즉시 실행 함수이다.

// 즉시 실행 함수 넣어주는 이유는 클릭이라는 이벤트는 비동기성으로 상단의 카드 갯수를 반복하는 for문과 만나면

클로저 문제가 발생하는데 이를 해결하기 위한 방법 중 하나가 즉시 실행 함수를 포함시키는 것이라고 한다.

---

        (function (c) { 

           card.addEventListener('click', function () {

                if (클릭플래그 && !완성카드.includes(c)) { // 클랙플래그가 true 고 완성카드가 아닐때만 클릭 가능

                    c.classList.toggle('flipped');

                    클릭카드.push(c); // 즉시 실행 함수 c

                    if (클릭카드.length === 2) {

                        if (클릭카드[0].querySelector('.card-back').style.backgroundColor === 클릭카드[1].querySelector('.card-back').style.backgroundColor) {    //0, 1 클릭 하였을때 두가지 색이 같다면 아래 명령문실행

                            완성카드.push(클릭카드[0]);

                            완성카드.push(클릭카드[1]);

                            클릭카드 = [];  // 클릭카드 0 1 이 색이 같다면 완성카드 배열에 삽입 후 클릭카드를 다시 비워줌

                                                // 다시 채우기 위해서

                            if (완성카드.length === 12) { // 12개 카드를 다 뒤집었을경우 축하합니다 창 실행

                                alert('축하합니다');

                            }

                        } else { // 클린한 두 카드의 색이 다르다면 클릭카드 0 1 플립 삭제 후, 클리카드 초기화

                            클릭플래그 = false;

                            setTimeout(function () {

                                클릭카드[0].classList.remove('flipped');

                                클릭카드[1].classList.remove('flipped');

                                클릭플래그 = true;

                                클릭카드 = [];                                

                            }, 1000); // 2개의 색이 다를 경우이며, 약 1000(1초) 후 뒤짚음(toggle효과 flipped 제거)

                        }

                    }

                }  // 클릭 플래그가 true 일때만 클릭이 가능하도록 현재 false로 클릭불가

            });

        })(card);

        document.body.appendChild(card);

    }  

---

    document.querySelectorAll('.card').forEach(function(card, index) {

        setTimeout(function () {

            card.classList.add('flipped');

        }, 1000 + 100 * index);

        // 시간차를 두고 카드를 순차적으로 보여줌 (settimeout설정을 이용)      

        // 처음부터 카드가 다 열려 있게해주는 코드 

    });

   

---

    setTimeout(function () {

        document.querySelectorAll('.card').forEach(function (card, index) {

            card.classList.remove('flipped');

        });

        클릭플래그 = true; // 뒷면 색이 모두 패치되어 전부 보여준 후 닫아 버린 다음에 클릭 가능

    }, 5000);

    // 모든 카드를 5000(5초) 정도 보여주고 다시 다 front상태로 (뒤집어주는 코드)

    // 추가로 여기서 클릭플래그 를 이용하여 카드가 보여지는 와중에 클릭 불가능

 

카드세팅(가로, 세로); // 위의 카드세팅 함수 실행

---

짝맞추기.html

0.00MB

짝맞추기.js

0.00MB

HTML

CSS (in HTML)

Javascript

출처 (유튜브 : 제로초 tv)

www.youtube.com/channel/UCp-vBtwvBmDiGqjvLjChaJw

ZeroCho TV