카드 짝 맞추기 게임 | ZeroCho

🃏 JavaScript  |  카드 짝 맞추기 게임

 

1. 카드 뒤집기 구현

 

1-1) 뒤집기 효과를 낼 수 있는 css는 구글링해서 적용시켰다.

 

CSSlick.com » 카드 뒤집기 효과(card flip effect)

 

 

1-2) 반복문을 돌려서 가로*세로 만큼 카드를 세팅하고, 카드 클릭시 뒤집는 기능 구현

 

let 가로 = 3;
let 세로 = 4;

function 카드세팅(가로,세로){
    for(let i=0; i <가로*세로; i++){
        const card = document.createElement("div");
        card.className = "card"
        const cardInner = document.createElement("div");
        cardInner.className = "card-inner"
        const cardFront = document.createElement("div");
        cardFront.className = "card-front"
        const cardBack = document.createElement("div");
        cardBack.className = "card-back"
        card.appendChild(cardInner);
        cardInner.appendChild(cardFront);
        cardInner.appendChild(cardBack);
        document.body.appendChild(card);
        (function(c){
            c.addEventListener("click",function(){
                c.classList.toggle("flipped");
            });        
        })(card);
    }
};
카드세팅(가로,세로);

 

- 반복문 내부의 비동기함수로 인해 클로저 문제가 생겼다

-> 즉시실행함수로 클로저문제 해결.

 

 

2. 색상 랜덤 넣기

 

let 색상 = ["red","yellow","green","orange","blue","pink","red","yellow","green","orange","blue","pink"];
let 랜덤색상 = [];

//색상 랜덤 넣기
for(let i=0; 색상.length > 0; i++){
    랜덤색상 = 랜덤색상.concat(색상.splice(Math.floor(Math.random()*색상.length),1));
};

 

- 사용 : 로또 게임 - 랜덤으로 숫자 뽑을 때 처럼 Math.random사용, 

  지뢰 찾기 게임 - 주변 지뢰 찾기 처럼 concat 사용

 

 

3. delay를 줘서 카드 한장씩 뒤집는 효과내기 -> 전부 뒤집어지기

 

//카드 하나씩 뒤집기
document.querySelectorAll(".card").forEach(function(card, index){
    setTimeout(() => {
        card.classList.add("flipped");
    }, 1000 + 100*index);
})

 

- foreach문 돌려서 요소마다 전부 flipped class넣기

 

//전부 뒤집기
setTimeout(()=>{
    document.querySelectorAll(".card").forEach(function(card){
        card.classList.remove("flipped");
    });
    클릭플래그 = true;
},3000);

 

 

 

4. 플래그변수 사용

 

  (function(c){
      c.addEventListener("click",function(){
          if(클릭플래그 && !완성카드.includes(c)){
              c.classList.toggle("flipped");
              클릭카드.push(c);
              if(클릭카드.length === 2){
                  if(클릭카드[0].querySelector(".card-back").style.backgroundColor === 클릭카드[1].querySelector(".card-back").style.backgroundColor){
                      완성카드.push(클릭카드[0],클릭카드[1]);
                      클릭카드 = [];
                      if(완성카드.length === 12){
                          끝시간 = new Date();
                          wrapper.classList.add("gameSet");
                          const desc = document.createElement("p");
                          document.body.appendChild(desc);
                          desc.innerHTML = "(끝시간 - 시작시간)/1000"
                      }
                  }else{
                      setTimeout(() => {
                          클릭카드[0].classList.remove("flipped");
                          클릭카드[1].classList.remove("flipped");
                          클릭플래그 = true;
                          클릭카드 = [];    
                      }, 500);
                  }
              }
          }
      });
  })(card);

 

지뢰 찾기 게임 - 플래그 변수 사용해서 true, false로 클릭 사용 가능여부를 구분

 

---

Array.prototype.includes( ) - 배열이 특정 요소를 포함하는지 판별한다. true, false

 

---

 

+ ) 반응속도 테스트에서 시간체크 함수를 사용했었는데, 이를 응용해서 이번 게임에서도 카드 맞추기 시간체크 기능을 넣어보았다.

 

💬 우선 나는 flipped되는 카드의 length가 2개가 되면 해당 카드의 자식요소를 찾아 backgroundColor를 비교하는 방법으로 작성하려했는데, 강의에서는 완성카드와 클릭카드를 빈배열로 만들어서 push하는 방법으로 접근했다. 후자의 방법은 생각을 못했는데 새로운 접근이었던 것 같다. 물론 내 방법대로 코드를 작성해도 게임은 돌아가겠지만 빈배열로 만드는 것이 확실히 프로그래밍적인 사고인 것 같다. 아직 갈 길이 너무 멀다..