init

annkwon1123 · Jun 6, 2024 · 856855c · 856855c
commit 856855c
Show file tree

Hide file tree

Showing 14 changed files with 261 additions and 0 deletions.
diff --git a/image/0.png b/image/0.png
diff --git a/image/1.png b/image/1.png
diff --git a/image/10.png b/image/10.png
diff --git a/image/2.png b/image/2.png
diff --git a/image/3.png b/image/3.png
diff --git a/image/4.png b/image/4.png
diff --git a/image/5.png b/image/5.png
diff --git a/image/6.png b/image/6.png
diff --git a/image/7.png b/image/7.png
diff --git a/image/8.png b/image/8.png
diff --git a/image/9.png b/image/9.png
diff --git a/memorycard.html b/memorycard.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Memory Card Game</title>
+    <style>
+        .placeholder{ /* 래퍼 */
+            display:grid;
+            grid-template-columns: repeat(var(--row),150px);
+            gap: 20px;
+            perspective: 800px;
+        }
+
+        .placeholder > .card{ /* 카드 뒷면 */
+            background-image: url('./image/0.png');
+            background-position: center;
+            background-size: contain;
+            background-repeat: no-repeat;
+            width: 140px;
+            height: 200px;
+            transform-style: preserve-3d;
+            perspective: 400px;
+            backface-visibility: hidden;
+            transform: rotateY(180deg);
+            text-align: center;
+        }
+        .placeholder > .card::before{ /* 카드 앞면 */
+            background-image: url('./image/`{data-number}`.png');
+            background-position: center;
+            background-size: contain;
+            visibility: hidden;
+            content: "";
+            position: absolute;
+            font-size: 5em;
+            line-height: 1.125;
+            font-weight: bold;
+            top: 50%;
+            transform: rotateY(180deg) translate(50%,-50%);
+            backface-visibility: hidden;
+            background-color: #e8e8e8;
+            color: #444;
+            width: 100%;
+            height: 100%;
+        }
+
+        .placeholder > .card[data-number="1"]::before {
+            background-image: url('./image/1.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="2"]::before {
+            background-image: url('./image/2.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="3"]::before {
+            background-image: url('./image/3.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="4"]::before {
+            background-image: url('./image/4.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="5"]::before {
+            background-image: url('./image/5.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="6"]::before {
+            background-image: url('./image/6.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="7"]::before {
+            background-image: url('./image/7.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="8"]::before {
+            background-image: url('./image/8.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="9"]::before {
+            background-image: url('./image/9.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="10"]::before {
+            background-image: url('./image/10.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder .card.back{ /* 뒷면 표시 */
+            transition: transform .5s;
+            transform: rotateY(0deg);
+        }
+        .placeholder .card.front{ /* 클릭 후 앞면 표시 */
+            display: block;
+            transition: transform .5s;
+            transform: rotateY(180deg);
+        }
+        .placeholder .card.front::before{
+            visibility: visible;
+        }
+        .placeholder .card.matched:before{ /* 매칭된 앞면 배경색 변경 */
+            background-color: #673ab7;
+            color: #fff;
+        }
+        .placeholder > .card.back:hover{ /* 카드 마우스 호버 */
+            transform: scale(1.1);
+            transition: transform 0.1s linear;
+            box-shadow: 1px 4px 15px -3px rgba(0,0,0,0.5);
+        }
+        input[type=button]{
+            padding: 5px 20px;
+            margin: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="placeholder"></div>
+    <input type="button" name="init" value="다시 시작" onclick="doneFinding()">
+    <script src="./memorycard.js"></script>    
+</body>
+</html>
diff --git a/memorycard.js b/memorycard.js
@@ -0,0 +1,115 @@
+let cardCount = 20, row = 5, column = Math.floor(cardCount/5), pair = -1, pairindex = -1 // 카드 개수, 행수, 맞는 짝 카운트용 변수
+let arrDeck = [] // 카드 배열
+
+document.addEventListener('DOMContentLoaded', () => {
+    cardCount = row * column // 가로*세로 개수를 무조건 맞춤
+    document.documentElement.style.setProperty('--row', row)
+
+    // UI 생성
+    for (let i = 0; i < cardCount; i++) {
+        let el = document.createElement('div')
+        el.id = 'card' + i
+        el.classList.add('card')
+        el.classList.add('back')
+        document.querySelector('.placeholder').appendChild(el)
+    }
+
+    // 클릭 이벤트 핸들러
+    document.querySelector('.placeholder').addEventListener('click', (e) => {
+        if (e.target.classList.contains('card') && e.target.classList.contains('back')) {
+            console.log('clicked');
+            e.target.classList.remove('back')
+            e.target.classList.add('front')
+            e.target.style.backgroundImage = `url("./image/${e.target.dataset.number}.png")` // 앞면 이미지 설정
+        }
+    })
+
+    // 애니메이션 완료 핸들러 - 애니메이션 종료 후 매칭 판단
+    document.querySelector('.placeholder').addEventListener('transitionend', (e) => {
+        if (e.target.classList.contains('card')) {
+            console.log('transitionended');
+            if (e.target.classList.contains('front')) {
+                if (pair < 0) {
+                    pair = e.target.dataset.number
+                    pairindex = e.target.dataset.index
+                } else {
+                    if (pair == e.target.dataset.number && pairindex != e.target.dataset.index) {
+                        // 매치됨 - 컬러링
+                        document.querySelectorAll('.placeholder .card.front').forEach((card) => { card.classList.add('matched'); })
+                        pair = -1
+                        pairindex = -1
+                        if (document.querySelector('.placeholder .card:not(.matched)') == null) {
+                            // 완료
+                            console.log('card finding end.')
+                            doneFinding()
+                        }
+                    } else if (pairindex != e.target.dataset.index) {
+                        // 매치안됨 - 페어 리셋
+                        document.querySelectorAll('.placeholder .card.front:not(.matched)').forEach((card) => {
+                            card.classList.remove('front')
+                            card.classList.add('back')
+                            card.style.backgroundImage = 'url("./image/0.png")' // 뒷면 이미지로 재설정
+                        })
+                        pair = -1
+                        pairindex = -1
+                    }
+                }
+            }
+        }
+    })
+
+    // 배열 셔플
+    reShuffle(false)
+    // 정보 초기화
+    initCard()
+})
+
+function initCard() {
+    // 카드에 셔플 숫자 지정
+    for (let i = 0; i < cardCount; i++) {
+        document.querySelectorAll('.placeholder .card').forEach((card, idx) => {
+            card.dataset.number = arrDeck[idx]
+            card.dataset.index = idx
+        })
+    }
+
+    // 초기화 애니메이션
+    let init = window.setInterval(() => {
+        let card = document.querySelector('.placeholder .card:not(.back)')
+        if (card) {
+            card.classList.remove('front')
+            card.classList.remove('matched')
+            card.classList.add('back')
+            card.style.backgroundImage = 'url("./image/0.png")' // 뒷면 이미지로 재설정
+        } else {
+            window.clearInterval(init)
+        }
+    }, 50);
+}
+
+// 배열 셔플 호출용
+function reShuffle(bReInit) {
+    if (!bReInit) {
+        for (let i = 0; i < Math.floor(cardCount / 2); i++) {
+            arrDeck.push(i + 1, i + 1)
+        }
+    }
+    arrDeck = fyShuffler(arrDeck)
+}
+
+// 배열 셔플 메인
+const fyShuffler = (arr) => {
+    for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor((i + 1) * Math.random());
+        [arr[i], arr[j]] = [arr[j], arr[i]]; // 배열 값 교환
+    }
+    return arr
+}
+
+// 다 찾은 후 재 실행 선택
+function doneFinding() {
+    if (confirm('찾기 완료! 데스크에서 상품을 수령해 주세요')) {
+        reShuffle(true)
+        initCard()
+    }
+}
diff --git a/package-lock.json b/package-lock.json