next-step · sondonghun97 · May 10, 2024 · May 10, 2024 · May 10, 2024 · May 10, 2024
diff --git a/README.md b/README.md
@@ -1 +1,12 @@
-# javascript-baseball-precourse
+# 1~9까지 서로 다른수로 이루어진 3자리 수를 맞추는 게임
+
+### 1~9까지 무작위 숫자 선택
+
+### 숫자 입력받기
+
+### 입력받은 값이 유효한지 확인
+
+### 스트라이크,볼,낫싱 계산
+
+### 3자리 숫자를 맞출때까지 게임 반복, 모두 맞히면 게임 종료or재시작
+
diff --git a/index.html b/index.html
@@ -1,12 +1,28 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>숫자 야구 게임</title>
+</head>
+
+<body>
+  <div id="app">
+    <h1>⚾숫자 야구 게임</h1>
+    <p>
+      <b>1~9까지의 수</b>를 중복없이 <b>3개</b> 입력해주세요.<br>올바른 예) 139 <br> 틀린 예) 122
+    </p>
+    <input type="text" id="userInput">
+    <button id="submit">확인</button>
+    <h2>📄결과</h2>
+    <div id="result"></div>
+    <div id="game-over-section" style="display: none;">
+      <button id="restart-btn" style="display: none;">게임 재시작</button>
+      <button id="quit-btn" style="display: none;">게임 종료</button>
+    </div>
+  </div>
+  <script type="module" src="./src/main.js"></script>
+</body>
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,64 @@
+import { generateNumber } from './modules/generateNumber.js';
+import { validateInput } from './modules/validateInput.js';
+
+const playerInput = document.getElementById('userInput');
+const submitBtn = document.getElementById('submit');
+const resultEl = document.getElementById('result');
+const gameOverSection = document.getElementById('game-over-section');
+const restartBtn = document.getElementById('restart-btn');
+const quitBtn = document.getElementById('quit-btn');
+
+submitBtn.addEventListener('click', displayResult);
+restartBtn.addEventListener('click', restartGame);
+quitBtn.addEventListener('click', quitGame);
+
+let answer = generateNumber();
+
+function displayResult() {
+    const inputValue = playerInput.value;
+    if (!validateInput(inputValue)) {
+        return;
+    }
+
+    let strikes = 0;
+    let balls = 0;
+    for (let i = 0; i < 3; i++) {
+        const input = parseInt(inputValue[i]);
+        if (input === parseInt(answer[i])) {
+            strikes++;
+        } else if (answer.includes(input.toString())) {
+            balls++;
+        }
+    }
+
+    if (strikes === 3) {
+        resultEl.innerText = '🎉정답을 맞추셨습니다🎉';
+        gameOverSection.style.display = 'block';
+        restartBtn.style.display = 'inline';
+        quitBtn.style.display = 'inline';
+        submitBtn.disabled = true;
+        playerInput.disabled = false;
+    } else if (strikes === 0 && balls === 0) {
+        resultEl.innerText = '낫싱';
+    } else {
+        resultEl.innerText = `${balls}볼 ${strikes}스트라이크`;
+    }
+}
+
+function restartGame() {
+    answer = generateNumber();
+    gameOverSection.style.display = 'none';
+    resultEl.innerText = '';
+    playerInput.value = '';
+    playerInput.disabled = false;
+    submitBtn.disabled = false;
+}
+
+function quitGame() {
+    gameOverSection.style.display = 'none';
+    resultEl.innerText = '게임이 종료되었습니다.';
+    playerInput.disabled = true;
+    submitBtn.disabled = true;
+    restartBtn.style.display = 'none';
+    quitBtn.style.display = 'none';
+}
diff --git a/src/modules/generateNumber.js b/src/modules/generateNumber.js
@@ -0,0 +1,10 @@
+export function generateNumber() {
+    let numbers = '';
+    while (numbers.length < 3) {
+        const randomNumber = Math.floor(Math.random() * 9) + 1;
+        if (!numbers.includes(randomNumber)) {
+            numbers += randomNumber;
+        }
+    }
+    return numbers;
+}
diff --git a/src/modules/validateInput.js b/src/modules/validateInput.js
@@ -0,0 +1,15 @@
+export function validateInput(inputValue) {
+    if (inputValue.length !== 3) {
+        alert("숫자 3개를 입력하세요..");
+        return false;
+    }
+    if (!/^[1-9]{3}$/.test(inputValue)) {
+        alert("1~9까지의 숫자를 입력하세요.");
+        return false;
+    }
+    if (new Set(inputValue).size !== 3) {  
+        alert("중복되지 않은 숫자를 입력하세요.");
+        return false;
+    }
+    return true;
+}