Merge pull request #70 from KOPO-DA5/68-feat-테트리스-크기-변경-및-랭킹-화면

68 feat 테트리스 크기 변경 및 랭킹 화면
KOPO-DA5 · Apr 28, 2024 · 4cb5cab · 4cb5cab
2 parents ac8e8ec + 1b6eee4
commit 4cb5cab
Show file tree

Hide file tree

Showing 5 changed files with 282 additions and 75 deletions.
diff --git a/css/tetris.css b/css/tetris.css
@@ -2,8 +2,9 @@
 .grid {
   display: grid;
   flex-direction: column;
-  grid-template-columns: 200px 150px 200px;
-  font-size: 10px;
+  grid-template-columns: 120px 130px 130px;
+  grid-template-rows: 240px;
+  font-size: 8px;
   padding-left: 20px;
   padding-right: 10px;
 }
@@ -12,18 +13,21 @@
   display: flex;
   flex-direction: column;
   font-size: 8px;
+  margin-top: 5px;
+  margin-left: 8px;
 }
 
 .right-column {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin-left: 20px;
+  margin-left: 10px;
+  margin-top: 5px;
 }
 
 .game-board {
   border: solid 2px;
-  margin-top: 15px;
+  margin-top: 10px;
 }
 
 .game-board-container {
@@ -34,9 +38,10 @@
 
 .play-button {
   background-color: #4caf50;
-  font-size: 16px;
-  padding: 15px 30px;
+  font-size: 13px;
+  padding: 8px 10px;
   cursor: pointer;
+  width: 120px;
 }
 
 #pause-btn {
@@ -100,3 +105,88 @@
   color: white;
   border: 0px;
 }
+
+.leaderboard-container {
+  display: none;
+  color: white;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: black;
+  border: 0px;
+  border-radius: 8px;
+  width: 300px;
+  margin: 0px auto;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+#leaderboard-list {
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+
+#leaderboard-list li {
+  margin-bottom: 10px;
+}
+
+.button-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.button-row button {
+  width: 45%;
+  padding: 4px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.button-row button:hover {
+  background-color: #45a049;
+}
+
+/*축하 애니메이션*/
+@keyframes confetti {
+  0% {
+    opacity: 1;
+    transform: translateY(0) rotateZ(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(500px) rotateZ(720deg);
+  }
+}
+
+.confetti {
+  position: relative;
+  display: inline-block;
+  transform-origin: top left;
+}
+
+.confetti::before {
+  content: "🎉";
+  position: absolute;
+  opacity: 1;
+  animation: confetti 5s forwards;
+}
+.confetti::after {
+  content: "🥳";
+  position: absolute;
+  opacity: 1;
+  animation: confetti 4s forwards;
+}
+
+.gameButton.selected {
+  background-color: #1c9822;
+  color: black;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s, box-shadow 0.3s;
+}
diff --git a/js/app.js b/js/app.js
@@ -1,70 +1,77 @@
 let coin = 0;
-const coinImg = document.querySelector('#game-coin-img');
-const mainPage = document.querySelector('#main-page');
+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 gameControler = document.write(
+  '<script src="./js/gameControler.js"></script>'
+);
 
 function getCoin() {
   return coin;
 }
 
-document.addEventListener('DOMContentLoaded', function () {
-  const content = document.getElementById('content');
+document.addEventListener("DOMContentLoaded", function () {
+  const content = document.getElementById("content");
   resetAnimation(content);
-  playSound('mainBgm');
+  playSound("mainBgm");
   function resetAnimation(element) {
-    element.classList.remove('fade-in');
+    element.classList.remove("fade-in");
     void element.offsetWidth;
-    element.classList.add('fade-in');
+    element.classList.add("fade-in");
   }
 
   function handleKeyDownApp(event) {
     if (!GlobalState.isGameActive) {
-      if(event.key === "Insert") {
+      if (event.key === "Insert") {
         coinImg.style.display = "block";
-        coinImg.classList.add('animate__animated', 'animate__flip'); 
+        coinImg.classList.add("animate__animated", "animate__flip");
 
-        coinImg.addEventListener('animationend', () => {
-          coinImg.classList.remove('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);
+          setTimeout(function () {
+            mainPage.style.transform = "scale(1.9)";
+            mainPage.style.transition = ".5s";
+            mainPage.style.overflow = "hidden";
+          }, 100);
         });
-      
+
         coin += 5;
         console.log(coin);
       }
-      if(coin > 0) {
+      if (coin > 0) {
         gameControl(event.key);
-        if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+        if (
+          event.key === "ArrowRight" ||
+          event.key === "ArrowLeft" ||
+          event.key === "ArrowUp" ||
+          event.key === "ArrowDown"
+        ) {
           toggleGameSelection();
         }
-        
+
         if (event.key === "Enter") {
           loadSelectedGame(GlobalState.currentGame);
         }
       }
-
-
     }
   }
 
   // 게임 선택 이벤트 리스너 등록
-  document.addEventListener('keydown', handleKeyDownApp);
+  document.addEventListener("keydown", handleKeyDownApp);
 
   function toggleGameSelection() {
     if (!GlobalState.isGameActive) {
-      GlobalState.currentGame = GlobalState.currentGame === 'Tetris' ? 'Dino' : 'Tetris';
-      var displayGame = GlobalState.currentGame === 'Tetris' ? '← Tetris →' : '← Dino →';
-      document.getElementById('selected-game').textContent = displayGame;
+      GlobalState.currentGame =
+        GlobalState.currentGame === "Tetris" ? "Dino" : "Tetris";
+      var displayGame =
+        GlobalState.currentGame === "Tetris" ? "← Tetris →" : "← Dino →";
+      document.getElementById("selected-game").textContent = displayGame;
     }
   }
 
@@ -74,11 +81,11 @@ document.addEventListener('DOMContentLoaded', function () {
       document.body.removeChild(GlobalState.scriptElement);
     }
 
-    let scriptPath = game === 'Tetris' ? 'js/tetris.js' : 'js/dinosaur/skin.js';
-    let script = document.createElement('script');
+    let scriptPath = game === "Tetris" ? "js/tetris.js" : "js/dinosaur/skin.js";
+    let script = document.createElement("script");
     script.src = scriptPath;
     script.onload = function () {
-      if (game === 'Tetris') {
+      if (game === "Tetris") {
         loadGameTetris();
       } else {
         loadGameSkin();

diff --git a/js/tetris.js b/js/tetris.js
@@ -24,25 +24,23 @@ let buttonIndex = 0;
 function handleMenuKeyPress(event) {
   event.stopPropagation();
   const gameControls = document.getElementById("game-controls");
-  const buttons = gameControls.querySelectorAll("button");
-  if (!gameControls.classList.contains("hide")) {
-    if (event.key === "ArrowUp") {
-      selectButton(-1);
-      escMove.currentTime = 0;
-      escMove.play();
-    }
-    if (event.key === "ArrowDown") {
-      selectButton(1);
-      escMove.currentTime = 0;
-      escMove.play();
+  if (gameControls) {
+    const buttons = gameControls.querySelectorAll("button");
+    if (!gameControls.classList.contains("hide")) {
+      if (event.key === "ArrowUp") {
+        selectButton(-1);
+        escMove.currentTime = 0;
+        escMove.play();
+      }
+      if (event.key === "ArrowDown") {
+        selectButton(1);
+        escMove.currentTime = 0;
+        escMove.play();
+      }
+      if (event.key === "Escape") {
+        buttons[buttonIndex].click();
+      }
     }
-    if (event.key === "Escape") {
-      buttons[buttonIndex].click();
-    }
-    // if (event.key === "Escape") {
-    //   resumeGame();
-    //   escSound.play();
-    // }
   }
 }
 
@@ -131,7 +129,7 @@ function updateGameContent() {
                 <link rel="stylesheet" href="./css/tetris.css" />
                 <div class="grid">
                   <div class="left-column">
-                    <h2>HIGH SCORES</h2>
+                    <h2 style="margin-bottom:10px;">HIGH SCORES</h2>
                     <ol id="highScores"></ol>
                   </div>
                   <div class="game-board-container">
@@ -164,6 +162,14 @@ function updateGameContent() {
                     <button type="submit">Submit</button>
                     </form>
                     </div>
+                    <div class="leaderboard-container">
+                      <h1>Ranking</h1>
+                      <ol id="leaderboard-list"></ol>
+                      <div class="button-row">
+                      <button id="game-again-button" class="gameButton">Game Again</button>
+                      <button id="game-select-button" class="gameButton">Game Select</button>
+                      </div>
+                    </div>
 
                 </div>
             `;

diff --git a/js/tetris/constants.js b/js/tetris/constants.js
@@ -4,7 +4,7 @@ const COLS = 10;
 //20개 행 지정
 const ROWS = 20;
 //블록 사이즈 지정
-const BLOCK_SIZE = 15;
+const BLOCK_SIZE = 12;
 
 //3줄 삭제 시 레벨 업
 const LINES_PER_LEVEL = 3;