next-step · mj030 · May 5, 2024 · May 5, 2024 · May 5, 2024 · May 5, 2024
diff --git a/README.md b/README.md
@@ -1 +1,21 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+구현할 기능
+-----
+1.  1부터 9까지 서로 다른 수로 이루어진 3자리의 수를 맞추는 게임을 만들어야함.
+- 같은 수가 같은 자리에 있으면 `스트라이크`, <br>
+다른 자리에 있으면 `볼`, <br>
+같은 수가 전혀 없으면 `낫싱`이란 힌트를 얻고, <br>
+그 힌트를 이용해서 먼저 상대방(컴퓨터)의 수를 맞추면 승리한다.<br>
+
+![예측 예시](./baseballexample.png)
+
+- 위 숫자 야구 게임에서 상대방의 역할을 컴퓨터가 한다. <br>
+컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다. <br>
+게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력하고, 컴퓨터는 입력한 숫자에 대한 결과를 출력한다.
+- 이 같은 과정을 반복해 컴퓨터가 선택한 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼이 표시된다.
+- 게임을 종료한 후 게임을 다시 시작하거나 완전히 종료할 수 있다.
+- 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 그 부분부터 입력을 다시 받는다.<br>
+
+살행 결과
+-----
+![결과 예시](./baseballresult.png)
diff --git a/baseballexample.png b/baseballexample.png
diff --git a/baseballresult.png b/baseballresult.png
diff --git a/index.html b/index.html
@@ -1,12 +1,31 @@
-<!doctype html>
+<!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>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>⚾숫자 야구 게임🥎</title>
+</head>
+
+<body>
+  <div id="app"></div>
+    <h1>⚾ 숫자 야구 게임</h1>
+    <p>
+      <!-- 게임 규칙 설명 -->
+      <strong>1~9까지의 수</strong>를 중복없이
+      <strong>3개</strong> 입력해주세요. <br>
+      올바른 예) 139 <br>
+      틀린 예) 122
+    </p>
+     <!-- 숫자 입력창  -->
+    <form>
+      <input type="text" id="input">
+      <button id="button"> 확인 </button>
+    </form>
+     <!-- 결과 확인 -->
+     <h3>📄 결과</h3>
+    <div id="result"></div>
+    <script type="module" src="./src/main.js"></script>
+</body>
+
 </html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,90 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    let answer = []; // 정답 배열 초기화
+    let numbers = []; // 1~9까지 숫자 배열 초기화
+
+    // 1부터 9까지의 숫자를 배열에 추가
+    for (let i = 1; i <= 9; i++) {
+        numbers.push(i);
+    }
+
+    // 정답 배열에 1부터 9까지의 숫자 중에서 무작위로 선택된 3개의 숫자 선택
+    for (let i = 0; i < 3; i++) {
+        let index = Math.floor(Math.random() * numbers.length);
+        answer.push(numbers[index]);
+        numbers.splice(index, 1); // 선택된 숫자는 배열에서 제거
+    }
+    console.log(answer); // 정답 확인용 
+
+    // 변수 선언
+    const input = document.querySelector("#input"); // 인풋창
+    const button = document.querySelector("#button"); // 제출 버튼
+    const result = document.querySelector("#result"); // 결과
+
+    // 숫자를 제대로 입력했는지 확인하고 결과를 출력하는 함수
+    button.addEventListener("click", (e) => {
+        e.preventDefault(); // 버튼의 기본 동작 방지
+
+        let count = 0; // 정답 맞춘 숫자 개수 초기화
+        let strike = 0; // 스트라이크 개수 초기화
+        let ball = 0; // 볼 개수 초기화
+        let inputValue = parseInt(input.value); // 인풋값을 숫자로 변환
+        let strInputValue = inputValue.toString().split("").map(Number); // 인풋값을 문자열로 변환 후 배열로 분리
+        let duplicatedInput = new Set(strInputValue); // 중복되는 숫자 확인을 위해 Set 객체 생성
+
+        // 입력값과 정답 비교하여 스트라이크와 볼 개수 계산
+        for (let i = 0; i < answer.length; i++) {
+            let index = strInputValue.indexOf(answer[i]); // 입력값 배열에서 정답의 숫자 인덱스 찾기
+            if (answer[i] == strInputValue[i]) { // 숫자와 위치가 모두 일치하는 경우
+                count++; // 정답 맞춘 숫자 개수 증가
+            }
+
+            if (index > -1) { // 입력값 배열에서 정답의 숫자를 찾은 경우
+                if (index == i) {
+                    strike++; // 위치도 일치하는 경우 스트라이크 개수 증가
+                } else {
+                    ball++; // 위치는 다르지만 숫자는 일치하는 경우 볼 개수 증가
+                }
+            }
+        }
+
+        // 입력값이 제대로 되었는지 확인하고 결과를 출력
+        if (isNaN(inputValue) || inputValue == "") { // 입력값이 숫자가 아닌 경우
+            alert("숫자를 입력하세요");
+        } else if (strInputValue.length !== 3) { // 입력값이 3자리 숫자가 아닌 경우
+            alert("3자리 숫자를 입력하세요");
+        } else if (duplicatedInput.size !== 3) { // 중복되는 숫자가 있는 경우
+            alert("중복되지 않게 숫자를 입력하세요");
+        } else if (count == 3) { // 정답을 맞춘 경우
+          result.innerHTML = `<h3>🎉 정답을 맞추셨습니다. 🎉</h3>
+          <p>게임을 새로 시작하시겠습니까?</p>`;
+
+          // 재시작 버튼 생성 및 초기화
+          const restartButton = document.createElement('button');
+          restartButton.id = 'game-restart-button';
+          restartButton.textContent = '재시작';
+          result.appendChild(restartButton);
+
+          // 재시작 버튼 클릭 시 초기화
+          restartButton.addEventListener('click', () => {
+              input.value = ""; // 인풋창 초기화
+              result.innerHTML = ""; // 결과창 초기화
+
+              answer = []; // 정답 배열 초기화
+              for (let i = 1; i <= 9; i++) {
+                  numbers.push(i);
+              }
+              for (let i = 0; i < 3; i++) {
+                  let index = Math.floor(Math.random() * numbers.length);
+                  answer.push(numbers[index]);
+                  numbers.splice(index, 1);
+              }
+              console.log(answer); // 정답 확인용
+          });
+      } else if (ball === 0 && strike === 0) { // 낫싱인 경우 (아웃인 경우)
+          result.append(inputValue + ' : ' + "낫싱", document.createElement('br'));
+      } else { // 스트라이크 또는 볼이 있는 경우
+          result.append(inputValue + ' : ' + strike + " 스트라이크 " + ball + " 볼 ", document.createElement('br'));      
+      }
+    });
+  });