200922__JS Flipping card game 정리 (1/2)

🌺Positive Ko🦄💗

해당 페이지 게임 코드 리뷰

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

1. CSS로 카드 뒤집는 것을 구현

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.card.flipped .card-inner {
  transform: rotateY(180deg);
}
.card-front,
.card-back {
  border: 1px solid #585858;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}

http://uxuiz.cafe24.com/wp/archives/1212 : 각각의 css 기능에 대한 설명

2. card setting

let cardWidth = 4;
let cardHeight = 3;
function cardSet(cardWidth, cardHeight) {
  clickFlag = false;
  for (let i = 0; i < cardWidth * cardHeight; i += 1) {
    let card = document.createElement('div');
    card.className = 'card';
    let cardInner = document.createElement('div');
    cardInner.className = 'card-inner';
    let cardFront = document.createElement('div');
    cardFront.className = 'card-front';
    let cardBack = document.createElement('div');
    cardBack.className = 'card-back';
    cardBack.style.backgroundColor = cardColor[i];
    cardInner.appendChild(cardFront);
    cardInner.appendChild(cardBack);
    card.appendChild(cardInner);

각각의 card div 안에 inner이 들어가고 front, back이 병렬적으로 들어가게 했다. 그리고 for문으로 12개의 카드가 생성되도록 했다.

3. 토글 기능으로 클릭 시 카드가 뒤집히도록 설정

(function (c) {
      card.addEventListener('click', function () {
        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 = [];
              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);
              }
            }

eventlistener를 즉시실행함수 function(c)로 감싸서 클로저 문제를 해결한다.