next-step · faddishcorn · May 10, 2024 · May 10, 2024 · May 10, 2024 · May 10, 2024
diff --git a/README.md b/README.md
@@ -1 +1,34 @@
-# javascript-baseball-precourse
+# 1회차 미니과제 - 숫자야구게임 만들기
+## 구현 기능
+### 정답 생성 (generateNumbers)
+*1~9사이 숫자를 중복 없이 3자리수를 만듭니다.
+### 입력 처리 (handleSubmit)
+*사용자가 값을 입력 후 제출 시에 처리하는 함수입니다.
+### 게임 재시작 (restartGame)
+*사용자가 정답을 맞춘 후 게임 초기화 및 재시작을 가능케 해주는 기능입니다.
+### 정답 유효성 확인 (checkInput)
+*사용자가 입력한 값이 유효한지 검사합니다.
+### 중복 제거 (removeDuplicates)
+*값에서 중복값을 제거 후 반환합니다.
+### 0값 제거 (removeZero)
+*값에서 0값을 제거 후 반환합니다.
+### 결과 출력 (displayLogText)
+*결과 부분에 값을 출력해줍니다.
+### 결과 계산 (counting)
+*스트라이크 및 볼을 계산하여 calculateScore에 전달해줍니다.
+### 계산값 합산 (calculateScore)
+*총 몇 스트라이크 몇 볼인지 계산합니다.
+### 점수 출력 (displayScore)
+*총 몇 스트라이크 몇 볼인지 결과부분에 출력해줍니다.
+
+
+## 추가사항
+*index.html에 웰컴 스크린을, game.html에 본 게임을 구현하였습니다.
+
+*첫 시작은 index.html을 통해 이루어집니다.
+
+*본 게임 시작 전 웰컴스크린이 보입니다. 게임시작 버튼을 통해 본 게임에 진입합니다.
+
+*중복 및 초과된 값을 입력 시 중복값 및 초과된 값을 제거하고 남은 값은 입력창에 남겨둠으로써 잘못된 부분부터 다시 입력받을 수 있습니다.
+
+*정답을 맞추면 게임종료 버튼을 통해 게임을 완전히 종료할 수 있고 완전히 종료 시 다시 웰컴스크린으로 돌아갑니다.
diff --git a/game.html b/game.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ko">
+<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 id="confirmButton">확인</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; margin-top: 20px;">게임 재시작</button >
+    <button id="exitButton" style="margin-top: 20px;">게임 종료</button>
+    <script>
+    document.getElementById('exitButton').addEventListener('click',()=> {
+      window.location.href="index.html";
+    })
+  </script>
+  </div>
+  <div id="logs"></div>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -1,12 +1,34 @@
-<!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>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>숫자야구</title>
+  <style>
+    .container {
+        display: flex;
+        justify-content: center; 
+        align-items: center; 
+        height: 100vh; 
+        text-align: center;
+    }
+    #mainStart {
+      width: 100px;
+      height: 35px;
+      display: inline-block;
+    }   
+</style>
+</head>
+<body>
+  <div class="container">
+    <h1>⚾숫자 야구 게임에 오신 것을 환영합니다.<br>
+    <button id="mainStart">게임 시작</button>
+    </h1>
+    <script>
+      document.getElementById('mainStart').addEventListener('click',()=> {
+        window.location.href="game.html";
+      })
+    </script>  
+  </div>
+</body>
+</html>
diff --git a/src/calculateScore.js b/src/calculateScore.js
@@ -0,0 +1,12 @@
+//총 스트라이크 및 볼 수 합산계산 
+import { counting } from "./counting.js";
+import { answer } from "./main.js";
+
+export function calculateScore(value) {
+  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);
+  }
+  return score;
+}
diff --git a/src/checkInput.js b/src/checkInput.js
@@ -0,0 +1,34 @@
+//잘못된 시도인지 검사 
+import { removeDuplicates } from "./removeDuplicates.js";
+import { $input } from './main.js';
+import { tries } from "./main.js";
+import { removeZero } from "./removeZero.js";
+
+export function checkInput(input) {
+  if (input.includes('0')){
+    $input.value=removeZero(input);
+    return alert('1~9사이 숫자를 입력하세요');
+  }
+  if (input.length > 3) { 
+    let temp;
+    temp=input.slice(0,3);
+    $input.value=removeDuplicates(temp);
+
+    return alert('중복되지 않게 3자리 숫자를 입력해 주세요.');
+  }
+  if (input.length !== 3) {
+    $input.value=removeDuplicates(input);
+    return alert('중복되지 않게 3자리 숫자를 입력해 주세요.');
+  }
+  if (new Set(input).size !== 3) { 
+    $input.value=removeDuplicates(input); 
+
+    return alert('중복되지 않게 3자리 숫자를 입력해주세요');
+  }
+  if (tries.includes(input)) { 
+    $input.value='';
+    return alert('이미 시도한 값입니다');
+  }
+
+  return true;
+}
diff --git a/src/counting.js b/src/counting.js
@@ -0,0 +1,6 @@
+// 스트라이크 및 볼 계산 
+export function counting (index, score, i){
+  if (index === -1) {return;} //일치하는 정답요소가 없다면 탈출
+  if (index === i) {score.strike += 1;} //같은 위치에 있다면 스트라이크 추가
+  else {score.ball += 1;} //아니라면 볼 추가    
+}
diff --git a/src/displayLogText.js b/src/displayLogText.js
@@ -0,0 +1,6 @@
+//결과값 출력
+import { $logs } from "./main.js";
+
+export function displayLogText(text) { // 매개변수로 전달된 값을 출력한다 
+  $logs.textContent = text; 
+}
diff --git a/src/displayScore.js b/src/displayScore.js
@@ -0,0 +1,10 @@
+//스트라이크 및 볼 출력
+import { displayLogText } from "./displayLogText.js";
+
+export function displayScore(value, score) {
+  if (score.strike === 0 && score.ball === 0){ //0스트라이크 0볼일 때
+    displayLogText('Nothing(낫싱)'); //낫띵 출력
+  } else { //낫싱이 아니라면
+    displayLogText(`${value}: ${score.strike} 스트라이크 ${score.ball} 볼`); //스트라이크, 볼 출력
+  }
+}
diff --git a/src/generateNumbers.js b/src/generateNumbers.js
@@ -0,0 +1,16 @@
+// 번호생성
+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,52 @@
+import { generateNumbers } from "./generateNumbers.js"; 
+import { checkInput } from "./checkInput.js";
+import { calculateScore } from "./calculateScore.js";
+import { displayScore } from "./displayScore.js";
+import { displayLogText } from "./displayLogText.js";
+
+//DOM 요소
+export const $input = document.querySelector('#input');
+export const $logs = document.querySelector('#logs');
+const $form = document.querySelector('#form');
+const $restartButton = document.querySelector('#restartButton');
+const $restart = document.querySelector('#restart');
+const $confirmButton = document.querySelector('#confirmButton');
+
+//정답 생성 및 시도값 저장변수 선언
+export let answer = generateNumbers(); 
+export let tries = []; 
+
+//정답제출버튼 및 재시작 버튼 클릭 시 
+$form.addEventListener('submit', handleSubmit);
+$restartButton.addEventListener('click', restartGame);
+
+// 정답 입력 처리 함수
+function handleSubmit(event) {
+  event.preventDefault();
+  const value = $input.value;
+  const valid = checkInput(value);
+
+  if (!valid) return; //잘못된 값 입력 시 
+
+  if (answer.join('')===value){ //정답 입력 시
+    displayLogText('🎉정답을 맞추셨습니다!🎉');
+    document.getElementById('restart').style.display='block';
+    $input.disabled=true;
+    $confirmButton.disabled=true;
+    return;
+  }
+  const score = calculateScore(value); //유효한 시도시
+  displayScore(value, score);
+  tries.push(value); 
+}
+
+// 게임 재시작 
+function restartGame() {
+  answer = generateNumbers(); 
+  tries = []; 
+  $logs.textContent = ''; 
+  $restart.style.display='none'; 
+   $input.disabled = false; 
+   $confirmButton.disabled=false;
+   $input.value='';
+ }
diff --git a/src/removeDuplicates.js b/src/removeDuplicates.js
@@ -0,0 +1,16 @@
+//중복 제거 함수 
+export function removeDuplicates(input) { 
+  let result = '';
+
+  for (let i = 0; i < input.length; i++) {
+    //현재 숫자가 이전 숫자와 중복되는지 확인
+    if (i === 0 || input[i] !== input[i - 1] && input[i] !== input[i - 2]) {
+        //중복되지 않으면 결과에 추가
+        result += input[i];
+    } else {
+        //중복되면 중단
+        break;
+    }
+  }
+  return result;
+}
diff --git a/src/removeZero.js b/src/removeZero.js
@@ -0,0 +1,9 @@
+//0 제거 함수 
+export function removeZero(input){
+  const zeroIndex=input.indexOf('0');
+  let newValue;
+  if(zeroIndex !== -1) {
+    newValue=input.substring(0, zeroIndex);
+  }
+  return newValue;
+}