next-step · dmsrud1218 · May 6, 2024 · May 6, 2024 · May 6, 2024 · May 6, 2024
diff --git a/README.md b/README.md
@@ -1 +1,37 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+
+##기능 요구사항
+1~9까지 서로 다른 수로 이루어진 3자리의 수를 맞추는 게임.\
++ 같은 수가 같은 자리에 있으면 스트라이크, 다른 자리에 있으면 볼, 같은 수가 전혀 없으면 낫싱이란 힌트를 얻고, 그 힌트를 이용해서 먼저 상대방(컴퓨터)의 수를 맞추면 승리한다.
+
++ ```
++ e.g.
++ 상대방(컴퓨터)의 수가 425일 때,
++ - 123을 제시한 경우:1스트라이크
++ - 456을 제시한 경우: 1볼 1스트라이크
++ - 789를 제시한 경우: 낫싱
++ ```
+
++ 숫자 야구 게임에서 상대방의 역할을 컴퓨터가 한다.\
+1. 컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다.\
+2. 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력.\ 
+3. 컴퓨터는 입력한 숫자에 대한 결과를 출력한다.
++ 이 같은 과정을 반복해 컴퓨터가 선택한 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼이 표시된다.\
++ 게임을 종료한 후 게임을 다시 시작하거나 완전히 종료할 수 있다.
++ 사용자가 잘못된 값을 입력한 경우 `alert()`으로 에러 메시지를 출력 후 그 부분부터 다시 입력을 받는다.
+
+###HTML
+전체적인 화면 만들기 (메세지와 버튼 등)
+
+### JS
+- 랜덤숫자생성
+- 비교하고 결과 출력
+- 재시작버튼과 메세지 및 재시작관련 구현
+- 숫자
+
+### 추가요구사항
++ Node.js 18.17.1 버전에서 실행 가능해야 한다.
++ 'package.json' 파일은 변경할 수 없으며, 제공된 라이브러리와 스타일 라이브러리 이외의 외부 라이브러리는 사용하지 않는다.
++ 프로그램 종료 시 process.exit() 를 호출하지 않는다.
++ 프로그래밍 요구 사항에서 달리 명시하지 않는 한 파일, 패키지 등의 이름을 바꾸거나 이동하지 않는다.
+
diff --git a/index.html b/index.html
@@ -3,10 +3,25 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>baseball-game</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <h1>⚾숫자 야구 게임</h1>
+      <p><b>1~9까지의 숫자</b>를 중복없이 <b>3개</b> 입력해주세요. </p>
+      <p>올바른 예)139</p>
+      <p>틀린 예)122</p>
+      <input type="text" id="input" maxlength="3" />
+      <button id="checkButton">확인</button>
+      <h2><b>📝결과</b></h2>
+      <p id="result"></p>
+      <p id="answer"></p>
+      <p id="replayMessage">게임을 새로 시작하시겠습니까? </p>
+      <button id="replayButton" style="display: none;">게임 재시작</button> 
+
+      <p id="endMessage">게임을 종료합니다 </p>
+      <button id="endButton" style="display: none;">게임 종료</button>
+      </div>
     <script type="module" src="/src/main.js"></script>
   </body>
-</html>
+</html>
diff --git a/src/checkNumbers.js b/src/checkNumbers.js
@@ -0,0 +1,33 @@
+export default function checkNumbers(answer) {
+    const input = document.getElementById("input").value; // 입력값 가져오기
+    if (new Set(input).size !== 3 || input.includes("0") || input.length !== 3) {
+        alert("잘못된 입력입니다. 중복없이 1~9까지의 숫자를 입력해주세요.");
+        document.getElementById("input").value = ""; // 입력 필드 초기화
+        return;
+    }
+
+    let strikes = 0;
+    let balls = 0;
+    const inputNumbers = input.split("");
+
+    answer.forEach((number, index) => {
+        if (number === inputNumbers[index]) {
+            strikes++;
+        } else if (inputNumbers.includes(number)) {
+            balls++;
+        }
+    });
+
+    if (strikes === 3) {
+        document.getElementById("result").innerText = "정답을 맞추셨습니다";
+        document.getElementById("replayButton").style.display = "block"; //재시작 버튼 표시 추가
+        document.getElementById("replayMessage").innerText = "게임을 새로 시작하시겠습니까?"; //재시작 멘트 표시 추가
+        document.getElementById("endButton").style.display = "block"; // 재시작 버튼 표시
+        document.getElementById("endMessage").innerText = "게임을 종료합니다 ";
+
+    } else if (strikes === 0 && balls === 0) {
+        document.getElementById("result").innerText = "낫싱";
+    } else {
+        document.getElementById("result").innerText = `${balls}볼 ${strikes}스트라이크`;
+    }
+}
diff --git a/src/endGame.js b/src/endGame.js
@@ -0,0 +1,15 @@
+// 게임 종료 버튼을 표시하는 함수
+export function showEndGameButton() {
+    const endDisplay = document.getElementById("endButton");
+    endDisplay.style.display = "block";
+  }
+
+// 게임 종료 메시지를 표시하는 함수
+export function endGame() {
+    const app = document.getElementById("app");
+    const endMessage = document.createElement("h1");
+    endMessage.textContent = "게임이 종료되었습니다. 감사합니다!";
+    app.innerHTML = ""; // 기존 내용 초기화
+    app.appendChild(endMessage);
+    document.getElementById("replayButton").style.display = "block"; // 재시작 버튼 표시
+  }
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,33 @@
+import randomNumbers from "./randomNumbers.js";
+import checkNumbers from "./checkNumbers.js";
+import { replay } from "./replay.js";
+import {endGame}  from "./endGame.js";
+
+let answer = [];
+
+
+window.onload = function () {
+    answer = randomNumbers().split(""); // 정답 생성 및 배열로 변환
+    document.getElementById("replayButton").style.display = "none"; // 시작할때는 재시작버튼 안보이도록 숨김
+    document.getElementById("replayMessage").innerText = ""; //재시작 멘트 숨김
+    document.getElementById("endButton").style.display = "none";
+    document.getElementById("endMessage").innerText = "";
+
+    document.getElementById("checkButton").addEventListener("click", function (event) {
+        event.preventDefault(); // 기본 동작(페이지 새로고침) 방지
+        checkNumbers(answer); // 사용자가 입력한 숫자 확인 함수 호출
+    });
+
+    document.getElementById("replayButton").addEventListener("click", function (event) {
+      event.preventDefault(); // 기본 동작(페이지 새로고침) 방지
+      replay(); // 게임 재시작 함수 호출
+    });
+
+    document.getElementById("endButton").addEventListener("click", function (event) {
+      event.preventDefault(); // 기본 동작(페이지 새로고침) 방지
+      endGame(); // 게임 종료 함수 호출
+    });
+
+};
+
+//제ㅐ시작과 종료 추가
diff --git a/src/randomNumbers.js b/src/randomNumbers.js
@@ -0,0 +1,10 @@
+export default function randomNumbers() {
+    const numbers = [];
+    while (numbers.length < 3) {
+        const n = Math.floor(Math.random() * 9) + 1;
+        if (!numbers.includes(n)) {
+            numbers.push(n);
+        }
+    }
+    return numbers.join(""); // 숫자 배열을 문자열로 반환
+}
diff --git a/src/replay.js b/src/replay.js
@@ -0,0 +1,14 @@
+import randomNumbers from "./randomNumbers.js";
+
+let answer =[];
+
+export function replay() {
+    answer = randomNumbers().split(""); // 정답 생성 및 배열로 변환
+    document.getElementById("input").value = ""; // 입력 필드 초기화
+    document.getElementById("result").innerText = ""; // 결과 초기화
+    document.getElementById("answer").innerText = ""; // 정답 초기화
+    document.getElementById("replayButton").style.display = "none"; // 재시작 버튼 숨기기
+    document.getElementById("endButton").style.display = "none"; // 종료 버튼 숨기기
+    document.getElementById("endMessage").style.display = "none";
+    document.getElementById("replayMessage").style.display = "none";
+}