diff --git a/css/common.css b/css/common.css index e36a414..d33ac9e 100644 --- a/css/common.css +++ b/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; diff --git a/images/main/arcade_background_img_2.jpeg b/images/main/arcade_background_img_2.jpeg new file mode 100644 index 0000000..6630b2e Binary files /dev/null and b/images/main/arcade_background_img_2.jpeg differ diff --git a/images/main/game-display-1.gif b/images/main/game-display-1.gif new file mode 100644 index 0000000..8cf2e05 Binary files /dev/null and b/images/main/game-display-1.gif differ diff --git a/images/main/game-display-2.gif b/images/main/game-display-2.gif new file mode 100644 index 0000000..e5c1fb0 Binary files /dev/null and b/images/main/game-display-2.gif differ diff --git a/index.html b/index.html index 327ddf8..a18d88e 100644 --- a/index.html +++ b/index.html @@ -63,10 +63,11 @@ /> -
- + + +
@@ -78,8 +79,22 @@
+
+ +
+
+
+
+ +

insert coin!

+
+
+
+
+
+ - + \ No newline at end of file diff --git a/js/app.js b/js/app.js index 6a22b06..9164f70 100644 --- a/js/app.js +++ b/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( '' ); const coin_js = document.write(''); +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"; diff --git a/js/dinosaur/main.js b/js/dinosaur/main.js index dce6da1..c6ff631 100644 --- a/js/dinosaur/main.js +++ b/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); // 부드러운 전환 효과 적용 diff --git a/js/tetris.js b/js/tetris.js index cf142dd..5bf74ee 100644 --- a/js/tetris.js +++ b/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 = ""; } +