다중언어 서비스

annkwon1123 · Jun 11, 2024 · 7915d74 · 7915d74
1 parent 6d87893
commit 7915d74
Show file tree

Hide file tree

Showing 24 changed files with 184 additions and 6 deletions.
diff --git a/image/0.png b/image/0.png
diff --git a/image/11.png b/image/11.png
diff --git a/image/12.png b/image/12.png
diff --git a/image/13.png b/image/13.png
diff --git a/image/14.png b/image/14.png
diff --git a/image/15.png b/image/15.png
diff --git a/image/16.png b/image/16.png
diff --git a/image/17.png b/image/17.png
diff --git a/image/18.png b/image/18.png
diff --git a/image/19.png b/image/19.png
diff --git a/image/20.png b/image/20.png
diff --git a/image/21.png b/image/21.png
diff --git a/image/22.png b/image/22.png
diff --git a/image/23.png b/image/23.png
diff --git a/image/24.png b/image/24.png
diff --git a/image/25.png b/image/25.png
diff --git a/image/26.png b/image/26.png
diff --git a/image/27.png b/image/27.png
diff --git a/image/28.png b/image/28.png
diff --git a/image/29.png b/image/29.png
diff --git a/image/30.png b/image/30.png
diff --git a/image/31.png b/image/31.png
diff --git a/index.html b/index.html
@@ -151,6 +151,125 @@
             background-size: 100%;
         }
 
+        .placeholder > .card[data-number="11"]::before {
+            background-image: url('./image/11.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="12"]::before {
+            background-image: url('./image/12.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="13"]::before {
+            background-image: url('./image/13.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="14"]::before {
+            background-image: url('./image/14.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="15"]::before {
+            background-image: url('./image/15.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="16"]::before {
+            background-image: url('./image/16.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="17"]::before {
+            background-image: url('./image/17.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="18"]::before {
+            background-image: url('./image/18.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="19"]::before {
+            background-image: url('./image/19.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="20"]::before {
+            background-image: url('./image/20.png');
+            background-position: center;
+            background-size: 100%;
+        }
+        .placeholder > .card[data-number="21"]::before {
+            background-image: url('./image/21.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="22"]::before {
+            background-image: url('./image/22.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="23"]::before {
+            background-image: url('./image/23.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="24"]::before {
+            background-image: url('./image/24.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="25"]::before {
+            background-image: url('./image/25.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="26"]::before {
+            background-image: url('./image/26.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="27"]::before {
+            background-image: url('./image/27.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="28"]::before {
+            background-image: url('./image/28.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="29"]::before {
+            background-image: url('./image/29.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
+        .placeholder > .card[data-number="30"]::before {
+            background-image: url('./image/30.png');
+            background-position: center;
+            background-size: 100%;
+        }
+
         .placeholder .card.back { /* 뒷면 표시 */
             transition: transform .5s;
             transform: rotateY(0deg);
@@ -178,9 +297,22 @@
         }
 
         input[type=button] {
+            width: 150px;
             padding: 5px 20px;
-            margin: 20px;
+            margin: 10px;
+            background-color: #673ab7;
+            color: #fff;
         }
+
+        .info-text {
+            width: 100%;
+            text-align: center;
+            color: green;
+            font-size: 1.0rem;
+            transform: translateY(-50%);
+            margin: 40px;
+        }
+
     </style>
 </head>
 <body>
@@ -192,7 +324,11 @@
                     <div id="timer-text" class="timer-text">60</div>
                 </div>
             </div>
-            <input type="button" name="init" value="다시 시작" onclick="resetGame()">
+            <div class="info-text">TEAM 사사삭</div>
+            <input type="button" name="init" value=" 다시 시작 " onclick="resetGame()">
+            <input type="button" name="language" value="한국어 KOR" onclick="resetGameAndChangeKorean()">
+            <input type="button" name="language" value="영 어 ENG" onclick="resetGameAndChangeEnglish()">
+            <input type="button" name="language" value="중국어 CHN" onclick="resetGameAndChangeChinese()">
         </div>
     </div>
     <script src="./memorycard.js"></script>    

diff --git a/memorycard.js b/memorycard.js
@@ -1,5 +1,6 @@
 let cardCount = 20, row = 5, column = Math.floor(cardCount/5), pair = -1, pairindex = -1 // 카드 개수, 행수, 맞는 짝 카운트용 변수
 let arrDeck = [] // 카드 배열
+let language = 0 // 0: 한국어, 1: 영어, 2: 중국어
 
 document.addEventListener('DOMContentLoaded', () => {
     cardCount = row * column // 가로*세로 개수를 무조건 맞춤
@@ -8,7 +9,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // UI 생성
     for (let i = 0; i < cardCount; i++) {
         let el = document.createElement('div')
-        el.id = 'card' + i
+        el.id = 'card' + i + (10 * language);
         el.classList.add('card')
         el.classList.add('back')
         document.querySelector('.placeholder').appendChild(el)
@@ -68,7 +69,7 @@ function initCard() {
     // 카드에 셔플 숫자 지정
     for (let i = 0; i < cardCount; i++) {
         document.querySelectorAll('.placeholder .card').forEach((card, idx) => {
-            card.dataset.number = arrDeck[idx]
+            card.dataset.number = arrDeck[idx] + (10*language)
             card.dataset.index = idx
         })
     }
@@ -140,11 +141,19 @@ function startTimer() {
         if (timeLeft > 0) {
             timeLeft--;
             updateThermometer();
-        } else {
+        } else if(language == 0) {
+            clearInterval(timerInterval);
+            alert('시간 초과');
+            resetGame(); // 타이머가 0이 되었을 때 게임 초기화
+        } else if(language == 1) {
             clearInterval(timerInterval);
             alert('Game Over');
             resetGame(); // 타이머가 0이 되었을 때 게임 초기화
-        }
+        } else if(language == 2) {
+            clearInterval(timerInterval);
+            alert('暂停');
+            resetGame(); // 타이머가 0이 되었을 때 게임 초기화
+        }  
     }, 1000);
 }
 
@@ -158,6 +167,39 @@ function resetGame() {
     initCard();
 }
 
+function resetGameAndChangeKorean() {
+    clearInterval(timerInterval);
+    timeLeft = maxTime;
+    updateThermometer();
+    startTimer();
+    language = 0;
+    // 게임을 초기화하는 추가 코드
+    reShuffle(true);
+    initCard();
+}
+
+function resetGameAndChangeEnglish() {
+    clearInterval(timerInterval);
+    timeLeft = maxTime;
+    updateThermometer();
+    startTimer();
+    language = 1;
+    // 게임을 초기화하는 추가 코드
+    reShuffle(true);
+    initCard();
+}
+
+function resetGameAndChangeChinese() {
+    clearInterval(timerInterval);
+    timeLeft = maxTime;
+    updateThermometer();
+    startTimer();
+    language = 2;
+    // 게임을 초기화하는 추가 코드
+    reShuffle(true);
+    initCard();
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     updateThermometer();
     startTimer();