[자바스크립트] ✨ 카드 짝 맞추기 게임 만들기 제1탄 ✨ (피셔 에이츠 셔플 알고리즘)

 
같은색깔 카드 맞추기
메모리 게임이라고도 하고 ㅎㅎㅎ
기억력 카드게임이라고도 하는데....
색상만 넣으면 심심하니까
과일이모지도 함 같이 넣어보겠습니다 
 
자바 스크립트 연습 겸 시간 날 때 해 보자 ㅋㅋㅋㅋ
❌노가다 방지 협회 ❌
카드는 12장(6쌍)만 만들자
 

1. 순서도

draw.io로 작성했고, svg 파일로 내보내기 함.
PNG나 JPEG는 해상도 설정 안하면 깨지니 주의
 
 
 
 

 

---

 

2. 셔플 후 카드 생성하기

 
자바스크립트가 아닌, CSS로 뒤집기를 해 줄것입니다....
 

2-1. CSS

클래스이름	역할	CSS
card	카드 전체를 감싸는 컨테이너	카드 크기, 3D 시점 설정
card-inner	카드 요소 안에서 카드 앞,뒷면 감싸는 내부 컨테이너	카드 뒤집을 때 transform: rotateY() 회전축
card-front	카드 앞면(뒤집히기 전)	남색 그라데이션 적용 backface-visibility: hidden; 적용
card-back	카드 뒷면(뒤집힌 후)	12가지 색상 입혀줄 것

 

.card {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 70px;
    height: 100px;
    perspective: 500px; /* 3D 효과를 위한 시점 설정 */
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px; /* 부드러운 둥근 모서리 */
    border: 2px solid rgba(0, 0, 0, 0.1); /* 연한 테두리 */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.1); 
    /* 부드럽고 입체적인 그림자 */
}

/* 카드 앞면 */
.card-front {
    background: linear-gradient(45deg, #001f3d, #003366); /* 남색 계열 그라데이션 */
}

/* 카드 뒷면 (과일 이모지와 함께 파스텔톤 배경) */
.card-back {
    transform: rotateY(180deg); /* 카드 뒷면을 180도로 회전 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem; /* 이모지 크기 조정 */
    color: #fff; /* 이모지 색상 */
    text-align: center;
}

 

---

2-2. 카드 셔플 함수 shuffle() 만들기

colors 배열에는 6개의 색상을 넣고, concat() 메서드로 두 번 합쳐서 colorCopy를 만들어 준다.
각 색상마다 2번씩 총 12번 색상이 카드에 들어가도록 해 준다. 
 
카드를 생성하기 전에, 먼저 카드를 랜덤으로 셔플 해 줄 것인데 여기서는 Fisher-Yates Shuffle 알고리즘을 사용해 주었다. 

<!-- 카드를 감싸는 컨테이너 -->
<div id="wrapper"></div>
<script>
	/* 카드의 부모 요소 wrapper 선택 */
    const $wrapper = document.querySelector('#wrapper');

    const total = 12; // 총 카드 수
    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; // 색상 배열
    const fruits = ['🍎', '🍌', '🍈', '🍊', '🍇', '🍉']; // 과일 이모지 배열
    const fruitColors = {
        '🍎': '#ffb3b3', // 연한 빨간색
        '🍌': '#fef6a2', // 연한 노란색
        '🍈': '#c9f9c5', // 연한 초록색
        '🍊': '#ffd9a2', // 연한 주황색
        '🍇': '#d8a2f7', // 연한 보라색
        '🍉': '#ffb5d1'  // 연한 핑크색
    };

    // 카드 색상 배열에는 6개의 색상이 들어감, 각 색상이 2번씩 반복되어야 함
    let colorCopy = colors.concat(colors);
    let shuffledColors = [];

    // 카드 뒷면에 과일 이모지를 배열과 동일하게 배치
    let fruitCopy = fruits.concat(fruits);
    let shuffledFruits = [];

    // 카드 배열을 랜덤으로 셔플하는 함수
    function shuffle() {
        // Fisher-Yates Shuffle 함수 사용
        for (let i = 0; colorCopy.length > 0; i++) {
            const randomIndex = Math.floor(Math.random() * colorCopy.length);
            shuffledColors = shuffledColors.concat(colorCopy.splice(randomIndex, 1));

            const randomFruitIndex = Math.floor(Math.random() * fruitCopy.length);
            shuffledFruits = shuffledFruits.concat(fruitCopy.splice(randomFruitIndex, 1));
        }
    }
</script>

 
 
자바스크립트에서는 랜덤 정렬을 두 가지 방법으로 구현 할 수 있다.  sort()메서드를 이용하는 방법과, Fisher-Yates Shuffle(피셔 에이츠 셔플) 알고리즘을 쓰는 방법이다.  하지만 sort() 메서드는 가급적 사용하지 않는 것이 좋은데 그 이유는 모든 순열의 빈도수가 균일하게 나오지 않기 때문이다. 왜 그런지는 아래 사이트에서 잘 설명되어 있으니까 참고 바람.
 
https://ko.javascript.info/task/shuffle

배열 요소 무작위로 섞기

 

---

2-3. 카드 생성하는 함수 createCard(i) 만들기

 
카드마다 계층구조를 설정하면서 카드를 생성 해 주는 createCard 함수를 만들어준다.
 
document.createElement('div')로 div 요소를 생성하고 card 라는 클래스 이름을 부여해준다.
카드 전체(card)와 마찬가지로 내부(inner), 앞면(front), 뒷면(back) 도 같은 방법으로 생성해 준다.

이후, appendChild()로 요소들을 계층구조로 추가해주는 작업을 한다. cardInner에 cardFront와 cardBack을 자식 요소로 추가해 줌.
cardInner를 다시 부모인 card 밑에 추가
 
나는 과일 색상이랑 같은 색으로 카드 배경색을 지정 해 줄 것이기 때문에 cardBack.style.backgroundColor
를 shuffledFruits[i]에 해당하는 색상으로 맞추어 카드 뒷면의 배경색을 설정해 주었다.
 

<script>
    function createCard(i) {
        const card = document.createElement('div');
        card.className = 'card'; // .card 태그 생성
        const cardInner = document.createElement('div');
        cardInner.className = 'card-inner'; // .card-inner 태그 생성
        const cardFront = document.createElement('div');
        cardFront.className = 'card-front'; // .card-front 태그 생성
        const cardBack = document.createElement('div');
        cardBack.className = 'card-back'; // .card-back 태그 생성
        cardBack.textContent = shuffledFruits[i]; // 과일 이모지 넣기

        // 카드 색상 설정
        cardBack.style.backgroundColor = fruitColors[shuffledFruits[i]]; 
        // 과일 색상에 맞는 배경색 설정

        cardInner.appendChild(cardFront);
        cardInner.appendChild(cardBack);
        card.appendChild(cardInner);
        return card;
    }
</script>

 

---

2-4. 게임 시작하는  함수 startGame() 만들기

게임을 새로 시작할 때마다 셔플 메서드를 호출해서 카드를 무작위로 섞어 주고, 재배열 시켜주기

<script>
    function startGame() {
        shuffle();
        for (let i = 0; i < total; i += 1) {
            const card = createCard(i);
            $wrapper.appendChild(card);
        }
    }
    startGame();
</script>

 

---

2-5. 여기까지 전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Flip Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
    
        #wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }
    
        .card {
            display: inline-block;
            margin-right: 20px;
            margin-bottom: 20px;
            width: 70px;
            height: 100px;
            perspective: 500px; /* 3D 효과를 위한 시점 설정 */
        }
    
        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
    
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 12px; /* 부드럽고 더 세련된 둥근 모서리 */
            border: 2px solid rgba(0, 0, 0, 0.1); /* 연한 테두리 */
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.1); /* 부드럽고 입체적인 그림자 */
        }
    
        /* 카드 앞면 */
        .card-front {
            background: linear-gradient(45deg, #001f3d, #003366); /* 남색 계열 그라데이션 */
        }
    
        /* 카드 뒷면 (과일 이모지와 함께 파스텔톤 배경) */
        .card-back {
            transform: rotateY(180deg); /* 카드 뒷면을 180도로 회전 */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem; /* 이모지 크기 조정 */
            color: #fff; /* 이모지 색상 */
            text-align: center;
        }
    
        /* 과일 파스텔톤 배경 색상 */
        .card-back.apple { background-color: #ffb3b3; }  /* 사과 (연한 빨강) */
        .card-back.banana { background-color: #fef6a2; } /* 바나나 (연한 노랑) */
        .card-back.lime { background-color: #c9f9c5; }   /* 라임 (연한 초록) */
        .card-back.orange { background-color: #ffd9a2; } /* 오렌지 (연한 오렌지) */
        .card-back.grape { background-color: #d8a2f7; }  /* 포도 (연한 보라) */
        .card-back.watermelon { background-color: #ffb5d1; } /* 수박 (연한 핑크) */
    
        /* 카드 뒤집기 효과 */
        .card:hover .card-inner {
            transform: rotateY(180deg); /* hover 시 카드가 뒤집히도록 회전 */
        }
    </style>    
</head>
<body>
    <div id="wrapper"></div>

    <script>
        const $wrapper = document.querySelector('#wrapper');

        const total = 12; // 총 카드 수
        const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; // 색상 배열
        const fruits = ['🍎', '🍌', '🍈', '🍊', '🍇', '🍉']; // 과일 이모지 배열
        const fruitColors = {
            '🍎': '#ffb3b3', // 연한 빨간색
            '🍌': '#fef6a2', // 연한 노란색
            '🍈': '#c9f9c5', // 연한 초록색
            '🍊': '#ffd9a2', // 연한 주황색
            '🍇': '#d8a2f7', // 연한 보라색
            '🍉': '#ffb5d1'  // 연한 핑크색
        };

        // 카드 색상 배열에는 6개의 색상이 들어감, 각 색상이 2번씩 반복되어야 함
        let colorCopy = colors.concat(colors);
        let shuffledColors = [];

        // 카드 뒷면에 과일 이모지를 배열과 동일하게 배치
        let fruitCopy = fruits.concat(fruits);
        let shuffledFruits = [];

        // 카드 배열을 랜덤으로 셔플하는 함수
        function shuffle() {
            // Fisher-Yates Shuffle 함수 사용
            for (let i = 0; colorCopy.length > 0; i++) {
                const randomIndex = Math.floor(Math.random() * colorCopy.length);
                shuffledColors = shuffledColors.concat(colorCopy.splice(randomIndex, 1));

                const randomFruitIndex = Math.floor(Math.random() * fruitCopy.length);
                shuffledFruits = shuffledFruits.concat(fruitCopy.splice(randomFruitIndex, 1));
            }
        }

        // 카드 생성 함수
        function createCard(i) {
            const card = document.createElement('div');
            card.className = 'card'; // .card 태그 생성
            const cardInner = document.createElement('div');
            cardInner.className = 'card-inner'; // .card-inner 태그 생성
            const cardFront = document.createElement('div');
            cardFront.className = 'card-front'; // .card-front 태그 생성
            const cardBack = document.createElement('div');
            cardBack.className = 'card-back'; // .card-back 태그 생성
            cardBack.textContent = shuffledFruits[i]; // 과일 이모지 넣기

            // 카드 색상 설정
            cardBack.style.backgroundColor = fruitColors[shuffledFruits[i]]; // 과일 색상에 맞는 배경색 설정

            cardInner.appendChild(cardFront);
            cardInner.appendChild(cardBack);
            card.appendChild(cardInner);
            return card;
        }

        // 게임 시작 함수
        function startGame() {
            shuffle();
            for (let i = 0; i < total; i++) {
                const card = createCard(i);
                $wrapper.appendChild(card);
            }
        }

        startGame();
    </script>
</body>
</html>

---

 

 

 

여기까지 했을 때 라이브서버에 이 상태가 되면 성공~
그 뒤부터는 귀찮아서 내일 포스팅 to be continue
 
wrapper에 flex나 grid 주지 않았기 때문에
실행해보면 카드가 한 줄로 붙어 있는 것도 정상이다
창 크기 줄이면 카드가 다음줄로 넘어감...