next-step · dlawlghks · May 5, 2024 · May 6, 2024 · May 6, 2024 · May 6, 2024
diff --git a/CSS/main.css b/CSS/main.css
@@ -0,0 +1,9 @@
+.result {
+    display: none;
+}
+.restart__btn {
+    display: none;
+}
+.end__btn {
+    display: none;
+}
diff --git a/README.md b/README.md
@@ -1 +1,21 @@
-# javascript-baseball-precourse
+# 숫자 야구 - 미니과제
+
+<br>
+
+## 기능 요구 사항
+
+### 기능 1
+
+-   서로 다른 3자리의 수 생성
+
+### 기능 2
+
+-   사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 재입력
+-   3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼 표시
+
+### 기능 3
+
+-   플레이어가 3개의 숫자를 입력하면 숫자에 대한 결과 출력
+-   -   숫자와 자리 모두 맞으면 스트라이크
+-   -   자리는 맞지 않지만 숫자가 포함되어 있으면 볼
+-   -   포함되어있지 않은 경우 낫싱
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>
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>숫자 야구</title>
+        <link rel="stylesheet" href="CSS/main.css" />
+        <script defer type="module" src="src/main.js"></script>
+    </head>
+    <body>
+        <div id="app">
+            <h1>⚾️ 숫자 야구 게임</h1>
+            <p><b>1~9까지의 수</b>를 중복없이 <b>3개</b> 입력해주세요.<br />올바른 예) 138<br />틀린 예) 122</p>
+            <input type="text" id="inputField" />
+            <input type="button" value="확인" id="inputButton" />
+
+            <section class="result">
+                <h3>📄 결과</h3>
+                <div class="result__text"></div>
+                <br />
+                <div class="result__question"></div>
+                <br />
+                <input type="button" value="게임 재시작" class="restart__btn" />
+                <input type="button" value="게임 종료" class="end__btn" />
+            </section>
+        </div>
+    </body>
 </html>
diff --git a/src/answerNum.js b/src/answerNum.js
@@ -0,0 +1,12 @@
+export let numLst;
+export let answer;
+
+// 3개의 숫자 랜덤으로 생성
+export function answerNumber() {
+    numLst = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+    answer = [];
+    for (let i = 0; i < 3; i++) {
+        let select = Math.floor(Math.random() * numLst.length);
+        answer[i] = numLst.splice(select, 1)[0];
+    }
+}
diff --git a/src/check.js b/src/check.js
@@ -0,0 +1,43 @@
+import { gameResult } from './gameUI.js';
+export let inputValue;
+export let strike = 0;
+export let ball = 0;
+export function inputCheck(answer) {
+    document.getElementById('inputButton').addEventListener('click', function () {
+        inputValue = document.getElementById('inputField').value;
+
+        // 3자리 숫자인지 확인
+        if (!/^\d{3}$/.test(inputValue)) {
+            alert('3자리 숫자를 입력해주세요.');
+            return;
+        }
+
+        // 중복된 숫자 확인
+        let digits = inputValue.split('');
+        let uniqueDigits = Array.from(new Set(digits));
+        if (digits.length !== uniqueDigits.length) {
+            alert('중복된 숫자를 입력할 수 없습니다.');
+            return;
+        }
+        inputValue = inputValue.split('').map(Number);
+        answerCheck(answer, inputValue);
+        document.querySelector('.result').style.display = 'block';
+        gameResult();
+    });
+}
+
+export function answerCheck(answer, inputValue) {
+    strike = 0;
+    ball = 0;
+    for (let i = 0; i < 3; i++) {
+        const isStrike = answer[i] === inputValue[i];
+        const isBall = !isStrike && inputValue.includes(answer[i]);
+
+        if (isStrike) {
+            strike++;
+        } else if (isBall) {
+            ball++;
+        }
+    }
+    return { strike, ball };
+}
diff --git a/src/gameUI.js b/src/gameUI.js
@@ -0,0 +1,25 @@
+import { strike, ball } from './check.js';
+
+export function gameResult() {
+    const resultText = document.querySelector('.result__text');
+    const resultQuestion = document.querySelector('.result__question');
+    if (strike === 3) {
+        // 정답일 때 UI 추가
+        resultText.innerHTML = '<strong>🎉정답을 맞추셨습니다🎉</strong>';
+        resultQuestion.textContent = '게임을 새로 시작하시겠습니까?';
+        document.querySelector('.restart__btn').style.display = 'block';
+        document.querySelector('.end__btn').style.display = 'none';
+    } else if (strike === 0 && ball === 0) {
+        // 낫싱일 때 UI 추가
+        resultText.innerHTML = '<strong>낫싱😥</strong>';
+        resultQuestion.textContent = '게임을 종료하시겠습니까?';
+        document.querySelector('.restart__btn').style.display = 'none';
+        document.querySelector('.end__btn').style.display = 'block';
+    } else {
+        // 정답이아닐 때 UI 추가
+        resultText.innerHTML = `<strong>${ball}볼 ${strike}스트라이크</strong>⚾️`;
+        resultQuestion.textContent = '게임을 종료하시겠습니까?';
+        document.querySelector('.restart__btn').style.display = 'none';
+        document.querySelector('.end__btn').style.display = 'block';
+    }
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,19 @@
+import { answerNumber, answer } from './answerNum.js';
+import { inputCheck, answerCheck } from './check.js';
+
+answerNumber();
+inputCheck(answer);
+
+// 버튼 이벤트
+export function restartGame() {
+    alert('새로운 게임을 시작합니다.');
+    location.reload();
+}
+
+export function endGame() {
+    alert('게임을 종료합니다.');
+    location.reload();
+}
+
+document.querySelector('.restart__btn').addEventListener('click', restartGame);
+document.querySelector('.end__btn').addEventListener('click', endGame);