next-step · HeHelee · May 9, 2024 · May 9, 2024 · May 9, 2024 · May 9, 2024
diff --git a/README.md b/README.md
@@ -1 +1,13 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+
+## 과제 소개 
+#### 카카오테크 캠퍼스에서 진행한 과제로 숫자 야구 게임입니다. 
+#### 1~9 까지 컴퓨터가 생성한 숫자 중에서 사용자가 숫자를 입력하면 그에 맞는 결과를 판단해서 보여줍니다.
+
+## 기능 소개
+#### main.js : 변수들과 전체적인 로직의 흐름이 들어있는 파일입니다.
+#### - 게임 결과 출력, 게임 재시작, 게임 종료 로직이 추가되어있습니다.
+#### radomNumber.js : 컴퓨터가 1~9까지 랜덤으로 숫자를 생성합니다.
+#### check.js : 숫자가 중복인지, 3글자인지를 판단하는 유효성 검사 로직입니다. 
+#### gameLogic.js : 숫자 야구를 진행하는 게임 로직입니다.
+
diff --git a/index.html b/index.html
@@ -3,10 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>숫자 야구 게임</title>
+    <script type = "module" defer src = "/src/main.js"></script>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+  <h2>&#9918;숫자 야구 게임</h2>
+  <h5>1~9까지의 수를 중복없이 3개 입력해주세요.<br>올바른 예)139<br>틀린 예)122</h5>
+  <input type = "text" id = "userInput">
+  <button id = "submitButton">입력</button>
+  <div id = "result">
+
+  </div>
   </body>
 </html>
diff --git a/src/check.js b/src/check.js
@@ -0,0 +1,21 @@
+// 유효성 검사 및 값 저장
+export function checkAnswer(answer,inputBox) {
+    const userInput = document.getElementById('userInput').value
+    if (userInput.length !== 3) {
+        alert('3자리 수를 입력하세요.')
+        inputBox()
+        return;
+    }
+    answer = userInput.split('').map(Number)
+    if(hasDuplicates(answer)) {
+      alert('중복된 숫자를 포함할 수 없습니다.')
+      inputBox()
+      return;
+    }
+    return answer;
+}
+
+// 중복 제거
+function hasDuplicates(array) {
+    return (new Set(array)).size !== array.length
+}
diff --git a/src/gameLogic.js b/src/gameLogic.js
@@ -0,0 +1,27 @@
+import { checkAnswer } from "./check";
+import { generateRandomNumber } from "./randomNumber";
+
+let answer = [];
+
+export function evaluateGuess(numbers, answer) {
+    let strike = 0;
+    let ball = 0;
+
+    for (let i = 0; i < numbers.length; i++) {
+        if (numbers[i] === answer[i]) {
+            strike++;
+        } else if (answer.includes(numbers[i])) {
+            ball++;
+        }
+    }
+
+    let resultMessage = '';
+    if (strike === 3) {
+        resultMessage = '🎉정답을 맞추셨습니다🎉';
+    } else if (strike === 0 && ball === 0) {
+        resultMessage = '낫싱';
+    } else {
+        resultMessage = `${strike} 스트라이크 ${ball} 볼`;
+    }
+    return resultMessage;
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,101 @@
+import { checkAnswer } from "./check";
+import { generateRandomNumber } from "./randomNumber";
+import { evaluateGuess } from "./gameLogic";
+
+// 컴퓨터가 입력한 값, 1~9까지 랜덤으로 3자리 수 생성
+let numbers = generateRandomNumber()
+// 사용자가 입력한 값
+let answer = [];
+window.onload = function () {
+    const submitButton = document.getElementById('submitButton')
+    submitButton.addEventListener('click', () => {
+        answer = checkAnswer(answer);
+        if (answer) {
+            const resultMessage = evaluateGuess(numbers, answer)
+            printResult(resultMessage)
+        }
+    });
+};
+
+console.log(numbers)
+
+// 출력 메세지 함수
+function printResult(resultMessage) {
+    const resultDiv = document.getElementById('result')
+    resultDiv.innerHTML = resultMessage ? `<h4><span>&#128221;</span>결과<br><br>${resultMessage}</h4>` : ''
+
+    //게임 재시작 안내 문구
+    const restartMessage = document.createElement('div')
+    restartMessage.textContent = '게임을 새로 시작하시겠습니까?'
+
+    //restartButton 버튼
+    const restartButton = document.createElement('button') // restartButton 정의
+    restartButton.textContent = '게임 재시작'
+    restartButton.id = 'restartButton'
+    restartButton.style.display = resultMessage ? 'block' : 'none'
+    restartButton.addEventListener('click', restartGame)
+
+    //endGame 버튼
+    const endGameButton = document.createElement('button') // restartButton 정의
+    endGameButton.textContent = '게임 종료'
+    endGameButton.id = 'endGameButton'
+    endGameButton.style.display = resultMessage ? 'block' : 'none'
+    endGameButton.addEventListener('click', endGame)
+
+    //공백 요소 생성
+    const space = document.createElement('div')
+    space.textContent = '\xa0' 
+
+    //result div에 추가
+    resultDiv.appendChild(restartMessage)
+    resultDiv.appendChild(space)
+    resultDiv.appendChild(restartButton)
+    resultDiv.appendChild(space)
+    resultDiv.appendChild(endGameButton)
+}
+
+//게임 재시작 함수
+function restartGame() {
+
+    numbers = generateRandomNumber()
+
+    console.log(numbers)
+
+    //컴퓨터가 입력한 값, 랜덤으로 3자리 수 생성
+    answer = []
+
+    //결과창 초기화
+    clearResult()
+
+    //텍스트 상자 초기화
+    inputBox()
+}
+
+//게임 종료 함수
+function endGame() {
+    //결과창 초기화
+    clearResult()
+
+    //텍스트 상자 초기화
+    inputBox()
+
+    //개임 종료 메시지 출력
+    const resultDiv = document.getElementById('result')
+    const endMessage = document.createElement('h4')
+    endMessage.textContent = '게임이 종료되었습니다'
+    resultDiv.appendChild(endMessage)
+}
+
+// 텍스트 상자 초기화
+function inputBox() {
+    const inputBox = document.getElementById('userInput')
+    inputBox.value = '';
+    inputBox.focus(); // 입력 상자에 포커스를 맞춘다.
+}
+
+//결과창 초기화 함수
+function clearResult() {
+    const resultDiv = document.getElementById('result')
+    resultDiv.textContent = '';
+} 
+
diff --git a/src/randomNumber.js b/src/randomNumber.js
@@ -0,0 +1,10 @@
+//랜덤 넘버 생성
+export function generateRandomNumber() {
+    let randomNumbers = [];
+    while (randomNumbers.length < 3) {
+        const num = Math.floor(Math.random() * 9) + 1
+        if (!randomNumbers.includes(num))
+            randomNumbers.push(num);
+    }
+    return randomNumbers;
+}