next-step · wjdsbs · May 5, 2024 · May 5, 2024 · May 5, 2024 · May 5, 2024
diff --git a/README.md b/README.md
@@ -1 +1,35 @@
-# javascript-baseball-precourse
+# 미니 과제 - 숫자야구 (JavaScript)
+
+카카오 테크 캠퍼스 2기
+
+[STEP1] 1회차 미니과제 - 숫자야구 (JavaScript)
+
+### 숫자야구
+1부터 9까지 서로 다른 수로 이루어진 3자리의 수를 맞추는 게임
+
+### 규칙
+같은 수가 같은 자리에 있으면 `스트라이크`,
+다른 자리에 있으면 `볼`,
+같은 수가 전혀 없으면 `낫싱`이란 힌트를 얻을 수 있다.
+
+=> 그 **힌트**를 이용해서 먼저 상대방(컴퓨터)의
+수를 맞추면 승리!
+
+예를 들어 상대방(컴퓨터)의 수가 425라면, 다음과 같은 **힌트**를 얻을 수 있다.
+- 123을 제시한 경우: 1 스트라이크
+- 456을 제시한 경우: 1 볼 1 스트라이크
+- 789를 제시한 경우: 낫싱
+
+
+## 기능 목록
+- 인터페이스 구현
+- 게임 시작
+- 1에서 9까지 서로 다른 임의의 수 3개 생성
+- 3개의 수를 입력받기
+- 입력 확인
+    - 입력 값이 잘못된 경우, 에러 메시지 출력하고 다시 이전 단계로 이동
+- 컴퓨터와 플레이어의 숫자를 비교하고 결과를 반환
+- 반환 값에 따라
+    - 정답인 경우 게임 종료 및 재시작 버튼 표시
+        - 재시작 버튼을 누르면 재시작(게임 시작)
+    - 오답인 경우 힌트를 출력
diff --git a/index.html b/index.html
@@ -1,12 +1,26 @@
 <!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>
+    <script type="module" defer src="./src/main.js"></script>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <h1>⚾숫자 야구 게임</h1>
+    <section class="manual">
+      <p><b>1~9까지의 수</b>를 중복없이 <b>3개</b> 입력해주세요.<br>
+        올바른 예) 139<br>
+        틀린 예) 122<br>
+      </p>
+    </section>
+    <section class="input-field">
+      <input type="text" class="input-box"></input>
+      <button class="send-btn" onclick="">확인</button>
+    </section>
+    <section class="result-field">
+      <h2>📄결과</h2>
+      <h3 class="score"></h3>
+    </section>
   </body>
-</html>
+</html>
diff --git a/src/calculateScore.js b/src/calculateScore.js
@@ -0,0 +1,12 @@
+export function calculateStrikeBall(guessNum, answerNum) {
+    let strike = 0
+    let ball = 0
+    for (let i = 0; i < 3; i++){
+        if (guessNum[i] === answerNum[i]) {
+            strike++;
+        } else if (answerNum.includes(guessNum[i])) {
+            ball++;
+        }
+    }
+    return {strike, ball}
+}
diff --git a/src/initialGame.js b/src/initialGame.js
@@ -0,0 +1,10 @@
+
+export function setAnswer() {
+    const numbers = []
+    while(numbers.length < 3) {
+        const randomNum = Math.floor(Math.random() * 9) + 1
+        if (!numbers.includes(randomNum))
+            numbers.push(randomNum)
+    }
+    return numbers
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,72 @@
+import { setAnswer } from "./initialGame.js";
+import { checkNumbers } from "./validCheck.js";
+import { calculateStrikeBall } from "./calculateScore.js";
+
+let answer = []
+playGame()
+
+function playGame() {
+    answer = setAnswer()
+}
+
+const sendBtn = document.querySelector('.send-btn')
+sendBtn.addEventListener('click', () => {
+    let guessNum = document.querySelector('.input-box').value.split('').map(Number)
+
+    let valid = checkNumbers(guessNum)
+    if (valid === true) {
+        let score = calculateStrikeBall(guessNum, answer)
+        printResult(score)
+    } else {
+        alert("잘못된 값이 입력되었어요. 다시 입력해주세요.")
+    }
+});
+
+// console.log(checkNumbers(guessNum))
+
+function printResult(score) {
+    let result = ''
+    let strike = score.strike
+    let ball = score.ball
+    if (strike + ball === 0) {
+        result = '낫싱';
+    } else if (ball > 0) {
+        result += `${ball}볼 `
+    }
+    if (strike > 0){
+        if (strike === 3) {
+            result = "🎉정답을 맞추셨습니다🎉"
+            endOfGame()
+        } else {
+            result += `${strike}스트라이크`
+        }
+    }
+    document.querySelector('.score').innerText = result // 결과 표시
+}
+
+function endOfGame() {
+    const restartMsg = document.createElement('p')
+    restartMsg.innerText = "게임을 새로 시작하시겠습니까?"
+    const restartBtn = document.createElement('button')
+    restartBtn.textContent = '게임 재시작'
+    const endBtn = document.createElement('button')
+    endBtn.textContent = '게임 종료'
+
+    document.querySelector('.result-field').appendChild(restartMsg);
+    document.querySelector('.result-field').appendChild(restartBtn);
+    document.querySelector('.result-field').appendChild(endBtn);
+
+    restartBtn.addEventListener('click', function() {
+        document.querySelector('.score').innerText = ''
+        document.querySelector('.result-field').removeChild(restartMsg);
+        document.querySelector('.result-field').removeChild(restartBtn);
+        document.querySelector('.result-field').removeChild(endBtn);
+        document.querySelector('.input-box').value = ''
+        playGame();
+    })
+    endBtn.addEventListener('click', function() {
+        document.querySelector('.result-field').remove()
+        document.querySelector('.input-field').remove()
+        document.querySelector('.manual').innerText = '게임이 종료되었습니다.'
+    })
+};
diff --git a/src/validCheck.js b/src/validCheck.js
@@ -0,0 +1,9 @@
+// 유효성 체크
+export function checkNumbers(guessNum) {
+    const guessNumSet = new Set(guessNum)
+    if (guessNum.length === 3 && guessNumSet.size === 3 && !guessNum.includes(0)) {
+        return true
+    } else {
+        return false
+    }
+}