자바스크립트 : 게임 효과 : 메모리 게임

자바스크립트 : 게임 효과 : 메모리 게임

이번에는 같은 그림 찾기 메모리 게임을 만들어 보도록 하겠습니다.

---

0. HTML

HTML 소스는 아래를 참고해 주세요.

HTML 소스 보기

<div class="memory__wrap">
  <div class="memory__inner"><span class="memory-close"></span>
    <div class="memory__main">
      <h3>Memory Game</h3>
      <p class="memory__start">START</p>
    </div>
    <div class="memory__card">
      <h3>Memory Game</h3>
      <div class="memory__card__info">
        <p>점수 : <span class="memory__card__score">0</span> / 16</p>
        <p>남은 기회 : <span class="memory__card__opp">3</span></p>
      </div>
      <ul class="cards">
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-1.svg" alt="img1" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-2.svg" alt="img2" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-3.svg" alt="img3" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-4.svg" alt="img4" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-5.svg" alt="img5" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-6.svg" alt="img6" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-7.svg" alt="img7" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-8.svg" alt="img8" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-1.svg" alt="img1" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-2.svg" alt="img2" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-3.svg" alt="img3" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-4.svg" alt="img4" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-5.svg" alt="img5" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-6.svg" alt="img6" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-7.svg" alt="img7" />
          </div>
        </li>
        <li>
          <div class="view front">
            <img src="../assets/img/card.png" alt="card__front" />
          </div>
          <div class="view back">
            <img src="../assets/img/memory-8.svg" alt="img8" />
          </div>
        </li>
      </ul>
      <!-- memory__card -->
    </div>
    <div class="memoryGameRestart">다시하기</div>
  </div>
</div>

1. 선택자 작업하기

const memoryWrap = document.querySelector(".memory__wrap");
const memoryCard = memoryWrap.querySelectorAll(".cards li");

let cardOne, cardTwo; // 뒤집는 카드
let disableDeck = false;
let matchedCard = 0; // 점수
let endCardGame = 3; // 기회

let sound = [
  "../assets/audio/search_good.m4a",
  "../assets/audio/search_bad.m4a",
  "../assets/audio/up.mp3",
  "../assets/audio/over.mp3",
  "../assets/audio/gamebg.mp3"
];
let soundMatch = new Audio(sound[0]);  // 정답 사운드
let soundUnMatch = new Audio(sound[1]);  // 오답 사운드
let soundSuccess = new Audio(sound[2]);  // 승리 사운드
let memoryGameOver = new Audio(sound[3]);  // 패배 사운드
let memoryGameBg = new Audio(sound[4]);  // 배경음악

HTML과 CSS로 디자인 작업을 마쳤다면, 선택자를 만들어 줍니다.

2. 카드를 뒤집었을 때의 함수 작업하기

function flipCard(e) {
  let clickedCard = e.target;

  // && !disableDeck : 뒤집힌 카드가 오답일 때, 흔들릴 때 다른 카드 누르는 것 방지
  if (clickedCard !== cardOne && !disableDeck) {
    clickedCard.classList.add("flip");

    if (!cardOne) {
      return (cardOne = clickedCard);
    }
    cardTwo = clickedCard;
    disableDeck = true;

    let cardOneImg = cardOne.querySelector(".back img").src;
    let cardTwoImg = cardTwo.querySelector(".back img").src;

    matchCards(cardOneImg, cardTwoImg);
  }
}

memoryCard.forEach((card) => {
    card.addEventListener("click", flipCard);
  });

target은 함수 안에서 이벤트가 발생한 대상을 가리킵니다. flip 클래스가 추가되면, 사전에 작업한 카드 뒤집기 애니메이션이 작동하여 카드의 앞면이 보이게 됩니다.
이 게임에서는 한 턴에 카드를 두 장씩 뒤집기 때문에, if문을 사용하여 첫 번째 클릭된 카드는 cardOne, 두 번째 클릭된 카드는 cardTwo로 구분해 주었습니다.
다음은 구분한 카드들의 img 주소를 확인하여 이미지 일치 여부를 확인할 수 있는 matchCards 함수를 만들어 보겠습니다.

3. 두 개의 카드를 비교하는 함수 작업하기

function matchCards(img1, img2) {
  if (img1 == img2) {  // 일치하는 경우
    matchedCard++;
    matchedCard++;
    soundMatch.play();
    document.querySelector(".memory__card__score").innerHTML = matchedCard;

    cardOne.removeEventListener("click", flipCard);
    cardTwo.removeEventListener("click", flipCard);
    cardOne = cardTwo = "";
    disableDeck = false;

    if (matchedCard == 16) {
      soundSuccess.play();
      memoryGameBg.pause();
      setTimeout(() => {
        document.querySelector(".memoryGameRestart").style.transform = "scale(1)";
      }, 3000);
    }
  }

img1, img2는 앞서 flipCard() 함수 내에서 매개변수로 전송한 이미지 주소를 의미합니다.
먼저 img1 == img2, 즉 두 개의 이미지가 일치할 때에는, 점수를 추가해 주고, 정답 사운드를 재생시킵니다. 성공한 카드는 다시 뒤집어지지 않도록 removeEventListener를 사용하여 앞서 작업했던 클릭 이벤트를 제거해 주었습니다.
또, 이 게임에서 승리할 수 있는 점수는 16점이므로, 점수가 16점에 다다르면 승리 사운드가 재생되고, 게임을 다시 시작할 수 있는 버튼이 나타나도록 작업해 주었습니다.

  else {  // 일치하지 않는 경우
    soundUnMatch.play();
    setTimeout(() => {
      cardOne.classList.add("shakeX");
      cardTwo.classList.add("shakeX");
    }, 400);

    setTimeout(() => {
      cardOne.classList.remove("shakeX", "flip");
      cardTwo.classList.remove("shakeX", "flip");
      cardOne = cardTwo = "";
      disableDeck = false;
    }, 1000);
    endCardGame--;
    document.querySelector(".memory__card__opp").innerHTML = endCardGame;
    if (endCardGame == 0) {
      setTimeout(() => {
        memoryGameOver.play();
        memoryGameBg.pause();
        memoryCard.forEach((card) => {
          card.classList.add("flip");
          card.removeEventListener("click", flipCard);
        });
      }, 1000);
      setTimeout(() => {
        document.querySelector(".memoryGameRestart").style.transform = "scale(1)";
      }, 4000);
    }
  }
}

이미지가 일치하지 않는 경우에는 오답 사운드를 재생시키고, 오답 카드들이 좌우로 흔들리는 애니메이션이 나타났다가, 다시 뒤집어지게끔 작업해 주었습니다.
또, 이 게임은 3회 오답을 제시한 경우, 게임이 종료됩니다. 게임 오버가 되었을 때는 게임 오버 사운드가 재생되고, 모든 카드들의 앞면을 보여주고, 다시하기 버튼이 나타나도록 작업해 주었습니다.

4. 카드 섞기 함수 작업하기

function shuffledCard() {
  cardOne = cardTwo = "";
  disableDeck = false;
  matchedCard = 0;

  let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];
  let result = arr.sort(() => (Math.random() > 0.5 ? 1 : -1));

  memoryCard.forEach((card, index) => {
    card.classList.remove("flip");

    setTimeout(() => {
      card.classList.add("flip");
    }, 200 * index);

    setTimeout(() => {
      card.classList.remove("flip");
    }, 4000);

    let imgTag = card.querySelector(".back img");
    imgTag.src = `../assets/img/memory-${arr[index]}.svg`;
  });
}

각각의 카드들이 항상 같은 자리에 있다면 게임이 너무 쉬워지기 때문에, 게임을 시작하기 전 카드를 섞는 과정이 필요합니다. 카드의 총 개수에 해당하는 길이를 가진 배열을 만들고, Math.random() 메서드를 사용하여 카드들을 랜덤으로 재배치해 주면 메모리 게임 완성입니다.

---

결과

세 번째 분홍색 폴더를 클릭하면 메모리 게임을 시작할 수 있습니다. 디자인에 대한 태클은 받지 않겠습니다.

원본 소스 보기 원본 사이트 보기