next-step · yunseong0404 · May 10, 2024 · May 10, 2024 · May 10, 2024 · May 10, 2024
diff --git a/README.md b/README.md
@@ -1 +1,14 @@
-# javascript-baseball-precourse
+# baseball-game
+
+# 구현 기능 목록
+- 3자리의 랜덤 숫자를 생성한다.
+
+- 게임 플레이어의 3자리 숫자를 입력 받는다.
+
+- 게임 플레이어 숫자의 유효성을 검사한다.
+
+- 컴퓨터의 수와 플레이어의 수를 비교하여 스트라이크와 볼을 카운트한다.
+
+- 정답을 맞춘 경우 결과를 출력한다.
+
+- 게임 종료시 재시작을 버튼 출력한다.
diff --git a/index.html b/index.html
@@ -3,10 +3,44 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>baseball-game</title>
+
+    <link rel="stylesheet" href="./src/main.css">
+    <script type="module" src="/src/main.js"></script>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <div id="app">
+      <h1>⚾숫자 야구 게임</h1>
+
+      <div class="runGame">
+        <div>
+          <div><b>1~9까지의 수</b>를 중복없이 <b>3개</b> 입력해주세요.</div>
+          <div>올바른 예&#41; 139</div>
+          <div>틀린 예&#41; 122</div>
+        </div>
+
+        <div class="form">
+          <input id="input"/>
+          <button id="submitBtn">확인</button>
+        </div>
+
+        <div class="result">
+          <h2>📄결과</h2>
+          <div id="score"></div>
+        </div>
+
+        <div class="success">
+          <h3>🎉정답을 맞추셨습니다🎉</h3>
+          <div>게임을 새로 시작하시겠습니까?</div>
+          <button id="restartBtn" onclick="location.reload();">게임 재시작</button>
+          <button id="endBtn" >게임 종료</button>
+        </div>
+      </div>
+
+      <div class="finishGame">
+        <h1>게임이 종료되었습니다😊</h1>
+      </div>
+    </div>
+
   </body>
 </html>
diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,13 @@
+.form {
+    display: flex; 
+    align-items: stretch; 
+}
+
+#input {
+    margin-right: 5px;
+}
+
+#restartBtn {
+    margin-top: 15px;
+}
+
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,48 @@
+import { checkNumber } from "./modules/checkNumber";
+import { finishGame } from "./modules/finishGame";
+import { getResult } from "./modules/getResult";
+import { makeRandom } from "./modules/makeRandom";
+import { showResult } from "./modules/showResult";
+
+const resultBoard = document.querySelector(".result");
+const successBoard = document.querySelector(".success");
+const finishBoard = document.querySelector(".finishGame");
+const inputEl = document.getElementById("input");
+
+
+successBoard.style.display = "none";
+finishBoard.style.display = "none";
+
+//컴퓨터 랜덤 수 생성
+const computer = makeRandom();
+console.log(computer);
+
+//입력 수 검사
+inputEl.addEventListener('input', e => checkNumber(e, inputEl));
+
+//숫자 제출
+document.getElementById("submitBtn").addEventListener("click", function() {
+
+        if(inputEl.value.length == 3){
+            const score = getResult(computer, inputEl.value);
+            const result = showResult(score);
+
+            if(score[0] != 3){
+                document.getElementById("score").innerHTML += `<div>${inputEl.value} : ${result}</div>`;
+            } else {
+                resultBoard.style.display = "none";
+                successBoard.style.display = "block";
+            }
+        } else {
+            alert("세자리 숫자를 입력해주세요.");
+        }
+
+})
+
+
+//프로그램 완전히 종료
+document.getElementById("endBtn").addEventListener("click", function() {
+    finishGame();
+});
+
+
diff --git a/src/modules/checkNumber.js b/src/modules/checkNumber.js
@@ -0,0 +1,31 @@
+
+function checkNumber(e, inputEl) {
+    let content = inputEl.value;
+    let lastValue = e.data;
+
+
+    if( isNaN(lastValue) ){
+        alert("숫자를 입력해 주세요.");
+        inputEl.value = content.slice(0, -1);
+        return;
+    }
+    else if( content.length > 3 ){
+        alert("세자리 수를 입력해 주세요.");
+        inputEl.value = content.slice(0, -1);
+        return;
+    }
+    else if( content.slice(0, -1).includes(lastValue) ){
+        alert("중복되지 않는 수를 입력해 주세요.");
+        inputEl.value = content.slice(0, -1);
+        return;
+    }
+    else if( lastValue == 0 ){
+        alert("1~9까지의 수를 입력해 주세요.");
+        inputEl.value = content.slice(0, -1);
+        return;
+    }
+
+    return true;  
+}
+
+export { checkNumber };
diff --git a/src/modules/finishGame.js b/src/modules/finishGame.js
@@ -0,0 +1,10 @@
+function finishGame() {
+    const runBoard = document.querySelector(".runGame");
+    const finishBoard = document.querySelector(".finishGame");
+
+    // window.close();
+    runBoard.style.display = "none";
+    finishBoard.style.display = "block";
+}
+
+export { finishGame };
diff --git a/src/modules/getResult.js b/src/modules/getResult.js
@@ -0,0 +1,25 @@
+function getResult(computer, userNum) {
+
+    let strike = 0;
+    let ball = 0;
+    const userArr = userNum.split('').map(Number);
+
+    //count strike
+    for(let i=0; i<userArr.length; i++){
+        if(userArr[i] === computer[i]){
+            strike += 1;
+        }
+    }
+
+    //count ball
+    for(let i=0; i<userArr.length; i++){
+        if(computer.includes(userArr[i])){
+            ball += 1;
+        }
+    }
+    ball -= strike;
+
+    return[strike, ball];
+}
+
+export { getResult };
diff --git a/src/modules/makeRandom.js b/src/modules/makeRandom.js
@@ -0,0 +1,16 @@
+//랜덤 수 생성 함수
+function makeRandom() {
+    let computer = [];
+
+    while(computer.length <3){
+        let random = Math.floor(Math.random() * 9) + 1;
+
+        if(!computer.includes(random)){
+            computer.push(random);
+        }
+    }
+
+    return computer;
+}
+
+export { makeRandom };
diff --git a/src/modules/showResult.js b/src/modules/showResult.js
@@ -0,0 +1,13 @@
+function showResult(resultArr) {
+    if(resultArr[0]==0 && resultArr[1]==0){
+        return "낫싱";
+    } 
+    else if(resultArr[1] == 0) {
+        return (resultArr[0] + "스트라이크");
+    } else {
+        return (resultArr[1] + "볼 " + resultArr[0] + "스트라이크");
+    }
+
+}
+
+export { showResult };