Merge pull request #67 from KOPO-DA5/54-feat-테트리스-게임-esc-화면-기능-구현

54 feat 테트리스 게임 esc 화면 기능 구현
KOPO-DA5 · Apr 27, 2024 · ac8e8ec · ac8e8ec
2 parents 6b9e6b6 + 4eb00cf
commit ac8e8ec
Show file tree

Hide file tree

Showing 6 changed files with 370 additions and 99 deletions.
diff --git a/css/tetris.css b/css/tetris.css
@@ -39,10 +39,64 @@
   cursor: pointer;
 }
 
+#pause-btn {
+  display: none;
+}
+
 #sound-speaker {
   font-size: 20px;
 }
 
 .sound-item {
   cursor: pointer;
 }
+
+.hide {
+  display: none;
+}
+
+.screen {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+#nickname-screen {
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+
+#nickname-form {
+  background-color: black;
+  padding: 20px;
+  border-radius: 10px;
+  color: white;
+}
+
+#nickname-form label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+#nickname-form input {
+  background-color: black;
+  border: 0px;
+  color: white;
+  width: 100%;
+  padding: 5px;
+  margin-bottom: 10px;
+  outline: none;
+}
+
+#nickname-form button {
+  padding: 5px 10px;
+  background-color: #848484;
+  color: white;
+  border: 0px;
+}
diff --git a/js/tetris.js b/js/tetris.js
@@ -1,4 +1,5 @@
 // tetris.js
+
 function loadGameTetris() {
   const content = document.getElementById("content");
 
@@ -18,6 +19,112 @@ function resetAnimation(element) {
   element.classList.add("fade-in");
 }
 
+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 (event.key === "Escape") {
+      buttons[buttonIndex].click();
+    }
+    // if (event.key === "Escape") {
+    //   resumeGame();
+    //   escSound.play();
+    // }
+  }
+}
+
+let isEventListener = false;
+
+function toggleGamePauseMenu() {
+  const gameControls = document.getElementById("game-controls");
+  // 게임 컨트롤 보이기/숨기기
+  gameControls.classList.toggle("hide");
+
+  if (!isEventListener) {
+    addMenuEventListener(); // 항상 이벤트 리스너를 추가
+    isEventListener = true;
+  }
+
+  if (!gameControls.classList.contains("hide")) {
+    pause();
+    sound.pause();
+  } else {
+    play();
+  }
+}
+function addMenuEventListener() {
+  document.addEventListener("keydown", handleMenuKeyPress);
+}
+
+function removeMenuEventListener() {
+  document.removeEventListener("keydown", handleMenuKeyPress);
+}
+
+function resumeGame() {
+  const gameControls = document.getElementById("game-controls");
+  gameControls.classList.add("hide");
+  play();
+}
+
+function restartGame() {
+  const gameControls = document.getElementById("game-controls");
+  gameControls.classList.add("hide");
+  resetGame();
+}
+
+function returnToSelection() {
+  const gameControls = document.getElementById("game-controls");
+  gameControls.classList.add("hide");
+  const game = document.getElementById("game");
+  if (game) {
+    game.remove(); // 게임 뷰 요소 삭제
+  }
+
+  // 게임 선택 화면 보이기
+  const gameSelection = document.getElementById("content");
+  gameSelection.innerHTML = `
+    <div id="game-selection">
+      <p id="selected-game">← Tetris →</p>
+      <p>Press Enter to start selected game</p>
+  </div>
+                `;
+}
+
+function selectButton(direction) {
+  const gameControls = document.getElementById("game-controls");
+  const buttons = gameControls.querySelectorAll("button");
+  buttonIndex = (buttonIndex + direction + buttons.length) % buttons.length;
+  buttons.forEach((button, index) => {
+    if (index === buttonIndex) {
+      button.classList.add("selected");
+    } else {
+      button.classList.remove("selected");
+    }
+  });
+
+  return buttons;
+}
+
+// 각 스크립트 파일의 로드 상태를 추적하기 위한 변수들
+let constantsLoaded = false;
+let boardLoaded = false;
+let pieceLoaded = false;
+let mainLoaded = false;
+let soundLoaded = false;
+
 function updateGameContent() {
   const content = document.getElementById("content");
   content.innerHTML = `
@@ -42,34 +149,94 @@ function updateGameContent() {
                       <span class="sound-item" id="sound-speaker"></span>
                       <span class="sound-item" id="sound-description"></span>
                     </div>
-                    <button onclick="play()" class="play-button">Play</button>
+                     <button id="play-btn" onclick="play()" class="play-button">Play</button>
+                    <button id="pause-btn" onclick="pause()" class="play-button">Pause</button>
+
+                     <div id="game-controls" class="game-controls hide">
+                      <button id="resumeButton" class="control-button" onclick="resumeGame()">game resume</button>
+                      <button id="restartButton" class="control-button" onclick="restartGame()">game restart</button>
+                      <button id="returnButton" class="control-button" onclick="returnToSelection()">game select</button>
+                    </div>
+                    <div id="nickname-screen" class="screen">
+                    <form id="nickname-form">
+                    <label for="nickname">Enter your nickname:</label>
+                    <input type="text" id="nickname" name="nickname">
+                    <button type="submit">Submit</button>
+                    </form>
+                    </div>
+
                 </div>
-                
             `;
-  /* js부르는 법 */
-
-  let scriptToConstants = document.createElement("script");
-  scriptToConstants.type = "text/javascript";
-  scriptToConstants.src = "./js/tetris/constants.js";
-  document.body.appendChild(scriptToConstants);
-
-  let scriptToBoard = document.createElement("script");
-  scriptToBoard.type = "text/javascript";
-  scriptToBoard.src = "./js/tetris/board.js";
-  document.body.appendChild(scriptToBoard);
-
-  let scriptToPiece = document.createElement("script");
-  scriptToPiece.type = "text/javascript";
-  scriptToPiece.src = "./js/tetris/piece.js";
-  document.body.appendChild(scriptToPiece);
-
-  let scriptTomain = document.createElement("script");
-  scriptTomain.type = "text/javascript";
-  scriptTomain.src = "./js/tetris/main.js";
-  document.body.appendChild(scriptTomain);
-
-  let scriptTosound = document.createElement("script");
-  scriptTosound.type = "text/javascript";
-  scriptTosound.src = "./js/tetris/sound.js";
-  document.body.appendChild(scriptTosound);
+
+  // constants.js가 로드되지 않았다면 로드
+  if (!constantsLoaded) {
+    let scriptToConstants = document.createElement("script");
+    scriptToConstants.type = "text/javascript";
+    scriptToConstants.src = "./js/tetris/constants.js";
+    document.body.appendChild(scriptToConstants);
+    constantsLoaded = true;
+  }
+
+  // board.js가 로드되지 않았다면 로드
+  if (!boardLoaded) {
+    let scriptToBoard = document.createElement("script");
+    scriptToBoard.type = "text/javascript";
+    scriptToBoard.src = "./js/tetris/board.js";
+    document.body.appendChild(scriptToBoard);
+    boardLoaded = true;
+  }
+
+  // piece.js가 로드되지 않았다면 로드
+  if (!pieceLoaded) {
+    let scriptToPiece = document.createElement("script");
+    scriptToPiece.type = "text/javascript";
+    scriptToPiece.src = "./js/tetris/piece.js";
+    document.body.appendChild(scriptToPiece);
+    pieceLoaded = true;
+  }
+
+  // main.js가 로드되지 않았다면 로드
+  if (!mainLoaded) {
+    let scriptTomain = document.createElement("script");
+    scriptTomain.type = "text/javascript";
+    scriptTomain.src = "./js/tetris/main.js";
+    document.body.appendChild(scriptTomain);
+    mainLoaded = true;
+  }
+
+  // sound.js가 로드되지 않았다면 로드
+  if (!soundLoaded) {
+    let scriptTosound = document.createElement("script");
+    scriptTosound.type = "text/javascript";
+    scriptTosound.src = "./js/tetris/sound.js";
+    document.body.appendChild(scriptTosound);
+    soundLoaded = true;
+  }
+
+  // 이미 로드된 스크립트를 삭제
+  if (constantsLoaded) {
+    document
+      .querySelectorAll('script[src="./js/tetris/constants.js"]')
+      .forEach((script) => script.remove());
+  }
+  if (boardLoaded) {
+    document
+      .querySelectorAll('script[src="./js/tetris/board.js"]')
+      .forEach((script) => script.remove());
+  }
+  if (pieceLoaded) {
+    document
+      .querySelectorAll('script[src="./js/tetris/piece.js"]')
+      .forEach((script) => script.remove());
+  }
+  if (mainLoaded) {
+    document
+      .querySelectorAll('script[src="./js/tetris/main.js"]')
+      .forEach((script) => script.remove());
+  }
+  if (soundLoaded) {
+    document
+      .querySelectorAll('script[src="./js/tetris/sound.js"]')
+      .forEach((script) => script.remove());
+  }
 }
diff --git a/js/tetris/board.js b/js/tetris/board.js
@@ -15,13 +15,13 @@ class Board {
   }
 
   reset() {
-    this.grid = this.getEmptyBoard();
+    this.grid = this.getEmptyGrid();
     this.piece = new Piece(this.ctx);
     this.piece.setStartingPosition();
     this.getNewPiece();
   }
 
-  getEmptyBoard() {
+  getEmptyGrid() {
     return Array.from({ length: ROWS }, () => Array(COLS).fill(0));
   }
 
@@ -96,6 +96,14 @@ class Board {
     return true;
   }
 
+  clear() {
+    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    this.grid = this.getEmptyGrid();
+    this.piece = new Piece(this.ctx);
+    this.piece.setStartingPosition();
+    this.getNewPiece();
+  }
+
   clearLines() {
     let lines = 0;
 

diff --git a/js/tetris/constants.js b/js/tetris/constants.js
@@ -96,6 +96,8 @@ const KEY = {
   UP: 38,
   RIGHT: 39,
   DOWN: 40,
+  P: 80,
+  Q: 81,
 };
 
 const POINTS = {
@@ -107,9 +109,11 @@ const POINTS = {
   HARD_DROP: 2,
 };
 
-//KEY를 불변하게 만듬
-Object.freeze(KEY);
-
-Object.freeze(POINTS);
+const ROTATION = {
+  LEFT: "left",
+  RIGHT: "right",
+};
 
-Object.freeze(LEVEL);
+[COLORS, SHAPES, KEY, POINTS, LEVEL, ROTATION].forEach((item) =>
+  Object.freeze(item)
+);