From 8faf130770f0638406ecf8deb89a6716a001b7f8 Mon Sep 17 00:00:00 2001 From: JYN523 <87629686+JYN523@users.noreply.github.com> Date: Mon, 6 May 2024 09:43:58 +0900 Subject: [PATCH 01/10] Update README.md --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) 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. 정답 확인 기능 +- 게임 종료 (정답을 맞춘 경우) 및 재시작 +- 힌트 제공 (정답을 맞추지 못한 경우) From d3de257a0720cc0591c81d4fd6149f5a2f9ca68d Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 6 May 2024 09:47:01 +0900 Subject: [PATCH 02/10] style(main): format --- index.html | 29 ++++++++++++++++++++++++++--- main.css | 19 +++++++++++++++++++ 2 files changed, 45 insertions(+), 3 deletions(-) create mode 100644 main.css diff --git a/index.html b/index.html index b021b5c..579d9f6 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,33 @@ - + 숫자 야구 게임 + + -
- +
+

⚾숫자 야구 게임

+
+

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 From 40ffbace8a1f6c3d16428f34dd0dc5bb22e1118f Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 6 May 2024 09:57:15 +0900 Subject: [PATCH 03/10] feat(main): add game start & input check --- index.html | 2 +- src/main.js | 42 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 579d9f6..b0afcb8 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@

⚾숫자 야구 게임

- +
diff --git a/src/main.js b/src/main.js index e69de29..b32cfb1 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,42 @@ +let number; + +setNumber() + + +function setNumber() { + let a, b, c + + a = rand() + do { + b = rand() + } while (b == a) + do { + c = rand() + } while (c == a || c == b) + + number = a * 100 + b * 10 + c +} + +function rand() { + return Math.floor(Math.random() * 9) + 1 +} + +const checkBtn = document.getElementById('check-btn') + +checkBtn.addEventListener('click', function () { + const answer = document.getElementById('answer').value + if(!checkInput(answer)) { + alert('1~9까지의 수를 중복없이 3개 입력해주세요.') + } + else { + + } +}); + +function checkInput(answer) { + if (answer.length != 3) + return false + if (answer[0] == answer[1] || answer[1] == answer[2] || answer[2] == answer[0]) + return false + return true +} \ No newline at end of file From 2955d76534d96833b226efb6eadc23fb3cfbd3b7 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 6 May 2024 10:40:47 +0900 Subject: [PATCH 04/10] feat(main): add answer mark & game restart --- src/main.js | 47 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/src/main.js b/src/main.js index b32cfb1..f669e51 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,9 @@ let number; +let strike; +let ball; setNumber() - function setNumber() { let a, b, c @@ -22,6 +23,9 @@ function rand() { } const checkBtn = document.getElementById('check-btn') +const restart = document.querySelector('.restart') +const restartBtn = document.getElementById('restart-btn') +const resultPrint = document.querySelector('.result-print') checkBtn.addEventListener('click', function () { const answer = document.getElementById('answer').value @@ -29,7 +33,26 @@ checkBtn.addEventListener('click', function () { alert('1~9까지의 수를 중복없이 3개 입력해주세요.') } else { + markAnswer(answer) + + resultPrint.style.display = 'block' + const result = document.getElementById('result') + + if(strike == 3) { + result.textContent = "🎉정답을 맞추셨습니다🎉" + restart.style.display = 'block' + } + else { + let content = "" + if(ball != 0) + content += ball+"볼 " + if(strike != 0) + content += strike+"스트라이크" + if(ball == 0 && strike == 0) + content = "낫싱" + result.textContent = content + } } }); @@ -39,4 +62,24 @@ function checkInput(answer) { if (answer[0] == answer[1] || answer[1] == answer[2] || answer[2] == answer[0]) return false return true -} \ No newline at end of file +} + +function markAnswer(answer) { + 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 + } +} + +restartBtn.addEventListener('click', function () { + restart.style.display = 'none' + resultPrint.style.display = 'none' + document.getElementById('answer').value = '' + setNumber() +}); \ No newline at end of file From 10b67cc79c1664bc1e522e33ab7c3ce6b53a7b89 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 6 May 2024 10:45:27 +0900 Subject: [PATCH 05/10] fix(main): show hint - depth --- src/main.js | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/main.js b/src/main.js index f669e51..16b4b4a 100644 --- a/src/main.js +++ b/src/main.js @@ -43,19 +43,24 @@ checkBtn.addEventListener('click', function () { restart.style.display = 'block' } else { - let content = "" - - if(ball != 0) - content += ball+"볼 " - if(strike != 0) - content += strike+"스트라이크" - if(ball == 0 && strike == 0) - content = "낫싱" - result.textContent = content + result.textContent = makeHint() } } }); +function makeHint() { + let content = "" + + if(ball != 0) + content += ball+"볼 " + if(strike != 0) + content += strike+"스트라이크" + if(ball == 0 && strike == 0) + content = "낫싱" + + return content +} + function checkInput(answer) { if (answer.length != 3) return false From b7e247f3de3e316046025d3bc6a7086a12856801 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 6 May 2024 10:48:32 +0900 Subject: [PATCH 06/10] fix(main): fix(main): input check - enter 0 --- src/main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/main.js b/src/main.js index 16b4b4a..6510f85 100644 --- a/src/main.js +++ b/src/main.js @@ -66,6 +66,8 @@ function checkInput(answer) { return false if (answer[0] == answer[1] || answer[1] == answer[2] || answer[2] == answer[0]) return false + if (answer[0] == 0 || answer[1] == 0 || answer[2] == 0) + return false return true } From 4bf048e7e3fa6a2502a825f276380598063b8b1b Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 10 May 2024 17:06:43 +0900 Subject: [PATCH 07/10] style(main): modularization & quotation mark unification --- src/checkInput.js | 9 +++++ src/gameProgress.js | 33 ++++++++++++++++ src/main.js | 96 ++++++++++----------------------------------- src/setNumber.js | 17 ++++++++ 4 files changed, 79 insertions(+), 76 deletions(-) create mode 100644 src/checkInput.js create mode 100644 src/gameProgress.js create mode 100644 src/setNumber.js diff --git a/src/checkInput.js b/src/checkInput.js new file mode 100644 index 0000000..f3a7ef7 --- /dev/null +++ b/src/checkInput.js @@ -0,0 +1,9 @@ +export default function checkInput(answer) { + if (answer.length != 3) + return false + if (answer[0] == answer[1] || answer[1] == answer[2] || answer[2] == answer[0]) + return false + if (answer[0] == 0 || answer[1] == 0 || answer[2] == 0) + 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 6510f85..9417dd0 100644 --- a/src/main.js +++ b/src/main.js @@ -1,46 +1,26 @@ -let number; -let strike; -let ball; +import setNumber from "./setNumber.js" +import checkInput from "./checkInput.js" +import {makeHint, markAnswer} from "./gameProgress.js" -setNumber() +let number = setNumber(); -function setNumber() { - let a, b, c - - a = rand() - do { - b = rand() - } while (b == a) - do { - c = rand() - } while (c == a || c == b) +const checkBtn = document.getElementById("check-btn") +const restart = document.querySelector(".restart") +const restartBtn = document.getElementById("restart-btn") +const resultPrint = document.querySelector(".result-print") - number = a * 100 + b * 10 + c -} - -function rand() { - return Math.floor(Math.random() * 9) + 1 -} - -const checkBtn = document.getElementById('check-btn') -const restart = document.querySelector('.restart') -const restartBtn = document.getElementById('restart-btn') -const resultPrint = document.querySelector('.result-print') - -checkBtn.addEventListener('click', function () { - const answer = document.getElementById('answer').value +checkBtn.addEventListener("click", function () { + const answer = document.getElementById("answer").value if(!checkInput(answer)) { - alert('1~9까지의 수를 중복없이 3개 입력해주세요.') + alert("1~9까지의 수를 중복없이 3개 입력해주세요.") } else { - markAnswer(answer) + resultPrint.style.display = "block" + const result = document.getElementById("result") - resultPrint.style.display = 'block' - const result = document.getElementById('result') - - if(strike == 3) { + if(markAnswer(answer, number)) { result.textContent = "🎉정답을 맞추셨습니다🎉" - restart.style.display = 'block' + restart.style.display = "block" } else { result.textContent = makeHint() @@ -48,45 +28,9 @@ checkBtn.addEventListener('click', function () { } }); -function makeHint() { - let content = "" - - if(ball != 0) - content += ball+"볼 " - if(strike != 0) - content += strike+"스트라이크" - if(ball == 0 && strike == 0) - content = "낫싱" - - return content -} - -function checkInput(answer) { - if (answer.length != 3) - return false - if (answer[0] == answer[1] || answer[1] == answer[2] || answer[2] == answer[0]) - return false - if (answer[0] == 0 || answer[1] == 0 || answer[2] == 0) - return false - return true -} - -function markAnswer(answer) { - 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 - } -} - -restartBtn.addEventListener('click', function () { - restart.style.display = 'none' - resultPrint.style.display = 'none' - document.getElementById('answer').value = '' - setNumber() +restartBtn.addEventListener("click", function () { + restart.style.display = "none" + resultPrint.style.display = "none" + document.getElementById("answer").value = "" + number = setNumber() }); \ 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 From 86ac7c51229c182024dfa67806b1e6b7a159b3b8 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 10 May 2024 17:26:12 +0900 Subject: [PATCH 08/10] fix(main): check input immediately --- src/checkInput.js | 6 +++--- src/main.js | 30 ++++++++++++++++++------------ 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/checkInput.js b/src/checkInput.js index f3a7ef7..b8e0319 100644 --- a/src/checkInput.js +++ b/src/checkInput.js @@ -1,9 +1,9 @@ export default function checkInput(answer) { - if (answer.length != 3) + if (answer.length > 3) return false - if (answer[0] == answer[1] || answer[1] == answer[2] || answer[2] == answer[0]) + if (answer.includes('0')) return false - if (answer[0] == 0 || answer[1] == 0 || answer[2] == 0) + if ([...new Set(answer)].join('').length != answer.length) return false return true } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 9417dd0..401a7c6 100644 --- a/src/main.js +++ b/src/main.js @@ -8,23 +8,29 @@ const checkBtn = document.getElementById("check-btn") const restart = document.querySelector(".restart") const restartBtn = document.getElementById("restart-btn") const resultPrint = document.querySelector(".result-print") +const answerInput = document.getElementById("answer") +let answer = "" -checkBtn.addEventListener("click", function () { - const answer = document.getElementById("answer").value - if(!checkInput(answer)) { +answerInput.addEventListener("input", function () { + if(!checkInput(answerInput.value)) { alert("1~9까지의 수를 중복없이 3개 입력해주세요.") + answerInput.value = answer } else { - resultPrint.style.display = "block" - const result = document.getElementById("result") + answer = answerInput.value + } +}) + +checkBtn.addEventListener("click", function () { + resultPrint.style.display = "block" + const result = document.getElementById("result") - if(markAnswer(answer, number)) { - result.textContent = "🎉정답을 맞추셨습니다🎉" - restart.style.display = "block" - } - else { - result.textContent = makeHint() - } + if(markAnswer(answer, number)) { + result.textContent = "🎉정답을 맞추셨습니다🎉" + restart.style.display = "block" + } + else { + result.textContent = makeHint() } }); From 490543a104cb4cde3fd6da6aeff359101485e355 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 10 May 2024 17:55:21 +0900 Subject: [PATCH 09/10] feat(main): add game over --- index.html | 1 + src/main.js | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/index.html b/index.html index b0afcb8..3e6de36 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@

📄결과

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

+
diff --git a/src/main.js b/src/main.js index 401a7c6..c406937 100644 --- a/src/main.js +++ b/src/main.js @@ -8,6 +8,7 @@ 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 = "" @@ -39,4 +40,9 @@ restartBtn.addEventListener("click", function () { 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 From ddf68dfb806339f0e2dbffd90518422d82b5b937 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 10 May 2024 17:59:17 +0900 Subject: [PATCH 10/10] fix(main): check input before mark answer --- src/main.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/main.js b/src/main.js index c406937..b37dda4 100644 --- a/src/main.js +++ b/src/main.js @@ -23,15 +23,20 @@ answerInput.addEventListener("input", function () { }) checkBtn.addEventListener("click", function () { - resultPrint.style.display = "block" - const result = document.getElementById("result") - - if(markAnswer(answer, number)) { - result.textContent = "🎉정답을 맞추셨습니다🎉" - restart.style.display = "block" + if(answer.length != 3) { + alert("1~9까지의 수를 중복없이 3개 입력해주세요.") } else { - result.textContent = makeHint() + resultPrint.style.display = "block" + const result = document.getElementById("result") + + if(markAnswer(answer, number)) { + result.textContent = "🎉정답을 맞추셨습니다🎉" + restart.style.display = "block" + } + else { + result.textContent = makeHint() + } } });