✨ feat: dino 카운트 다운 css 수정

KOPO-DA5 · Apr 29, 2024 · a69bbc8 · a69bbc8
1 parent 97ec42e
commit a69bbc8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/css/common.css b/css/common.css
@@ -326,7 +326,24 @@ body {
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 2.5rem;
-  color: red;
+  color: white;
   z-index: 9999;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  text-shadow: 0 0 10px rgba(255, 255, 0, 0.9);
+}
+
+#count-number {
+  font-size: 30px;
+  text-shadow: 0 0 10px rgba(255, 255, 0, 0.9);
+  margin-bottom: 20px;
+}
+
+#count-down p:nth-of-type(1) {
+  font-size: 17px;
+  margin-bottom: 20px;
+  text-shadow: 0 0 10px rgba(255, 255, 0, 0.9);
+}
+
+#count-down p:nth-of-type(3) {
+  font-size: 27px;
+  color: yellow;
 }
diff --git a/js/dinosaur/dinosaur.js b/js/dinosaur/dinosaur.js
@@ -106,7 +106,10 @@ function updateGameContent() {
     </div>
   </div>
 
-  <div id="count-down" class="count-down hide">1</div>
+  <div id="count-down" class="count-down hide">
+    <p id="count-number">0</p>
+  </div>
+
               `;
 
   loadScript("js/dinosaur/main.js");

diff --git a/js/dinosaur/main.js b/js/dinosaur/main.js
@@ -120,14 +120,18 @@
       let count = 10;
       countdown = document.createElement("div"); // 전역 변수 countdown에 할당
       countdown.id = "count-down";
-      countdown.textContent = count;
       countdown.style.display = "block";
       console.log(countdown.style.display);
 
       countdownInterval = setInterval(() => {
-        count--;
         console.log(count);
-        countdown.textContent = count;
+        document.getElementById("count-number").textContent = count;
+        countdown.innerHTML = `
+        <p>CONTINUE?</p>
+        <p id="count-number">${count}</p>
+        <p>INSERT COIN</p>
+      `;
+        count--;
         if (count === 0) {
           clearInterval(countdownInterval);
           // 10초 카운트가 끝나면 아래 코드 실행