From c38d091820b6f8f925d7ef3f7cd52c0e67298b36 Mon Sep 17 00:00:00 2001 From: userjmmm Date: Sun, 5 May 2024 21:35:16 +0900 Subject: [PATCH 1/7] =?UTF-8?q?FEAT:=20=EC=88=AB=EC=9E=90=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=9D=84=20=EC=9C=84=ED=95=9C=20html=20interface=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 14 +++++++++++++- index.html | 14 ++++++++++++-- src/main.js | 1 + 3 files changed, 26 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8b2833c..e984dc7 100644 --- a/README.md +++ b/README.md @@ -1 +1,13 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse + +### ⚾️ 숫자 야구 - 미니과제 + +> 구현 기능 목록 정리 + +- [x] 게임 플레이어가 3개의 숫자를 입력하는 기능 +- [ ] 입력 중인 값이 올바른지 검증하는 기능 +- [ ] 잘못된 값 입력할 경우 alert()로 에러 메시지 출력하는 기능 +- [ ] 잘못된 값을 넣은 부분부터 다시 입력받는 기능 +- [ ] 확인 버튼을 누르면 힌트를 제공하는 기능 +- [ ] 숫자를 모두 맞히면 게임이 종료 메시지가 출력되는 기능 +- [ ] 게임 종료 시 다시 시작할 수 있도록 버튼이 나오는 기능 \ No newline at end of file diff --git a/index.html b/index.html index b021b5c..c4b7822 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,22 @@ - + - + ⚾️ 숫자 야구 게임
+

⚾️ 숫자 야구 게임

+

1~9까지의 숫자 중 중복없이 3개 입력해주세요.

+

올바른 예) 139

+

틀린 예) 122

+ + +

📄결과

+
+

+ diff --git a/src/main.js b/src/main.js index e69de29..8b13789 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1 @@ + From 146e77556b4404d59767552e767526e68222e255 Mon Sep 17 00:00:00 2001 From: userjmmm Date: Sun, 5 May 2024 22:28:52 +0900 Subject: [PATCH 2/7] =?UTF-8?q?FEAT:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20?= =?UTF-8?q?=EA=B0=92=EC=9D=84=20=EC=9E=85=EB=A0=A5=ED=95=98=EB=8A=94?= =?UTF-8?q?=EC=A7=80=20=EA=B2=80=EC=A6=9D=ED=95=98=EB=8A=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/components/numberInput.js | 12 ++++++++++++ src/main.js | 4 ++++ 3 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 src/components/numberInput.js diff --git a/index.html b/index.html index c4b7822..b5e3645 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@

⚾️ 숫자 야구 게임

올바른 예) 139

틀린 예) 122

- +

📄결과

diff --git a/src/components/numberInput.js b/src/components/numberInput.js new file mode 100644 index 0000000..0f36ad7 --- /dev/null +++ b/src/components/numberInput.js @@ -0,0 +1,12 @@ +export function checkInput() { // 잘못된 값 입력하는지 검증 + const userInput = document.getElementById('userInput').value + const numbers = userInput.split('').map(Number) + const isValid = numbers.length === 3 && numbers.every(num => num>=1 && num<=9 && Number.isInteger(num)) + const isDuplicate = new Set(numbers).size === numbers.length + + if (!isValid || !isDuplicate) { + alert('잘못된 값을 입력했습니다. 다시 입력해 주세요!') + return; + } + console.log('입력 받은 숫자: ', numbers); +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 8b13789..7feaf1d 100644 --- a/src/main.js +++ b/src/main.js @@ -1 +1,5 @@ +import { checkInput } from './components/numberInput.js'; +document.addEventListener('DOMContentLoaded', () => { + document.getElementById('checkButton').addEventListener('click', checkInput) +}) \ No newline at end of file From 799efe777974076492f1e51aa08d3c188a60c0c1 Mon Sep 17 00:00:00 2001 From: userjmmm Date: Sun, 5 May 2024 23:11:48 +0900 Subject: [PATCH 3/7] =?UTF-8?q?FEAT:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20?= =?UTF-8?q?=EA=B0=92=EC=9D=84=20=EB=84=A3=EC=9D=80=20=EA=B2=BD=EC=9A=B0,?= =?UTF-8?q?=20=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=B6=9C?= =?UTF-8?q?=EB=A0=A5=20=ED=9B=84=20=EA=B7=B8=20=EB=B6=80=EB=B6=84=EB=B6=80?= =?UTF-8?q?=ED=84=B0=20=EB=8B=A4=EC=8B=9C=20=EC=9E=85=EB=A0=A5=EB=B0=9B?= =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 ++--- src/components/numberInput.js | 10 ++++++---- src/components/rewriteInput.js | 8 ++++++++ 3 files changed, 16 insertions(+), 7 deletions(-) create mode 100644 src/components/rewriteInput.js diff --git a/README.md b/README.md index e984dc7..9ec5f39 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,8 @@ > 구현 기능 목록 정리 - [x] 게임 플레이어가 3개의 숫자를 입력하는 기능 -- [ ] 입력 중인 값이 올바른지 검증하는 기능 -- [ ] 잘못된 값 입력할 경우 alert()로 에러 메시지 출력하는 기능 -- [ ] 잘못된 값을 넣은 부분부터 다시 입력받는 기능 +- [x] 입력 중인 값이 올바른지 검증하는 기능 +- [x] 잘못된 값을 넣은 경우, 에러 메시지 출력 후 그 부분부터 다시 입력받는 기능 - [ ] 확인 버튼을 누르면 힌트를 제공하는 기능 - [ ] 숫자를 모두 맞히면 게임이 종료 메시지가 출력되는 기능 - [ ] 게임 종료 시 다시 시작할 수 있도록 버튼이 나오는 기능 \ No newline at end of file diff --git a/src/components/numberInput.js b/src/components/numberInput.js index 0f36ad7..17de3b4 100644 --- a/src/components/numberInput.js +++ b/src/components/numberInput.js @@ -1,12 +1,14 @@ +import { inputError } from './rewriteInput.js'; + +export const userInput = document.getElementById('userInput') + export function checkInput() { // 잘못된 값 입력하는지 검증 - const userInput = document.getElementById('userInput').value - const numbers = userInput.split('').map(Number) + const numbers = userInput.value.split('').map(Number) const isValid = numbers.length === 3 && numbers.every(num => num>=1 && num<=9 && Number.isInteger(num)) const isDuplicate = new Set(numbers).size === numbers.length if (!isValid || !isDuplicate) { - alert('잘못된 값을 입력했습니다. 다시 입력해 주세요!') - return; + inputError() } console.log('입력 받은 숫자: ', numbers); } \ No newline at end of file diff --git a/src/components/rewriteInput.js b/src/components/rewriteInput.js new file mode 100644 index 0000000..9696e1c --- /dev/null +++ b/src/components/rewriteInput.js @@ -0,0 +1,8 @@ +import { userInput } from './numberInput.js' + +export function inputError() { + alert('잘못된 값을 입력했습니다. 다시 입력해 주세요!') + userInput.value = '' + userInput.focus() + return; +} \ No newline at end of file From 3511c7640cbd3b4d01bb99ec29a31456ef91f13f Mon Sep 17 00:00:00 2001 From: userjmmm Date: Mon, 6 May 2024 00:52:32 +0900 Subject: [PATCH 4/7] =?UTF-8?q?FEAT:=20=EC=BB=B4=ED=93=A8=ED=84=B0?= =?UTF-8?q?=EA=B0=80=20=EC=84=9C=EB=A1=9C=20=EB=8B=A4=EB=A5=B8=20=EC=9E=84?= =?UTF-8?q?=EC=9D=98=EC=9D=98=20=EC=88=98=203=EA=B0=9C=EB=A5=BC=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +++- src/components/makeRandom.js | 10 ++++++++++ src/components/numberInput.js | 3 ++- src/main.js | 4 ++++ 4 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 src/components/makeRandom.js diff --git a/README.md b/README.md index 9ec5f39..d31062a 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,11 @@ > 구현 기능 목록 정리 +- [x] 컴퓨터가 서로 다른 임의의 수 3개를 선택 - [x] 게임 플레이어가 3개의 숫자를 입력하는 기능 - [x] 입력 중인 값이 올바른지 검증하는 기능 -- [x] 잘못된 값을 넣은 경우, 에러 메시지 출력 후 그 부분부터 다시 입력받는 기능 +- [x] 잘못된 값을 넣은 경우, 에러 메시지 출력 및 다시 입력받는 기능 +- [ ] 입력값에 따라 힌트를 처리하는 기능 - [ ] 확인 버튼을 누르면 힌트를 제공하는 기능 - [ ] 숫자를 모두 맞히면 게임이 종료 메시지가 출력되는 기능 - [ ] 게임 종료 시 다시 시작할 수 있도록 버튼이 나오는 기능 \ No newline at end of file diff --git a/src/components/makeRandom.js b/src/components/makeRandom.js new file mode 100644 index 0000000..d1b0b2a --- /dev/null +++ b/src/components/makeRandom.js @@ -0,0 +1,10 @@ +export function threeRandom () { + const randomNum = new Set() + + while (randomNum.size < 3) { + const randomOne = Math.floor(Math.random() * 9) +1 + randomNum.add(randomOne) + } + + return Array.from(randomNum) +} \ No newline at end of file diff --git a/src/components/numberInput.js b/src/components/numberInput.js index 17de3b4..a5e749a 100644 --- a/src/components/numberInput.js +++ b/src/components/numberInput.js @@ -10,5 +10,6 @@ export function checkInput() { // 잘못된 값 입력하는지 검증 if (!isValid || !isDuplicate) { inputError() } - console.log('입력 받은 숫자: ', numbers); + console.log('입력 받은 숫자: ', numbers) + return numbers } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 7feaf1d..a3d2a4a 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,9 @@ +import { threeRandom } from './components/makeRandom.js'; import { checkInput } from './components/numberInput.js'; +const comRandom = threeRandom(); +console.log('상대방(컴퓨터)의 수: ', comRandom); + document.addEventListener('DOMContentLoaded', () => { document.getElementById('checkButton').addEventListener('click', checkInput) }) \ No newline at end of file From e34755c66039e5465e0626cb6499953739d7a1ef Mon Sep 17 00:00:00 2001 From: userjmmm Date: Mon, 6 May 2024 01:50:39 +0900 Subject: [PATCH 5/7] =?UTF-8?q?FEAT:=20=EC=9E=85=EB=A0=A5=EA=B0=92?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=ED=9E=8C=ED=8A=B8=EB=A5=BC=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/components/makeHint.js | 14 ++++++++++++++ src/main.js | 14 +++++++++----- 3 files changed, 24 insertions(+), 6 deletions(-) create mode 100644 src/components/makeHint.js diff --git a/README.md b/README.md index d31062a..738ee88 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ - [x] 게임 플레이어가 3개의 숫자를 입력하는 기능 - [x] 입력 중인 값이 올바른지 검증하는 기능 - [x] 잘못된 값을 넣은 경우, 에러 메시지 출력 및 다시 입력받는 기능 -- [ ] 입력값에 따라 힌트를 처리하는 기능 +- [x] 입력값에 따라 힌트를 처리하는 기능 - [ ] 확인 버튼을 누르면 힌트를 제공하는 기능 - [ ] 숫자를 모두 맞히면 게임이 종료 메시지가 출력되는 기능 - [ ] 게임 종료 시 다시 시작할 수 있도록 버튼이 나오는 기능 \ No newline at end of file diff --git a/src/components/makeHint.js b/src/components/makeHint.js new file mode 100644 index 0000000..bc4fce4 --- /dev/null +++ b/src/components/makeHint.js @@ -0,0 +1,14 @@ +export function calculateHint(playerInput, comRandom) { + let strike = 0 + let ball = 0 + + playerInput.forEach((num, index) => { + if (num === comRandom[index]) + strike++ + else if (comRandom.includes(num)) + ball++ + }); + + console.log('스트라이크 개수: ', strike, ', 볼 개수: ', ball) + return {strike, ball} +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index a3d2a4a..60c0e40 100644 --- a/src/main.js +++ b/src/main.js @@ -1,9 +1,13 @@ import { threeRandom } from './components/makeRandom.js'; import { checkInput } from './components/numberInput.js'; - -const comRandom = threeRandom(); -console.log('상대방(컴퓨터)의 수: ', comRandom); +import { calculateHint } from './components/makeHint.js'; document.addEventListener('DOMContentLoaded', () => { - document.getElementById('checkButton').addEventListener('click', checkInput) -}) \ No newline at end of file + const comRandom = threeRandom(); + console.log('상대방(컴퓨터)의 수: ', comRandom); + + document.getElementById('checkButton').addEventListener('click', () => { + const userInput = checkInput(); + calculateHint(userInput, comRandom); + }); +}); \ No newline at end of file From bf15f0f73abdf1e9b4a1d5af57a41e28a733ca09 Mon Sep 17 00:00:00 2001 From: userjmmm Date: Mon, 6 May 2024 02:46:08 +0900 Subject: [PATCH 6/7] =?UTF-8?q?FEAT:=20=ED=99=95=EC=9D=B8=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=ED=9E=8C?= =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EC=A0=9C=EA=B3=B5=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/components/printHint.js | 19 +++++++++++++++++++ src/main.js | 10 ++++++---- 3 files changed, 26 insertions(+), 5 deletions(-) create mode 100644 src/components/printHint.js diff --git a/README.md b/README.md index 738ee88..419382a 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,6 @@ - [x] 입력 중인 값이 올바른지 검증하는 기능 - [x] 잘못된 값을 넣은 경우, 에러 메시지 출력 및 다시 입력받는 기능 - [x] 입력값에 따라 힌트를 처리하는 기능 -- [ ] 확인 버튼을 누르면 힌트를 제공하는 기능 +- [x] 확인 버튼을 누르면 힌트를 제공하는 기능 - [ ] 숫자를 모두 맞히면 게임이 종료 메시지가 출력되는 기능 - [ ] 게임 종료 시 다시 시작할 수 있도록 버튼이 나오는 기능 \ No newline at end of file diff --git a/src/components/printHint.js b/src/components/printHint.js new file mode 100644 index 0000000..ae57c42 --- /dev/null +++ b/src/components/printHint.js @@ -0,0 +1,19 @@ +export function classifyHint({ strike, ball}) { + const resultElement = document.getElementById('result') + + if (strike === 3) { + resultElement.textContent = '🎉정답을 맞히셨습니다🎉' + } + else if (strike !== 0 && ball === 0) { + resultElement.textContent = `${strike} 스트라이크` + } + else if (ball !== 0 && strike === 0) { + resultElement.textContent = `${ball} 볼` + } + else if (ball != 0 && strike != 0) { + resultElement.textContent = `${ball} 볼 ${strike} 스트라이크` + } + else { + resultElement.textContent = '낫싱' + } +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 60c0e40..c8dd71b 100644 --- a/src/main.js +++ b/src/main.js @@ -1,13 +1,15 @@ import { threeRandom } from './components/makeRandom.js'; import { checkInput } from './components/numberInput.js'; import { calculateHint } from './components/makeHint.js'; +import { classifyHint } from './components/printHint.js'; document.addEventListener('DOMContentLoaded', () => { - const comRandom = threeRandom(); - console.log('상대방(컴퓨터)의 수: ', comRandom); + const comRandom = threeRandom() + console.log('상대방(컴퓨터)의 수: ', comRandom) document.getElementById('checkButton').addEventListener('click', () => { - const userInput = checkInput(); - calculateHint(userInput, comRandom); + const userInput = checkInput() + const calHint = calculateHint(userInput, comRandom) + classifyHint(calHint) }); }); \ No newline at end of file From 77fdc17100105576a631e980722a50194f4cceb5 Mon Sep 17 00:00:00 2001 From: userjmmm Date: Mon, 6 May 2024 03:36:11 +0900 Subject: [PATCH 7/7] =?UTF-8?q?FEAT:=20=EC=88=AB=EC=9E=90=EB=A5=BC=20?= =?UTF-8?q?=EB=AA=A8=EB=91=90=20=EB=A7=9E=ED=9E=88=EB=A9=B4=20=EA=B2=8C?= =?UTF-8?q?=EC=9E=84=EC=9D=B4=20=EC=A2=85=EB=A3=8C=20=EB=A9=94=EC=8B=9C?= =?UTF-8?q?=EC=A7=80=EC=99=80=20=EC=9E=AC=EC=8B=9C=EC=9E=91=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=B4=20=EB=82=98=EC=98=A4=EB=8A=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 +-- index.html | 5 +++-- src/components/makeHint.js | 6 ++---- src/components/printHint.js | 6 +++--- src/main.js | 34 ++++++++++++++++++++++++++-------- 5 files changed, 35 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 419382a..820b759 100644 --- a/README.md +++ b/README.md @@ -10,5 +10,4 @@ - [x] 잘못된 값을 넣은 경우, 에러 메시지 출력 및 다시 입력받는 기능 - [x] 입력값에 따라 힌트를 처리하는 기능 - [x] 확인 버튼을 누르면 힌트를 제공하는 기능 -- [ ] 숫자를 모두 맞히면 게임이 종료 메시지가 출력되는 기능 -- [ ] 게임 종료 시 다시 시작할 수 있도록 버튼이 나오는 기능 \ No newline at end of file +- [x] 숫자를 모두 맞히면 게임이 종료 메시지와 재시작 버튼이 나오는 기능 \ No newline at end of file diff --git a/index.html b/index.html index b5e3645..6b90aea 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ ⚾️ 숫자 야구 게임 -
+

⚾️ 숫자 야구 게임

1~9까지의 숫자 중 중복없이 3개 입력해주세요.

올바른 예) 139

@@ -15,7 +15,8 @@

⚾️ 숫자 야구 게임

📄결과

-

+ +
diff --git a/src/components/makeHint.js b/src/components/makeHint.js index bc4fce4..d6281f0 100644 --- a/src/components/makeHint.js +++ b/src/components/makeHint.js @@ -3,10 +3,8 @@ export function calculateHint(playerInput, comRandom) { let ball = 0 playerInput.forEach((num, index) => { - if (num === comRandom[index]) - strike++ - else if (comRandom.includes(num)) - ball++ + if (num === comRandom[index]) strike++ + else if (comRandom.includes(num)) ball++ }); console.log('스트라이크 개수: ', strike, ', 볼 개수: ', ball) diff --git a/src/components/printHint.js b/src/components/printHint.js index ae57c42..628bf0e 100644 --- a/src/components/printHint.js +++ b/src/components/printHint.js @@ -5,13 +5,13 @@ export function classifyHint({ strike, ball}) { resultElement.textContent = '🎉정답을 맞히셨습니다🎉' } else if (strike !== 0 && ball === 0) { - resultElement.textContent = `${strike} 스트라이크` + resultElement.textContent = `${strike}스트라이크` } else if (ball !== 0 && strike === 0) { - resultElement.textContent = `${ball} 볼` + resultElement.textContent = `${ball}볼` } else if (ball != 0 && strike != 0) { - resultElement.textContent = `${ball} 볼 ${strike} 스트라이크` + resultElement.textContent = `${ball}볼 ${strike}스트라이크` } else { resultElement.textContent = '낫싱' diff --git a/src/main.js b/src/main.js index c8dd71b..5c3013f 100644 --- a/src/main.js +++ b/src/main.js @@ -3,13 +3,31 @@ import { checkInput } from './components/numberInput.js'; import { calculateHint } from './components/makeHint.js'; import { classifyHint } from './components/printHint.js'; +const gameState = { + comRandom: null +} +// 숫자를 모두 맞히면 게임이 종료 메시지와 재시작 버튼이 나오는 기능 +function setRestartButton() { + const restartButton = document.getElementById('restartButton') + restartButton.addEventListener('click', () => window.location.reload()) +} + +function gameResult() { + const userInput = checkInput() + const calHint = calculateHint(userInput, gameState.comRandom) + classifyHint(calHint) + + const resultElement = document.getElementById('result') + if (resultElement.textContent.includes('🎉정답을 맞히셨습니다🎉')) { + const restartButton = document.getElementById('restartButton') + restartButton.style.display = 'block' + } +} + document.addEventListener('DOMContentLoaded', () => { - const comRandom = threeRandom() - console.log('상대방(컴퓨터)의 수: ', comRandom) - - document.getElementById('checkButton').addEventListener('click', () => { - const userInput = checkInput() - const calHint = calculateHint(userInput, comRandom) - classifyHint(calHint) - }); + gameState.comRandom = threeRandom() + console.log('상대방(컴퓨터)의 수: ', gameState.comRandom) + + document.getElementById('checkButton').addEventListener('click', gameResult) + setRestartButton() }); \ No newline at end of file