next-step · userjmmm · May 5, 2024 · May 5, 2024 · May 5, 2024 · May 5, 2024
diff --git a/README.md b/README.md
@@ -1 +1,13 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+
+### ⚾️ 숫자 야구 - 미니과제
+
+> 구현 기능 목록 정리
+
+- [x] 컴퓨터가 서로 다른 임의의 수 3개를 선택
+- [x] 게임 플레이어가 3개의 숫자를 입력하는 기능
+- [x] 입력 중인 값이 올바른지 검증하는 기능
+- [x] 잘못된 값을 넣은 경우, 에러 메시지 출력 및 다시 입력받는 기능
+- [x] 입력값에 따라 힌트를 처리하는 기능
+- [x] 확인 버튼을 누르면 힌트를 제공하는 기능
+- [x] 숫자를 모두 맞히면 게임이 종료 메시지와 재시작 버튼이 나오는 기능
diff --git a/index.html b/index.html
@@ -1,12 +1,23 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>⚾️ 숫자 야구 게임</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <h1>⚾️ 숫자 야구 게임</h1>
+      <p>1~9까지의 숫자 중 중복없이 3개 입력해주세요.</p>
+      <p>올바른 예) 139</p>
+      <p>틀린 예) 122</p>
+      <input type="text" id="userInput">
+      <button id="checkButton">확인</button>
+      <h2>📄결과</h2>
+      <div id="result"></div>
+      <button id="restartButton" style="display:none;">게임 재시작</button>
+    </div>
+
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/components/makeHint.js b/src/components/makeHint.js
@@ -0,0 +1,12 @@
+export function calculateHint(playerInput, comRandom) {
+    let strike = 0
+    let ball = 0
+
+    playerInput.forEach((num, index) => {
+        if (num === comRandom[index])   strike++
+        else if (comRandom.includes(num))   ball++
+    });
+
+    console.log('스트라이크 개수: ', strike, ', 볼 개수: ', ball)
+    return {strike, ball}
+}
diff --git a/src/components/makeRandom.js b/src/components/makeRandom.js
@@ -0,0 +1,10 @@
+export function threeRandom () {
+    const randomNum = new Set()
+
+    while (randomNum.size < 3) {
+        const randomOne = Math.floor(Math.random() * 9) +1
+        randomNum.add(randomOne)
+    }
+
+    return Array.from(randomNum)
+}
diff --git a/src/components/numberInput.js b/src/components/numberInput.js
@@ -0,0 +1,15 @@
+import { inputError } from './rewriteInput.js';
+
+export const userInput = document.getElementById('userInput')
+
+export function checkInput() { // 잘못된 값 입력하는지 검증
+    const numbers = userInput.value.split('').map(Number)
+    const isValid = numbers.length === 3 && numbers.every(num => num>=1 && num<=9 && Number.isInteger(num))
+    const isDuplicate = new Set(numbers).size === numbers.length
+
+    if (!isValid || !isDuplicate) {
+        inputError()
+    }
+    console.log('입력 받은 숫자: ', numbers)
+    return numbers
+}
diff --git a/src/components/printHint.js b/src/components/printHint.js
@@ -0,0 +1,19 @@
+export function classifyHint({ strike, ball}) {
+    const resultElement = document.getElementById('result')
+
+    if (strike === 3) {
+        resultElement.textContent = '🎉정답을 맞히셨습니다🎉'
+    }
+    else if (strike !== 0 && ball === 0) {
+        resultElement.textContent = `${strike}스트라이크`
+    }
+    else if (ball !== 0 && strike === 0) {
+        resultElement.textContent = `${ball}볼`
+    }
+    else if (ball != 0 && strike != 0) {
+        resultElement.textContent = `${ball}볼 ${strike}스트라이크`
+    }
+    else {
+        resultElement.textContent = '낫싱'
+    }
+}
diff --git a/src/components/rewriteInput.js b/src/components/rewriteInput.js
@@ -0,0 +1,8 @@
+import { userInput } from './numberInput.js'
+
+export function inputError() {
+    alert('잘못된 값을 입력했습니다. 다시 입력해 주세요!')
+    userInput.value = ''
+    userInput.focus()
+    return;
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,33 @@
+import { threeRandom } from './components/makeRandom.js';
+import { checkInput } from './components/numberInput.js';
+import { calculateHint } from './components/makeHint.js';
+import { classifyHint } from './components/printHint.js';
+
+const gameState = {
+    comRandom: null
+}
+// 숫자를 모두 맞히면 게임이 종료 메시지와 재시작 버튼이 나오는 기능
+function setRestartButton() {
+    const restartButton = document.getElementById('restartButton')
+    restartButton.addEventListener('click', () => window.location.reload())
+}
+
+function gameResult() {
+    const userInput = checkInput()
+    const calHint = calculateHint(userInput, gameState.comRandom)
+    classifyHint(calHint)
+
+    const resultElement = document.getElementById('result')
+    if (resultElement.textContent.includes('🎉정답을 맞히셨습니다🎉')) {
+        const restartButton = document.getElementById('restartButton')
+        restartButton.style.display = 'block'
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    gameState.comRandom = threeRandom()
+    console.log('상대방(컴퓨터)의 수: ', gameState.comRandom)
+
+    document.getElementById('checkButton').addEventListener('click', gameResult)
+    setRestartButton()
+});