next-step · faddishcorn · May 5, 2024
diff --git a/README.md b/README.md
@@ -1 +1,6 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+사용자의 입력을 받아서 유효성 검사
+정답을 생성하는 기능
+사용자 입력과 정답을 비교하여 스트라이크 및 볼 계산
+게임 결과를 화면에 표시하는 기능
+게임을 다시 시작할 수 있는 기능
diff --git a/index.html b/index.html
@@ -1,12 +1,27 @@
-<!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>
-</html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="module" src="./src/main.js"></script>
+  <title>숫자야구</title>
+</head>
+<body>
+  <h1>⚾숫자 야구 게임</h1>
+  <p><b>1~9까지의 수</b>를 중복없이 <b>3개</b> 입력해주세요.</p>
+  <p>올바른 예) 139 </p>
+  <p>틀린 예) 122 </p>
+  <form id="form">
+    <input type="text" id="input">
+    <button>확인</button>
+  </form>
+  <p style="font-size: 18px; font-weight: bold;">📄결과</p>
+  <div id="logs"></div>
+  <div id="restart" style="display: none;">
+    게임을 새로 시작하시겠습니까?
+    <button id="restartButton" style="display: block">게임 재시작</button>
+  </div>
+  <div id="logs"></div>
+
+</body>
+</html>
diff --git a/src/counting.js b/src/counting.js
@@ -0,0 +1,5 @@
+export function counting (index, score, i){
+  if (index === -1) {return;} //일치하는 정답요소가 없다면 탈출
+  if (index === i) {score.strike += 1;} //같은 위치에 있다면 스트라이크 추가
+  else {score.ball += 1;} //아니라면 볼 추가    
+}
diff --git a/src/generateNumber.js b/src/generateNumber.js
@@ -0,0 +1,15 @@
+export function generateNumbers(){
+  let numbers = []; //숫자를 담을 배열
+  for (let n = 1; n <= 9; n++) {
+    numbers.push(n); //1~9까지의 숫자 배열을 생성
+}
+
+  let answer = []; //정답을 담을 배열 
+  for (let n = 0; n <= 2; n++) { //3번 반복
+    const index = Math.floor(Math.random() * numbers.length);
+    answer.push(numbers[index]); //배열의 길이에 따른 범위 내에서 난수 생성
+    numbers.splice(index, 1); //중복 방지를 위해 numbers에서 제거
+  }
+
+  return answer; //정답 반환
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,69 @@
+import { generateNumbers } from "./generateNumber.js"; //번호 생성 함수 호출
+import { counting } from "./counting.js";
+
+const $input = document.querySelector('#input');
+const $form = document.querySelector('#form');
+const $logs = document.querySelector('#logs');
+const $restartButton = document.querySelector('#restartButton');
+const $restart = document.querySelector('#restart');
+
+let answer = generateNumbers(); //정답 생성 
+console.log(answer); //콘솔에 정답 출력
+
+let tries = []; //시도한 수들 
+function checkInput(input) {
+  if (input.length !== 3) { //3자리 숫자가 아니라면
+    return alert('3자리 숫자를 입력해 주세요.');
+  }
+  if (new Set(input).size !== 3) { //중복된 수가 들어갔다면 
+    return alert('중복되지 않게 입력해주세요');
+  }
+  if (tries.includes(input)) { //이미 시도했던 값이라면
+    return alert('이미 시도한 값입니다');
+  }
+
+  return true;
+}
+
+$form.addEventListener('submit', (event) => {
+  event.preventDefault(); //페이지 새로고침 방지 
+  const value = $input.value; //입력값 할당
+  $input.value = ''; //입력창 초기화
+  const valid = checkInput(value); //입력값이 유효한지 확인
+  if (!valid) return; //유효하지 않다면 중단 후 종료(return)
+  if (answer.join('') === value) { //문자열 결합 및 정답 확인
+    displayResult('🎉정답을 맞추셨습니다!🎉'); //정답이 맞다면 출력
+    document.getElementById('restart').style.display = 'block'; //restart버튼이 보이게
+    $input.disabled = true; //정답을 맞추면 입력창 비활성화 
+    return;
+  }
+
+  let score = {strike: 0, ball: 0}; //스트라이크, 볼 개수 초기화
+
+  for (let i = 0; i < answer.length; i++) { //정답의 길이만큼 반복
+    const index = value.indexOf(answer[i]); //입력값에 정답요소가 있는지 확인, 없으면 -1반환
+    counting(index, score, i);
+  }
+
+  if (score.strike === 0 && score.ball === 0){ //0스트라이크 0볼일 때
+    displayResult('Nothing(낫싱)'); //낫띵 출력
+  } else { //낫싱이 아니라면
+    displayResult(`${value}: ${score.strike} 스트라이크 ${score.ball} 볼`); //스트라이크, 볼 출력
+  }
+  tries.push(value); //시도한 값들을 tries배열에 추가한다 
+});
+
+function displayResult(result) {
+  $logs.textContent = result; // 이전 결과를 삭제하고 새로운 결과로 대체
+}
+
+function restartGame() {
+ answer = generateNumbers(); //새로운 수를 answer에 할당
+ tries = []; //시도했던 기록 초기화
+ $logs.textContent = ''; //입력창 초기화
+ $restart.style.display='none'; //재시작 버튼 숨기기
+  $input.disabled = false; //비활성화된 입력창 다시 활성화
+  console.log(answer); //콘솔에 다시 정답출력
+}
+
+$restartButton.addEventListener('click', restartGame); //재시작 버튼 클릭 시 restartGame호출