gameEffect02

게임이펙트-메모리게임

메모리게임 만들기

원본 소스 보기

원본 사이트

---

html

앞에 보일 이미지와 뒤에 보일 이미지를 넣어줍니다.

코드보기

<div class="memory__wrap">
    <div class="memory__inner">
        <div class="memory__card">
            <ul class="cards">
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-1.svg" alt="Wolf">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="Face">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-2.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-3.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-4.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-5.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-6.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-7.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-8.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-1.svg" alt="Wolf">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="Face">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-2.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-3.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-4.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-5.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-6.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-7.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
                <li>
                    <div class="view back">
                        <img src="../assets/img/img-8.svg" alt="">
                    </div>
                    <div class="view front">
                        <img src="../assets/img/Face with tongue.svg" alt="">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

js01

선택자, 함수 생성

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

let cardOne, cardTwo;
let disableDeck = false;
let matchedCard = 0;

let sound = [
"../assets/audio/match.mp3",
"../assets/audio/unmatch.mp3",
"../assets/audio/success.mp3",
];
let soundMatch = new Audio(sound[0]);
let soundUnMatch = new Audio(sound[1]);
let soundSuccess = new Audio(sound[2]);

js02

카드를 뒤집었을때의 함수입니다. !disableDeck은 선택한 카드와 앞서 선택한 카드가 다른 경우, 다른 카드를 선택하는 것을 막아줍니다. matchCards함수로 첫번째와 두번째가 같은지 확인하도록 만들어줄 것입니다. 선택하면 flip이 붙어서 뒤집힘이 발생할 것입니다.

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

  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);
  }
}

js03

img1 == img2 이미지 경로의 명이 같은 경우에 동일한 카드 두개가 맞아들었음이 증가합니다. 일치 할 경우와 그렇지 않을 경우의 이벤트를 만듭니다.

function matchCards(img1, img2) {
  if (img1 == img2) {
    //같을 경우
    matchedCard++;

    if (matchedCard == 8) {
      alert("게임 오버");
    }
    cardOne.removeEventListener("click", flipCard);
    cardTwo.removeEventListener("click", flipCard);
    cardOne = cardTwo = "";
    disableDeck = false;

    soundMatch.play();
  } else {
    //일치하지 않는 경우(틀린 음악, 이미지 좌우로 흔들림)
    setTimeout(() => {
      cardOne.classList.add("shakeX");
      cardTwo.classList.add("shakeX");
    }, 500);

    setTimeout(() => {
      cardOne.classList.remove("shakeX");
      cardTwo.classList.remove("shakeX");
      cardOne.classList.remove("flip");
      cardTwo.classList.remove("flip");
      cardOne = cardTwo = "";
      disableDeck = false;
    }, 1600);

    soundUnMatch.play();
  }
}

js04

카드를 섞어줍니다. 이미지의 이름을 이용하여 섞어 랜덤으로 섞습니다.

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));

  memoryCards.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/img-${arr[index]}.svg`;
  });
}
shuffledCard();

// 카드 클릭
memoryCards.forEach((card) => {
  card.addEventListener("click", flipCard);
});