From 56e0dbf1da6c2163f8153babcdf56b0f7efa947b Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 08:53:19 +0900 Subject: [PATCH 01/13] =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=9A=94=EA=B5=AC?= =?UTF-8?q?=20=EC=82=AC=ED=95=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b2833c..f0c541e 100644 --- a/README.md +++ b/README.md @@ -1 +1,18 @@ -# javascript-baseball-precourse \ No newline at end of file +# 숫자 야구 - 미니과제 + +
+ +## 기능 요구 사항 + +### 기능 1 + +- 서로 다른 3자리의 수 생성 + +### 기능 2 + +- 플레이어가 3개의 숫자를 입력하면 숫자에 대한 결과 출력 + +### 기능 3 + +- 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 재입력 +- 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼 표시 From 588ac95ee86b58f15357a41bc4acfde47dd3e191 Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 10:46:02 +0900 Subject: [PATCH 02/13] =?UTF-8?q?UI=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CSS/main.css | 9 +++++++++ index.html | 38 +++++++++++++++++++++++++++----------- 2 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 CSS/main.css diff --git a/CSS/main.css b/CSS/main.css new file mode 100644 index 0000000..33447e6 --- /dev/null +++ b/CSS/main.css @@ -0,0 +1,9 @@ +.result { + display: none; +} +.restart__btn { + display: none; +} +.end__btn { + display: none; +} diff --git a/index.html b/index.html index b021b5c..5e16691 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,28 @@ - - - - - - - - -
- - + + + + + + 숫자 야구 + + + + +
+

⚾️ 숫자 야구 게임

+

1~9까지의 수를 중복없이 3개 입력해주세요.
올바른 예) 138
틀린 예) 122

+ + + +
+

📄 결과

+
+
+
+
+ + +
+
+ From 5e39e3b2288828f70fb1d3e80a95eb697b715ee5 Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 10:48:23 +0900 Subject: [PATCH 03/13] main.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 버튼 이벤트 기능, 랜덤 숫자 생성 함수 호출, 정상적인 입력인지 확인 함수 호출 --- src/main.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/main.js b/src/main.js index e69de29..602a896 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,19 @@ +import { answerNumber, answer } from './answerNum.js'; +import { inputCheck, answerCheck } from './check.js'; + +answerNumber(); +inputCheck(answer); + +// 버튼 이벤트 +export function restartGame() { + alert('새로운 게임을 시작합니다.'); + location.reload(); +} + +export function endGame() { + alert('게임을 종료합니다.'); + location.reload(); +} + +document.querySelector('.restart__btn').addEventListener('click', restartGame); +document.querySelector('.end__btn').addEventListener('click', endGame); From 86e4602182bd9633db965bf0873d80acc3caad7b Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 10:48:43 +0900 Subject: [PATCH 04/13] =?UTF-8?q?=EC=A0=95=EB=8B=B5=20=EC=88=AB=EC=9E=90?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/answerNum.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/answerNum.js diff --git a/src/answerNum.js b/src/answerNum.js new file mode 100644 index 0000000..a2db6b9 --- /dev/null +++ b/src/answerNum.js @@ -0,0 +1,12 @@ +export let numLst; +export let answer; + +// 3개의 숫자 랜덤으로 생성 +export function answerNumber() { + numLst = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; + answer = []; + for (let i = 0; i < 3; i++) { + let select = Math.floor(Math.random() * numLst.length); + answer[i] = numLst.splice(select, 1)[0]; + } +} From 738a626008180bef05ccd6119250a9a683d10983 Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 10:49:21 +0900 Subject: [PATCH 05/13] =?UTF-8?q?=EC=82=AC=EC=9A=A9=EC=9E=90=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=ED=99=95=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 정상정인 입력인지 확인, strike와 ball 갯수 확인 --- src/check.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/check.js diff --git a/src/check.js b/src/check.js new file mode 100644 index 0000000..2b44718 --- /dev/null +++ b/src/check.js @@ -0,0 +1,45 @@ +import { gameResult } from './gameUI.js'; +export let inputValue; +export let strike = 0; +export let ball = 0; +export function inputCheck(answer) { + document.getElementById('inputButton').addEventListener('click', function () { + inputValue = document.getElementById('inputField').value; + + // 3자리 숫자인지 확인 + if (!/^\d{3}$/.test(inputValue)) { + alert('3자리 숫자를 입력해주세요.'); + return; + } + + // 중복된 숫자 확인 + let digits = inputValue.split(''); + let uniqueDigits = Array.from(new Set(digits)); + if (digits.length !== uniqueDigits.length) { + alert('중복된 숫자를 입력할 수 없습니다.'); + return; + } + inputValue = inputValue.split('').map(Number); + console.log('입력된 값:', inputValue); + answerCheck(answer, inputValue); + document.querySelector('.result').style.display = 'block'; + gameResult(); + }); +} + +export function answerCheck(answer, inputValue) { + strike = 0; + ball = 0; + for (let i = 0; i < 3; i++) { + for (let j = 0; j < 3; j++) { + if (answer[i] === inputValue[j]) { + if (i === j) { + strike++; + } else { + ball++; + } + } + } + } + return { strike, ball }; +} From 3cb6eab8ffea14f409ae92a837fff68d96d624fe Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 10:50:26 +0900 Subject: [PATCH 06/13] =?UTF-8?q?=EA=B2=8C=EC=9E=84=20=EA=B2=B0=EA=B3=BC?= =?UTF-8?q?=20UI=20=EC=B6=9C=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/gameUI.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/gameUI.js diff --git a/src/gameUI.js b/src/gameUI.js new file mode 100644 index 0000000..6a4b5e2 --- /dev/null +++ b/src/gameUI.js @@ -0,0 +1,19 @@ +import { strike, ball } from './check.js'; + +export function gameResult() { + const resultText = document.querySelector('.result__text'); + const resultQuestion = document.querySelector('.result__question'); + if (strike === 3) { + // 정답일 때 UI 추가 + resultText.innerHTML = '🎉정답을 맞추셨습니다🎉'; + resultQuestion.textContent = '게임을 새로 시작하시겠습니까?'; + document.querySelector('.restart__btn').style.display = 'block'; + document.querySelector('.end__btn').style.display = 'none'; + } else { + // 정답이아닐 때 UI 추가 + resultText.innerHTML = `${ball}볼 ${strike}스트라이크⚾️`; + resultQuestion.textContent = '게임을 종료하시겠습니까?'; + document.querySelector('.restart__btn').style.display = 'none'; + document.querySelector('.end__btn').style.display = 'block'; + } +} From 0327f03bd17fb0f1f7e6d747e64c44e30359b1bc Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 10:51:43 +0900 Subject: [PATCH 07/13] =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/check.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/check.js b/src/check.js index 2b44718..6dc7217 100644 --- a/src/check.js +++ b/src/check.js @@ -20,7 +20,6 @@ export function inputCheck(answer) { return; } inputValue = inputValue.split('').map(Number); - console.log('입력된 값:', inputValue); answerCheck(answer, inputValue); document.querySelector('.result').style.display = 'block'; gameResult(); From e3f0f328e52b988eaa76ef2e92e4087be54b9880 Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 11:02:00 +0900 Subject: [PATCH 08/13] =?UTF-8?q?depth=20=EC=A4=84=EC=9D=B4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/check.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/check.js b/src/check.js index 6dc7217..030ff24 100644 --- a/src/check.js +++ b/src/check.js @@ -30,15 +30,15 @@ export function answerCheck(answer, inputValue) { strike = 0; ball = 0; for (let i = 0; i < 3; i++) { - for (let j = 0; j < 3; j++) { - if (answer[i] === inputValue[j]) { - if (i === j) { - strike++; - } else { - ball++; - } - } + const isStrike = answer[i] === inputValue[i]; + const isBall = !isStrike && inputValue.includes(answer[i]); + + if (isStrike) { + strike++; + } else if (isBall) { + ball++; } } + return { strike, ball }; } From b6751101d16cd20c2eaddfce05ffa3bde7531438 Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 11:05:01 +0900 Subject: [PATCH 09/13] =?UTF-8?q?=EC=82=AC=EC=9A=A9=EC=9E=90=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=ED=99=95=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/check.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/check.js b/src/check.js index 030ff24..7b4cdc8 100644 --- a/src/check.js +++ b/src/check.js @@ -39,6 +39,5 @@ export function answerCheck(answer, inputValue) { ball++; } } - return { strike, ball }; } From 2362309088e681482ef7f3500cf6ba9e1397a288 Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 11:11:35 +0900 Subject: [PATCH 10/13] =?UTF-8?q?=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 | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index f0c541e..42ab1e3 100644 --- a/README.md +++ b/README.md @@ -10,9 +10,12 @@ ### 기능 2 -- 플레이어가 3개의 숫자를 입력하면 숫자에 대한 결과 출력 - -### 기능 3 - - 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 재입력 - 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼 표시 + +### 기능 2 + +- 플레이어가 3개의 숫자를 입력하면 숫자에 대한 결과 출력 +- - 숫자와 자리 모두 맞으면 스트라이크 +- - 자리는 맞지 않지만 숫자가 포함되어 있으면 볼 +- - 포함되어있지 않은 경우 낫싱 From 270844231c2545744afa3448b6b673069433248b Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 11:11:59 +0900 Subject: [PATCH 11/13] =?UTF-8?q?perf:=20=EA=B2=B0=EA=B3=BC=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=9D=BC=20UI=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/gameUI.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/gameUI.js b/src/gameUI.js index 6a4b5e2..a66a59d 100644 --- a/src/gameUI.js +++ b/src/gameUI.js @@ -9,6 +9,12 @@ export function gameResult() { resultQuestion.textContent = '게임을 새로 시작하시겠습니까?'; document.querySelector('.restart__btn').style.display = 'block'; document.querySelector('.end__btn').style.display = 'none'; + } else if (strike === 0 && ball === 0) { + // 낫싱일 때 UI 추가 + resultText.innerHTML = '낫싱😥'; + resultQuestion.textContent = '게임을 종료하시겠습니까?'; + document.querySelector('.restart__btn').style.display = 'none'; + document.querySelector('.end__btn').style.display = 'block'; } else { // 정답이아닐 때 UI 추가 resultText.innerHTML = `${ball}볼 ${strike}스트라이크⚾️`; From 929d6df0192756856b96c9150deacd464da2a7be Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 11:24:56 +0900 Subject: [PATCH 12/13] =?UTF-8?q?docs:=20=EA=B8=B0=EB=8A=A5=20=EC=9A=94?= =?UTF-8?q?=EA=B5=AC=20=EC=82=AC=ED=95=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 42ab1e3..f0c541e 100644 --- a/README.md +++ b/README.md @@ -10,12 +10,9 @@ ### 기능 2 -- 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 재입력 -- 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼 표시 +- 플레이어가 3개의 숫자를 입력하면 숫자에 대한 결과 출력 -### 기능 2 +### 기능 3 -- 플레이어가 3개의 숫자를 입력하면 숫자에 대한 결과 출력 -- - 숫자와 자리 모두 맞으면 스트라이크 -- - 자리는 맞지 않지만 숫자가 포함되어 있으면 볼 -- - 포함되어있지 않은 경우 낫싱 +- 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 재입력 +- 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼 표시 From 68b52515dbfc40b3aebaac017f0812c1a0816ca5 Mon Sep 17 00:00:00 2001 From: "ikuwlghks@naver.com" Date: Mon, 6 May 2024 11:27:51 +0900 Subject: [PATCH 13/13] =?UTF-8?q?docs:=20=EA=B8=B0=EB=8A=A5=20=EC=9A=94?= =?UTF-8?q?=EA=B5=AC=20=EC=82=AC=ED=95=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f0c541e..a5825c9 100644 --- a/README.md +++ b/README.md @@ -10,9 +10,12 @@ ### 기능 2 -- 플레이어가 3개의 숫자를 입력하면 숫자에 대한 결과 출력 +- 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 재입력 +- 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼 표시 ### 기능 3 -- 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 재입력 -- 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼 표시 +- 플레이어가 3개의 숫자를 입력하면 숫자에 대한 결과 출력 +- - 숫자와 자리 모두 맞으면 스트라이크 +- - 자리는 맞지 않지만 숫자가 포함되어 있으면 볼 +- - 포함되어있지 않은 경우 낫싱