✨ feat: 메인화면, 동전, 조이스틱 및 버튼 애니메에이션 구현

KOPO-DA5 · Apr 27, 2024 · af5bd7a · af5bd7a
1 parent f99bbda
commit af5bd7a
Show file tree

Hide file tree

Showing 11 changed files with 233 additions and 20 deletions.
diff --git a/css/common.css b/css/common.css
@@ -1,17 +1,124 @@
 /* 공통적으로 모두 적용할 css */
 * {
+  margin: 0px;
+  padding: 0px;
   font-family: "Press Start 2p", cursive;
 }
 
+body{
+  background-color: black;
+}
+
+#game-container{
+  width:  1707px;
+  height: 930px;
+  position: relative;
+}
+
+#game-background-img{
+  width:  1707px;
+  height: 930px;
+  background-repeat: no-repeat;
+  object-fit: fill;
+}
+
 #console {
-  width: 600px;
-  height: 467px;
-  margin: 10px auto;
-  padding: 40px;
-  border: 3px solid #333;
+  width: 403px;
+  border: 3px solid #000;
   border-radius: 10px;
-  background-color: #f0f0f0;
   text-align: center;
+  position: absolute;
+  z-index: 2;
+  left: 660px;
+  bottom: 325px;
+}
+
+#game-coin-img{
+  position: absolute;
+  z-index: 3;
+  top: 440px;
+  left: 820px;
+  width: 100px;
+  display: none;
+}
+
+#game-yellow-btn-img {
+  position: absolute;
+  width: 100px;
+}
+
+#game-green-btn-img {
+  position: absolute;
+  width: 100px;
+}
+
+#game-blue-btn-img {
+  position: absolute;
+  width: 100px;
+}
+
+#game-yellow-btn-container{
+  position: absolute;
+  top: 630px;
+  left: 850px;
+}
+
+#game-green-btn-container{
+  position: absolute;
+  top: 630px;
+  left: 930px;
+}
+
+#game-blue-btn-container{
+  position: absolute;
+  top: 630px;
+  left: 1010px;
+}
+
+
+#game-btn-body-img{
+  position: absolute;
+  width: 100px;
+}
+
+.push-yellow-btn{
+  animation: pushYellowBtn;
+  animation-duration : 0.3s;
+}
+
+.push-green-btn{
+  animation: pushGreenBtn;
+  animation-duration : 0.3s;
+}
+
+.push-Blue-btn{
+  animation: pushBlueBtn;
+  animation-duration : 0.3s;
+}
+
+#game-joystick-img{
+  position: absolute;
+  z-index: 2;
+  width: 130px;
+  top: 591px;
+  left: 650px;
+}
+
+.joystick-left{
+  animation: jostickLeft;
+  animation-duration : 1.5s;
+}
+
+.joystick-right{
+  animation: jostickRight;
+  animation-duration : 1.5s;
+}
+
+#game-joystick-body-img {
+  position: absolute;
+  width: 120px;
+  top: 598px;
+  left: 655px;
 }
 
 #games {
@@ -28,7 +135,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 330px; /* 이전에 설정된 높이 */
+  height: 240px; /* 이전에 설정된 높이 */
   background-color: #000; /* 기존의 배경색 */
   color: white;
 }
@@ -102,3 +209,42 @@
     opacity: 0;
   }
 }
+
+@keyframes jostickLeft {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+
+    left: 635px;
+    transform: rotate(-30deg);
+  }
+}
+
+@keyframes jostickRight {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    left: 670px;
+    transform: rotate(30deg);
+  }
+}
+
+@keyframes pushYellowBtn {
+  100% {
+    top: 5px;
+  }
+}
+
+@keyframes pushGreenBtn {
+  100% {
+    top: 5px;
+  }
+}
+
+@keyframes pushBlueBtn {
+  100% {
+    top: 5px;
+  }
+}
diff --git a/images/main/arcade_background_img_1.jpeg b/images/main/arcade_background_img_1.jpeg
diff --git a/images/main/blue-btn-img.png b/images/main/blue-btn-img.png
diff --git a/images/main/btn-body-img.png b/images/main/btn-body-img.png
diff --git a/images/main/coin_img.png b/images/main/coin_img.png
diff --git a/images/main/green-btn-img.png b/images/main/green-btn-img.png
diff --git a/images/main/joystick-body-img.png b/images/main/joystick-body-img.png
diff --git a/images/main/joystick-img.png b/images/main/joystick-img.png
diff --git a/images/main/yellow-btn-img.png b/images/main/yellow-btn-img.png
diff --git a/index.html b/index.html
@@ -8,22 +8,44 @@
       href="https://fonts.googleapis.com/css?family=Press+Start+2P"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     <link rel="stylesheet" href="./css/common.css" />
     <audio id="mainBgm" src="./audios/else/main-bgm.mp3 "></audio>
     <audio id="menuMove" src="./audios/else/esc-move.mp3 "></audio>
   </head>
-  <body>
-    <div id="console">
-      <div id="gameView">
-        <div id="content">
-          <div id="game-selection">
-            <p id="selected-game">← Tetris →</p>
-            <p>Press Enter to start selected game</p>
+  <body id="main-page">
+    <div id="game-container">
+      <div id="game-yellow-btn-container">
+        <img id="game-yellow-btn-img" src="/images/main/yellow-btn-img.png" alt="">
+        <img id="game-btn-body-img" src="/images/main/btn-body-img.png" alt="">
+      </div>
+      <div id="game-green-btn-container">
+        <img id="game-green-btn-img" src="/images/main/green-btn-img.png" alt="">
+        <img id="game-btn-body-img" src="/images/main/btn-body-img.png" alt="">
+      </div>
+      <div id="game-blue-btn-container">
+        <img id="game-blue-btn-img" src="/images/main/blue-btn-img.png" alt="">
+        <img id="game-btn-body-img" src="/images/main/btn-body-img.png" alt="">
+      </div>
+
+      <img id="game-joystick-img" src="/images/main/joystick-img.png" alt="">
+      <img id="game-joystick-body-img" src="/images/main/joystick-body-img.png" alt="">
+      <img id="game-background-img" src="/images/main/arcade_background_img_1.jpeg">
+    <div>
+      <img id="game-coin-img" src="/images/main/coin_img.png">
+      <div id="console">
+        <div id="gameView">
+          <div id="content">
+            <div id="game-selection">
+              <p id="selected-game">← Tetris →</p>
+              <p>Press Enter to start selected game</p>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    </div>
     <script type="text/javascript" src="./js/globalState.js"></script>
-    <script type="text/javascript" src="./js/app.js"></script>
+    <script src="./js/app.js"></script>
   </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -1,3 +1,15 @@
+let coin = 0;
+const coinImg = document.querySelector('#game-coin-img');
+const mainPage = document.querySelector('#main-page');
+const joyStick = document.querySelector('#game-joystick-img');
+const yellowBtn = document.querySelector('#game-yellow-btn-img');
+const greenBtn = document.querySelector('#game-green-btn-img');
+const blueBtn = document.querySelector('#game-blue-btn-img');
+
+function getCoin() {
+  return coin;
+}
+
 document.addEventListener('DOMContentLoaded', function () {
   const content = document.getElementById('content');
   resetAnimation(content);
@@ -10,12 +22,45 @@ document.addEventListener('DOMContentLoaded', function () {
 
   function handleKeyDownApp(event) {
     if (!GlobalState.isGameActive) {
-      if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
-        playSound('menuMove');
-        toggleGameSelection();
+      if(event.key === "Insert") {
+        coinImg.style.display = "block";
+        coinImg.classList.add('animate__animated', 'animate__flip'); 
+
+        coinImg.addEventListener('animationend', () => {
+          coinImg.classList.remove('animate__animated', 'animate__flip');
+
+          coinImg.style.display = "none";
+
+          setTimeout(function(){
+            mainPage.style.transform = 'scale(1.9)';
+            mainPage.style.transition = '.5s';
+            mainPage.style.overflow = 'hidden';
+          },100);
+        });
+
+        coin += 5;
+        console.log(coin);
       }
-      if (event.key === 'Enter') {
-        loadSelectedGame(GlobalState.currentGame);
+      if(coin > 0) {
+        if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+          if(event.key === "ArrowRight") {
+            joyStick.classList.remove('joystick-right');
+            joyStick.classList.remove('joystick-left');
+            joyStick.classList.add('joystick-right');
+          } else if(event.key === "ArrowLeft") {
+            joyStick.classList.remove('joystick-right');
+            joyStick.classList.remove('joystick-left');
+            joyStick.classList.add('joystick-left');
+          }
+          toggleGameSelection();
+        }
+        if (event.key === "Enter") {
+          yellowBtn.classList.remove('push-yellow-btn');
+          greenBtn.classList.remove('push-green-btn');
+          blueBtn.classList.remove('push-blue-btn');
+          greenBtn.classList.add('push-green-btn');
+          loadSelectedGame(GlobalState.currentGame);
+        }
       }
     }
   }