diff --git a/README.md b/README.md index 8b2833c..1a4cc22 100644 --- a/README.md +++ b/README.md @@ -1 +1,15 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse + +# 구현할 기능 목록 +## 1. 프로그램 기본 구조(html) 작성 +- 제목 및 설명 +- 입력(textbox) 및 확인 버튼 +- 결과 표시 + +## 2. 게임 시작 및 진행 +- 임의의 수 생성 +- 입력 및 입력 확인 + +## 3. 정답 확인 기능 +- 게임 종료 (정답을 맞춘 경우) 및 재시작 +- 힌트 제공 (정답을 맞추지 못한 경우) diff --git a/index.html b/index.html index b021b5c..3e6de36 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,34 @@ - + 숫자 야구 게임 + + -
- +
+

⚾숫자 야구 게임

+
+

1~9까지의 수를 중복없이 3개 입력해주세요

+

올바른 예) 139

+

틀린 예) 122

+
+ +
+ + +
+ +
+

📄결과

+

+
+ +
+

게임을 새로 시작하시겠습니까?

+ + +
+
diff --git a/main.css b/main.css new file mode 100644 index 0000000..10f3cc6 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/checkInput.js b/src/checkInput.js new file mode 100644 index 0000000..b8e0319 --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/src/gameProgress.js b/src/gameProgress.js new file mode 100644 index 0000000..eb93b84 --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..b37dda4 100644 --- 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() +}); \ No newline at end of file diff --git a/src/setNumber.js b/src/setNumber.js new file mode 100644 index 0000000..0c0b6a8 --- /dev/null +++ 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 +} \ No newline at end of file