next-step · JYN523 · May 6, 2024 · May 6, 2024 · May 6, 2024 · May 6, 2024
diff --git a/README.md b/README.md
@@ -1 +1,15 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+
+# 구현할 기능 목록
+## 1. 프로그램 기본 구조(html) 작성
+- 제목 및 설명
+- 입력(textbox) 및 확인 버튼
+- 결과 표시
+
+## 2. 게임 시작 및 진행
+- 임의의 수 생성
+- 입력 및 입력 확인
+
+## 3. 정답 확인 기능
+- 게임 종료 (정답을 맞춘 경우) 및 재시작
+- 힌트 제공 (정답을 맞추지 못한 경우)
diff --git a/index.html b/index.html
@@ -3,10 +3,34 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>숫자 야구 게임</title>
+    <link rel="stylesheet" href="./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>&#x26BE;숫자 야구 게임</h1>
+        <div class="description">
+          <P>1~9까지의 수를 중복없이 3개 입력해주세요</P>
+          <p>올바른 예&#41; 139</p>
+          <p>틀린 예&#41; 122</p>
+        </div>
+
+        <div class="answer-input">
+          <input type="number" id="answer">
+          <button id="check-btn">확인</button>
+        </div>
+
+        <div class="result-print">
+          <h2>&#x1F4C4;결과</h2>
+          <p id="result"></p>
+        </div>
+
+        <div class="restart">
+          <p>게임을 새로 시작하시겠습니까?</p>
+          <button id="restart-btn">게임 재시작</button>
+          <button id="exit-btn">게임 종료</button>
+        </div>
+      </div>
   </body>
 </html>
diff --git a/main.css b/main.css
@@ -0,0 +1,19 @@
+h1 {
+    font-size: 30px;
+}
+h2 {
+    font-size: 20px;
+}
+
+.description {
+    margin: 30px 0 20px;
+    font-weight: bold;
+    line-height: 20%;
+}
+.result-print {
+    display: none;
+    font-weight: bold;
+}
+.restart {
+    display: none;
+}
diff --git a/src/checkInput.js b/src/checkInput.js
@@ -0,0 +1,9 @@
+export default function checkInput(answer) {
+    if (answer.length > 3)
+        return false
+    if (answer.includes('0'))
+        return false
+    if ([...new Set(answer)].join('').length != answer.length)
+        return false
+    return true
+}
diff --git a/src/gameProgress.js b/src/gameProgress.js
@@ -0,0 +1,33 @@
+let strike
+let ball
+
+export function markAnswer(answer, number) {
+    const number_digit = number.toString()
+    strike = 0
+    ball = 0
+
+    for(let i=0; i<3; i+=1) {
+        if(number_digit[i] == answer[i])
+            strike += 1
+        else if(number_digit.includes(answer[i]))
+            ball += 1
+    }
+
+    if(strike == 3)
+        return true
+    else
+        return false
+}
+
+export function makeHint() {
+    let content = ""
+
+    if(ball != 0)
+        content += ball+"볼 "
+    if(strike != 0)
+        content += strike+"스트라이크"
+    if(ball == 0 && strike == 0)
+        content = "낫싱"
+
+    return content
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,53 @@
+import setNumber from "./setNumber.js"
+import checkInput from "./checkInput.js"
+import {makeHint, markAnswer} from "./gameProgress.js"
+
+let number = setNumber();
+
+const checkBtn = document.getElementById("check-btn")
+const restart = document.querySelector(".restart")
+const restartBtn = document.getElementById("restart-btn")
+const resultPrint = document.querySelector(".result-print")
+const exitBtn = document.getElementById("exit-btn")
+const answerInput = document.getElementById("answer")
+let answer = ""
+
+answerInput.addEventListener("input", function () {
+    if(!checkInput(answerInput.value)) {
+        alert("1~9까지의 수를 중복없이 3개 입력해주세요.")
+        answerInput.value = answer
+    }
+    else {
+        answer = answerInput.value
+    }
+})
+
+checkBtn.addEventListener("click", function () {
+    if(answer.length != 3) {
+        alert("1~9까지의 수를 중복없이 3개 입력해주세요.")
+    }
+    else {
+        resultPrint.style.display = "block"
+        const result = document.getElementById("result")
+
+        if(markAnswer(answer, number)) {
+            result.textContent = "🎉정답을 맞추셨습니다🎉"
+            restart.style.display = "block"
+        }
+        else {
+            result.textContent = makeHint()
+        }
+    }
+});
+
+restartBtn.addEventListener("click", function () {
+    restart.style.display = "none"
+    resultPrint.style.display = "none"
+    document.getElementById("answer").value = ""
+    number = setNumber()
+});
+
+exitBtn.addEventListener("click", function () {
+    console.log("exit")
+    window.close()
+});
diff --git a/src/setNumber.js b/src/setNumber.js
@@ -0,0 +1,17 @@
+export default function setNumber() {
+    let a, b, c
+
+    a = rand()
+    do {
+        b = rand()
+    } while (b == a)
+    do {
+        c = rand()
+    } while (c == a || c == b)
+
+    return a * 100 + b * 10 + c
+}
+
+function rand() {
+    return Math.floor(Math.random() * 9) + 1
+}