next-step · rudtj · May 6, 2024 · May 6, 2024 · May 6, 2024 · May 6, 2024
diff --git a/README.md b/README.md
@@ -1 +1,36 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+게임 시작
+	'1~9까지의 수를 중복없이 3개 입력해주세요.' 출력
+
+게임 재시작 / 프로그램 종료
+	3개의 숫자를 모두 맞힐 경우 : '정답을 맞추셨습니다' '게임을 새로 시작하시겠습니까?' 출력
+	재시작 버튼을 누르면 게임이 다시 시작됨
+	재시작 버튼 외에 특별한 종료 버튼은 없음
+
+Random 값 추출	
+	서로 다른 숫자 3개로 구성된 배열 생성
+	Math.random()과 Math.floor() 사용하여 randomNum 생성 
+	생성된 randomNum과 중복되는 숫자가 있는지 검사 후 추가
+
+사용자의 입력
+	입력값 세자리가 모두 다르면 통과
+	alert()를 사용하여 에러 메시지 출력
+		입력 받은 숫자가 3자리가 아닌 경우
+		입력 받은 값이 숫자가 아닌 경우
+		입력 받은 값에 중복된 숫자가 있을 경우
+
+3자리의 수를 맞추기
+	같은 수가 같은 자리 : '스트라이크'
+	같은 수가 다른 자리 : '볼'
+	같은 수가 없으면 : '낫싱'
+
+필요한 기능
+	숫자 배열 생성
+	스트라이크 개수 체크
+	볼 개수 체크
+	숫자 비교 함수
+
+출력
+	입력한 수에 대한 결과를 볼,스트라이크 개수로 표시 : ' 볼  스트라이크'
+	하나도 없는 경우 : '낫싱'
+	3개의 숫자를 모두 맞힐 경우 : '정답을 맞추셨습니다' '게임을 새로 시작하시겠습니까?' 출력
diff --git a/index.html b/index.html
@@ -3,10 +3,27 @@
   <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>
+
+      <div>
+        <div><b>1~9까지의 수</b>를 중복없이 <b>3개</b> 입력해주세요.</div>
+        <div>올바른 예&#41; 139</div>
+        <div>틀린 예&#41; 122</div>
+      </div>
+
+      <div>
+        <input type="text" id="user-input" />
+        <button id="confirmButton">확인</button>
+      </div>
+
+      <h2>📄 결과</h2>
+      <div id="result"></div>
+    </div>
+
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/components/randomNum.js b/src/components/randomNum.js
@@ -0,0 +1,10 @@
+export default function randomNum() {
+	let arr = [];
+		while(arr.length < 3) {
+			let num = Math.floor(Math.random() * 9) + 1;
+			if (!arr.includes(num)) {
+				arr.push(num);
+			}
+		}
+	return arr;
+}
diff --git a/src/components/checkError.js b/src/components/checkError.js
@@ -0,0 +1,23 @@
+export default function checkError(value) {
+    // 입력 받은 값이 숫자가 아닌 경우
+    if (!value || isNaN(value)) {
+        alert("숫자만 입력해야 합니다.\n다시 입력해주세요.");
+        return false;
+    }
+
+    // 입력 받은 숫자가 3자리가 아닌 경우
+    if (value.length !== 3) {
+        alert("3자리 수의 숫자만 입력해야 합니다.\n다시 입력해주세요.");
+        return false;
+    }
+
+    // 입력 받은 값에 중복된 숫자가 있을 경우
+    let digits = value.split('');
+    let uniqueDigits = [...new Set(digits)];
+    if (uniqueDigits.length !== digits.length) {
+        alert("중복 없이 숫자를 입력해야 합니다.\n다시 입력해주세요.");
+        return false;
+    }
+    return true;
+}
+
diff --git a/src/components/inputNum.js b/src/components/inputNum.js
@@ -0,0 +1,19 @@
+import checkError from "./checkError";
+import playGame from "./playGame";
+
+export default function inputNum() {
+    const confirmButton = document.getElementById('confirmButton');
+
+    function handleConfirmClick() {
+        const userInput = document.getElementById('user-input').value;
+        if (!userInput) return; 
+
+        const isValid = checkError(userInput);
+        if (!isValid) {
+            return; 
+        }
+        playGame(userInput);
+    }
+
+    confirmButton.addEventListener('click', handleConfirmClick);
+}
diff --git a/src/components/playGame.js b/src/components/playGame.js
@@ -0,0 +1,44 @@
+import randomNum from "./\brandomNum";
+
+let comValue = randomNum();
+console.log(comValue);
+
+export default function playGame() {
+
+    const userInput = document.getElementById('user-input').value;
+
+    let strike = 0;
+    let ball = 0;
+
+    const userInputArray = Array.from(userInput.toString()).map(Number);
+    const resultDiv = document.getElementById('result');
+
+    for (let i = 0; i < userInputArray.length; i++) {
+        if (comValue.includes(userInputArray[i]) && userInputArray[i] !== comValue[i]) {
+            ball++;
+        }
+    }
+
+    for (let i = 0; i < comValue.length; i++) {
+        if (userInputArray[i] === comValue[i]) {
+            strike++;
+        }
+    }
+
+    if (strike === 3) {
+        resultDiv.innerHTML = `<strong>정답을 맞추셨습니다!</strong><br><br>게임을 새로 시작하시겠습니까?<br><br>`;
+        const restartButton = document.createElement("button");
+        restartButton.innerText = "게임 재시작";
+        restartButton.addEventListener("click", function() {
+            location.reload();
+            comValue = randomNum();
+            document.getElementById('user-input').value = '';
+            restartButton.remove();
+        });
+        document.getElementById('app').appendChild(restartButton);
+    } else if (strike === 0 && ball === 0) {
+        resultDiv.innerHTML = `낫싱`;
+    } else {
+        resultDiv.innerHTML = `${ball}볼 ${strike}스트라이크`;
+    } 
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,7 @@
+import inputNum from "./components/inputNum";
+import playGame from "./components/playGame";
+
+function main() {
+  inputNum(playGame);
+}
+main();