[js] 자바스크립트로 카드 뒤집기 게임 구현하기(카드 세팅 ver.1)

카드뒤집기 게임

 

자바스크립트를 이용하여,
카드 뒤집기 게임을 구현하는 예제(ver.1)입니다.

- 카드 세팅 -

 

예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다.

구현 내용

1	카드 세팅	총 14개의 카드(7개씩 2쌍)
2	css 스타일링 설정	카드의 앞과 뒤를 tranform을 사용하여 뒤집는 효과
3	클릭하여 카드 뒤집기	toggle 메서드 이용하여 flipped 클래스명 toggling
4	카드 뒷면 색깔 랜덤 설정	피셔 예이츠 방식을 이용하여 7가지 색깔 섞은 후 설정

 

구현 화면(카드 앞면/뒷면)

카드 앞면 / 뒷면

 

html 코드 - 없음

자바스크립트로 구현하려는 것을 미리 주석으로 html으로 짜봅니다.

<!--<div class="card">
  <div class="card-inner">
    <div class="card-front">
    앞
    </div>
    <div class="card-back">
    뒤
    </div>
  </div>
</div>-->

 

css 코드

.card {
        display: inline-block;
        width: 70px;
        height: 100px;
        margin-right: 40px;
        margin-bottom: 20px;
        margin-top: 20px;
        perspective: 140px;
    }

    .card-inner {
        /* position: absolute를 이용하여 카드 앞뒤를 곂쳐지게 함*/
        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 {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border: 1px solid #828282;
    }

    .card-front {
        background: navy;
    }

    .card-back {
        transform: rotateY(180deg);
    }

 

script 코드

const x = 4;
const y = 3;
//카드 뒤 색깔 7개 2개씩 미리 설정
const backColor = ['#FFC312', '#FFC312', '#C4E538',
  '#C4E538', '#12CBC4', '#12CBC4', '#ED4C67', '#ED4C67',
  '#FDA7DF', '#FDA7DF', '#833471', '#833471'
]

//위의 색깔 랜덤 섞기 - 피셔 예이츠 방식
let chosenColor = [];

while (backColor.length > 0) {
  let color = Math.floor(Math.random() * backColor.length); //0-13까지 정수
  let mixedColor = backColor.splice(color, 1)[0];
  chosenColor.push(mixedColor);
}
console.log(chosenColor);

function cardSetting(x, y) {
  //카드 세팅-html에 미리 짜놓은 것을 그대로 화면에 구현
  for (let i = 0; i < x * y; 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';
    cardBack.style.backgroundColor = chosenColor[i];
    cardInner.appendChild(cardFront);
    cardInner.appendChild(cardBack);
    card.appendChild(cardInner);
    document.body.appendChild(card);

    //클릭하여 카드 뒤집기
    card.addEventListener('click', function() {
      card.classList.toggle('flipped');
    });
  }
}

cardSetting(x, y);

 

화면 결과