Merge pull request #80 from KOPO-DA5/77-feat-메인화면-및-게임-선택-화면-디자인-수정-애…

…니메이션-추가

77 feat 메인화면 및 게임 선택 화면 디자인 수정 애니메이션 추가

css/common.css

@@ -3,12 +3,41 @@
   margin: 0px;
   padding: 0px;
   font-family: "Press Start 2p", cursive;
+  font-size: 15px;
 }
 
 body {
   background-color: black;
 }
 
+#game-select-container{
+  display: none;
+}
+
+#logo{
+  font-size: 30px;
+  margin-bottom: 100px;
+  margin-top: -50px;
+}
+
+#game-diaplay-left{
+  position: absolute;
+  width: 226px;
+  top: 371px;
+  left: 195px;
+}
+
+#game-diaplay-right{
+  position: absolute;
+  width: 245px;
+  top: 361px;
+  left: 1274px;
+}
+
+#insert-coin-text{
+  color: yellow;
+}
+
 #game-container {
   width: 1707px;
   height: 930px;
@@ -149,7 +178,7 @@ body {
   color: white;
 }
 
-#content {
+#content, #game-start-content {
   width: 100%;
   height: 100%;
   top: 0;
@@ -291,9 +320,9 @@ body {
 
 #count-down {
   display: none;
-  position: fixed;
+  position: relative;
   top: 50%;
-  left: 57%;
+  left: 50%;
   transform: translate(-50%, -50%);
   font-size: 2.5rem;
   color: red;

index.html

@@ -63,10 +63,11 @@
       />
       <img
         id="game-background-img"
-        src="./images/main/arcade_background_img_1.jpeg"
+        src="./images/main/arcade_background_img_2.jpeg"
       />
-      <div>
-        <img id="game-coin-img" src="./images/main/coin_img.png" />
+      <img id="game-diaplay-left" src="./images/main/game-display-1.gif">
+      <img id="game-diaplay-right" src="./images/main/game-display-2.gif">
+      <div id="game-select-container">
         <div id="console">
           <div id="gameView">
             <div id="content">
@@ -78,8 +79,22 @@
           </div>
         </div>
       </div>
+      <div id="game-start-container">
+        <img id="game-coin-img" src="./images/main/coin_img.png" />
+        <div id="console">
+          <div id="gameView">
+            <div id="game-start-content">
+              <div id="game-selection">
+                <p id="logo">LOGO</p>
+                <p id="insert-coin-text" class="animate__animated animate__flash  animate__slow animate__infinite">insert coin!</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <script type="text/javascript" src="./js/globalState.js"></script>
     <script src="./js/app.js"></script>
+    <script src="./js/tetris/constants.js"></script>
   </body>
-</html>
+</html>

js/app.js

@@ -1,13 +1,11 @@
 const coinImg = document.querySelector("#game-coin-img");
 const mainPage = document.querySelector("#main-page");
-// const joyStick_app = 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');
 const gameControler = document.write(
   '<script src="./js/gameControler.js"></script>'
 );
 const coin_js = document.write('<script src="./js/coin.js"></script>');
+const gameSelectDisplay = document.querySelector("#game-select-container");
+const gameStartDisplay = document.querySelector("#game-start-container");
 
 window.onload = function(){
   playSound("mainBgm");
@@ -35,6 +33,8 @@ document.addEventListener("DOMContentLoaded", function () {
           coinImg.style.display = "none";
 
           setTimeout(function () {
+            gameStartDisplay.style.display = "none";
+            gameSelectDisplay.style.display = "block";
             mainPage.style.transform = "scale(1.9)";
             mainPage.style.transition = ".5s";
             mainPage.style.overflow = "hidden";

js/dinosaur/main.js

@@ -136,6 +136,8 @@
           mainPage.style.transform = "scale(1)"; // 줌 아웃
           mainPage.style.transition = ".5s";
 
+          gameStartDisplay.style.display = "block";
+
           // 게임 선택 화면 보이기
           const gameSelection = document.getElementById("content");
           resetAnimation(gameSelection); // 부드러운 전환 효과 적용

js/tetris.js

@@ -146,6 +146,8 @@ function returnToInsert() {
         mainPage.style.transform = "scale(1)"; // 줌 아웃
         mainPage.style.transition = ".5s";
 
+        gameStartDisplay.style.display = "block";
+
         // 게임 선택 화면 보이기
         const gameSelection = document.getElementById("content");
         mainBgm.play();
@@ -339,3 +341,4 @@ function clearDarkenGameContent() {
   leftColumn.style.filter = "";
   rightColumn.style.filter = "";
 }
+