200923__JS Flipping card game 정리 (2/2)

🌺Positive Ko🦄💗

해당 페이지 게임 코드 리뷰입니다.

(참고. 제로초 카드 뒤집기 게임)

지난 글까지 '뒤집히는 기능 CSS 구현 → 카드 세팅 → 클릭 시 뒤집히는 이벤트 구현'까지 되짚어 봤습니다.

4. 카드에 색이 임의로 배정되도록 한다.

let cardColor = [];
let cardColorset = colorPool.slice();
let colorPool = [
  '#A5736A', // brown
  '#A5736A',
  '#FECD56', // yellow
  '#FECD56',
  '#50869B', // blue
  '#50869B',
  '#698D5D', // green
  '#698D5D',
  '#E14B56', // pink
  '#E14B56',
  '#F8A255', // orange
  '#F8A255',
];
function shuffle() {
  for (let i = 0; cardColorset.length > 0; i += 1) {
    cardColor = cardColor.concat(
      cardColorset.splice(Math.floor(Math.random() * cardColorset.length), 1)
    );
  }
}

color pool에 색상 12가지를 짝을 맞추어 넣고. cardColorset에 새로운 배열로 임의 지정되도록 한다. 여기서 주의점은 .slice()를 쓰지 않으면 참조 관계로 인해, colorPool 자체가 바뀐다. 따라서 후에 게임이 끝나고 리셋할 때 온전한 colorPool이 아니기 때문에 카드 색깔이 흰색으로만 나오는 에러가 생긴다.

slice() & splice() :

slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 수정되지 않는다.

splice() 메소드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 이 메소드는 원본 배열 자체를 수정한다.

https://im-developer.tistory.com/103

5. 맨 처음에 카드 세팅이 된 후, 카드의 색깔을 잠시 보여주는 기능

document.querySelectorAll('.card').forEach(function (card, index) {
    setTimeout(() => {
      card.classList.add('flipped');
    }, 1000 + 100 * index);
  });

  setTimeout(() => {
    document.querySelectorAll('.card').forEach(function (card, index) {
      card.classList.remove('flipped');
    });
    clickFlag = true;
    gameStart = new Date();
  }, 5000);

setTimeout()으로 시간 조절. clickFlag boolean값으로 card를 보여주는 시간 동안에는 카드가 클릭되어 뒤집히지 않도록 한다.

6. clicked card 와 matched card를 넣어 같은 색으로 클릭된 카드는 matched로 분류하여 다시 클릭되지 않도록 한다.

let clickedCard = [];
let matchedCard = [];

(function (c) {
      card.addEventListener('click', () => {
        if (clickFlag && !matchedCard.includes(c)) {
          c.classList.toggle('flipped');
          clickedCard.push(c);
          if (clickedCard.length === 2) {
            if (
              clickedCard[0].querySelector('.card-back').style
                .backgroundColor ===
              clickedCard[1].querySelector('.card-back').style.backgroundColor
            ) {
              matchedCard.push(clickedCard[0]);
              matchedCard.push(clickedCard[1]);
              clickedCard = [];
             

includes() : 메서드는 배열이 특정 요소를 포함하고 있는지 판별https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

toggle() : 클래스 네임에 () 요소를 포함하고 있는지 판별하고, 없다면 추가해주고 있다면 제거해준다.

7. 게임 초기화

 if (matchedCard.length === cardWidth * cardHeight) {
                let gameFinish = new Date();
                alert(
                  `Congratulations👏 Time record: ${parseInt(
                    (gameFinish - gameStart) / 1000
                  )} seconds`
                );
                document.querySelector('#gameTable').innerHTML = '';
                cardColorset = colorPool.slice();
                cardColor = [];
                matchedCard = [];
                gameStart = null;
                shuffle();
                cardSet(cardWidth, cardHeight);
              }
            } else {
              clickFlag = false;
              setTimeout(() => {
                clickedCard[0].classList.remove('flipped');
                clickedCard[1].classList.remove('flipped');
                clickFlag = true;
                clickedCard = [];
              }, 1000);
            }
          }
        }
      });
    })(card);

matchedCard.length === cardWidth * cardHeight 이 되면 카드 게임을 초기화 한다.
게임 테이블을 innerHTML로 지워버리고, 모든 요소들을 차례대로 [] 초기화 시킨다.