From 494b6f663b50aabb8393fea090c21759ad52b4dd Mon Sep 17 00:00:00 2001 From: kangjuyeon1 Date: Fri, 10 May 2024 14:18:00 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=EC=9E=84=EC=9D=98=EC=9D=98=20=EC=A0=95?= =?UTF-8?q?=EB=8B=B5=20=EA=B0=92=20=EC=84=A4=EC=A0=95=20=EB=B0=8F=20?= =?UTF-8?q?=EA=B2=8C=EC=9E=84=20=EC=B4=88=EA=B8=B0=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 16 ++++++++++++++-- package-lock.json | 8 ++++---- package.json | 2 +- src/components/Random.js | 16 ++++++++++++++++ src/main.js | 10 ++++++++++ 5 files changed, 45 insertions(+), 7 deletions(-) create mode 100644 src/components/Random.js diff --git a/index.html b/index.html index b021b5c..d715631 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,22 @@ - + ⚾️ 숫자 야구 게임 -
+
+

⚾️ 숫자 야구 게임

+

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

+

올바른 예)139
틀린 예)122

+ + +
+

📄결과

+

🎉정답을 맞추셨습니다🎉

+

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

+ +
+
diff --git a/package-lock.json b/package-lock.json index cf1d079..c4afb91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "javascript-baseball", "version": "0.0.0", "devDependencies": { - "vite": "^5.2.0" + "vite": "^5.2.11" }, "engines": { "node": ">=18.17.1", @@ -746,9 +746,9 @@ } }, "node_modules/vite": { - "version": "5.2.10", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.10.tgz", - "integrity": "sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==", + "version": "5.2.11", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz", + "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==", "dev": true, "dependencies": { "esbuild": "^0.20.1", diff --git a/package.json b/package.json index a44f9dd..44e9f39 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "devDependencies": { - "vite": "^5.2.0" + "vite": "^5.2.11" }, "engines": { "npm": ">=9.6.7", diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 0000000..79428fd --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,16 @@ +export function Random(){ + const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + let value = []; + value.length=0; + for (let i = 0; i < 3; i++) { + const randomIndex = Math.floor(Math.random() * (array.length - i)); + value.push(array[randomIndex]); + array.splice(randomIndex, 1);// 중복 제거. + } + + //개발 테스트용. + console.log(value); + + document.querySelector('.result').style.display = 'none'; + document.getElementById('num').value = ' '; +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..50d9c43 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,10 @@ +import { Random } from './components/Random.js'; +//import { Check } from './components/Check.js'; +//import { Strike } from './components/Strike.js'; +//import { Ball } from './components/Ball.js'; + + + +//임의의 정답 값 설정 및 게임 초기세팅 +Random(); + From 2f243d82d69df2c467a90e8088fb12900a6e8132 Mon Sep 17 00:00:00 2001 From: kangjuyeon1 Date: Fri, 10 May 2024 15:01:23 +0900 Subject: [PATCH 2/7] =?UTF-8?q?ball=EA=B3=BC=20strike=EC=9D=98=20=EA=B0=AF?= =?UTF-8?q?=EC=88=98=20=EA=B3=84=EC=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Ball.js | 10 ++++++++++ src/components/Random.js | 10 +++++----- src/components/Strike.js | 12 ++++++++++++ src/main.js | 29 ++++++++++++++++++++++++----- 4 files changed, 51 insertions(+), 10 deletions(-) create mode 100644 src/components/Ball.js create mode 100644 src/components/Strike.js diff --git a/src/components/Ball.js b/src/components/Ball.js new file mode 100644 index 0000000..ebce983 --- /dev/null +++ b/src/components/Ball.js @@ -0,0 +1,10 @@ +let balls = 0; +export function Ball(inputValue,value){ + for(let i = 0; i<3;i++){ + if(value.includes(parseInt(inputValue[i]))) + balls++; + } + +} + +export {balls} \ No newline at end of file diff --git a/src/components/Random.js b/src/components/Random.js index 79428fd..95717e4 100644 --- a/src/components/Random.js +++ b/src/components/Random.js @@ -1,6 +1,7 @@ +let value = []; + export function Random(){ const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; - let value = []; value.length=0; for (let i = 0; i < 3; i++) { const randomIndex = Math.floor(Math.random() * (array.length - i)); @@ -8,9 +9,8 @@ export function Random(){ array.splice(randomIndex, 1);// 중복 제거. } - //개발 테스트용. - console.log(value); - document.querySelector('.result').style.display = 'none'; document.getElementById('num').value = ' '; -} \ No newline at end of file +} + +export{value}; \ No newline at end of file diff --git a/src/components/Strike.js b/src/components/Strike.js new file mode 100644 index 0000000..3e9477a --- /dev/null +++ b/src/components/Strike.js @@ -0,0 +1,12 @@ +let strikes = 0; +export function Strike(inputValue,value){ + + for(let i = 0; i<3;i++){ + if(inputValue[i] == value[i]) + strikes++; + } + +} + + +export {strikes} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 50d9c43..c878dc4 100644 --- a/src/main.js +++ b/src/main.js @@ -1,10 +1,29 @@ -import { Random } from './components/Random.js'; -//import { Check } from './components/Check.js'; -//import { Strike } from './components/Strike.js'; -//import { Ball } from './components/Ball.js'; +// main.js +import { Random, value } from './components/Random.js'; +import { Strike, strikes } from './components/Strike.js'; +import { Ball, balls, } from './components/Ball.js'; -//임의의 정답 값 설정 및 게임 초기세팅 +// 임의의 정답 값 설정 및 게임 초기세팅 Random(); + +// 확인 버튼 클릭 시 stike, ball 계산 +const submitButton = document.getElementById("submit"); + + +submitButton.addEventListener('click', () => { + // value 배열이 비어 있는지 확인 + if (value.length === 0) { + console.error("Value array is empty. Random function should be called first."); + return; + } + + const input = document.getElementById('num').value.trim(); + const inputValue = String(input); + Strike(inputValue, value); + Ball(inputValue, value); + //console.log(value, strikes,balls) +}); + From dfef2b07023c79cae6aa1fba5968540fa488cf1c Mon Sep 17 00:00:00 2001 From: kangjuyeon1 Date: Fri, 10 May 2024 15:20:02 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20=EB=B3=B4=EC=97=AC?= =?UTF-8?q?=EC=A3=BC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Ball.js | 2 +- src/components/Strike.js | 2 +- src/components/result.js | 27 +++++++++++++++++++++++++++ src/main.js | 8 +++++++- 4 files changed, 36 insertions(+), 3 deletions(-) create mode 100644 src/components/result.js diff --git a/src/components/Ball.js b/src/components/Ball.js index ebce983..f0fe57a 100644 --- a/src/components/Ball.js +++ b/src/components/Ball.js @@ -1,10 +1,10 @@ let balls = 0; export function Ball(inputValue,value){ + balls = 0; for(let i = 0; i<3;i++){ if(value.includes(parseInt(inputValue[i]))) balls++; } - } export {balls} \ No newline at end of file diff --git a/src/components/Strike.js b/src/components/Strike.js index 3e9477a..024dab6 100644 --- a/src/components/Strike.js +++ b/src/components/Strike.js @@ -1,6 +1,6 @@ let strikes = 0; export function Strike(inputValue,value){ - + strikes = 0; for(let i = 0; i<3;i++){ if(inputValue[i] == value[i]) strikes++; diff --git a/src/components/result.js b/src/components/result.js new file mode 100644 index 0000000..b652bc3 --- /dev/null +++ b/src/components/result.js @@ -0,0 +1,27 @@ +// components/result.js + +export function result(strikes, balls) { + let result; + + switch (true) { + case strikes > 0 && balls > 0: + result = `${strikes} 스트라이크, ${balls} 볼`; + break; + case (strikes > 0 && strikes < 3) && balls === 0: + result = `${strikes} 스트라이크`; + break; + case strikes === 0 && balls > 0: + alert(`${balls} 볼`); + break; + case strikes === 3: + document.querySelector('.result').style.display = 'block'; + break; + default: + result = '낫싱'; + break; + } + + if (result) { + alert(result); + } +} diff --git a/src/main.js b/src/main.js index c878dc4..caf829c 100644 --- a/src/main.js +++ b/src/main.js @@ -3,6 +3,7 @@ import { Random, value } from './components/Random.js'; import { Strike, strikes } from './components/Strike.js'; import { Ball, balls, } from './components/Ball.js'; +import { result } from './components/result.js'; // 임의의 정답 값 설정 및 게임 초기세팅 @@ -24,6 +25,11 @@ submitButton.addEventListener('click', () => { const inputValue = String(input); Strike(inputValue, value); Ball(inputValue, value); - //console.log(value, strikes,balls) + let realballs = balls-strikes; + console.log(value, strikes,realballs) + + + //결과값 보여주기 + result(strikes, realballs); }); From 1382b080e687d1f2180d4bafdd52062048af1484 Mon Sep 17 00:00:00 2001 From: kangjuyeon1 Date: Fri, 10 May 2024 15:28:27 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=EC=98=88=EC=99=B8=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/InputValidator.js | 22 ++++++++++++++++++++++ src/main.js | 23 +++++++++++++++++++++-- 2 files changed, 43 insertions(+), 2 deletions(-) create mode 100644 src/components/InputValidator.js diff --git a/src/components/InputValidator.js b/src/components/InputValidator.js new file mode 100644 index 0000000..783d646 --- /dev/null +++ b/src/components/InputValidator.js @@ -0,0 +1,22 @@ +export function validateInput(input) { + // 입력값이 숫자가 아닌 경우 에러 + if (!/^\d+$/.test(input)) { + alert("입력값은 숫자만 입력해야 합니다."); + return false; + } + + // 입력값이 3자리가 아닌 경우 에러 + if (input.length !== 3) { + alert("입력값은 3자리여야 합니다."); + return false; + } + + // 입력값이 중복된 숫자를 포함하는 경우 에러 + if (new Set(input).size !== input.length) { + alert("입력값은 중복된 숫자를 포함해서는 안됩니다."); + return false; + } + + // 모든 유효성 검사를 통과한 경우 true 반환 + return true; +} diff --git a/src/main.js b/src/main.js index caf829c..64086c6 100644 --- a/src/main.js +++ b/src/main.js @@ -4,7 +4,7 @@ import { Random, value } from './components/Random.js'; import { Strike, strikes } from './components/Strike.js'; import { Ball, balls, } from './components/Ball.js'; import { result } from './components/result.js'; - +import { validateInput } from './components/InputValidator.js'; // 임의의 정답 값 설정 및 게임 초기세팅 Random(); @@ -20,8 +20,18 @@ submitButton.addEventListener('click', () => { console.error("Value array is empty. Random function should be called first."); return; } - + + //strikes,balls 계산. const input = document.getElementById('num').value.trim(); + + + // 입력값 유효성 검사 + if (!validateInput(input)) { + console.error("입력값이 유효하지 않습니다."); + return; + } + + const inputValue = String(input); Strike(inputValue, value); Ball(inputValue, value); @@ -33,3 +43,12 @@ submitButton.addEventListener('click', () => { result(strikes, realballs); }); + + +//재시작. +const restartButton = document.getElementById("restart"); + +restartButton.addEventListener('click', () => { + Random(); // 새로운 랜덤 값 설정 + document.querySelector('.result').style.display = 'none'; // 결과 창 숨기기 +}); \ No newline at end of file From 2f65522549c1cabb56121c4c89fd0cf2162ee75b Mon Sep 17 00:00:00 2001 From: kangjuyeon1 Date: Fri, 10 May 2024 15:32:52 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=EC=A0=95=EB=8B=B5=EC=8B=9C,=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=A0=9C=ED=95=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/InputController.js | 17 +++++++++++++++++ src/main.js | 7 +++++++ 2 files changed, 24 insertions(+) create mode 100644 src/components/InputController.js diff --git a/src/components/InputController.js b/src/components/InputController.js new file mode 100644 index 0000000..303812e --- /dev/null +++ b/src/components/InputController.js @@ -0,0 +1,17 @@ +// components/InputController.js + +export function disableInput() { + const inputField = document.getElementById('num'); + const submitButton = document.getElementById('submit'); + + inputField.disabled = true; + submitButton.disabled = true; +} + +export function enableInput() { + const inputField = document.getElementById('num'); + const submitButton = document.getElementById('submit'); + + inputField.disabled = false; + submitButton.disabled = false; +} diff --git a/src/main.js b/src/main.js index 64086c6..d845992 100644 --- a/src/main.js +++ b/src/main.js @@ -5,6 +5,7 @@ import { Strike, strikes } from './components/Strike.js'; import { Ball, balls, } from './components/Ball.js'; import { result } from './components/result.js'; import { validateInput } from './components/InputValidator.js'; +import { disableInput, enableInput } from './components/InputController.js'; // 임의의 정답 값 설정 및 게임 초기세팅 Random(); @@ -41,6 +42,12 @@ submitButton.addEventListener('click', () => { //결과값 보여주기 result(strikes, realballs); + + // 정답을 맞춘 경우 입력 비활성화 + if (strikes === 3) { + disableInput(); + } + }); From c11450cdfb8dbf6d22f13c18ad7b49e89218c5dc Mon Sep 17 00:00:00 2001 From: kangjuyeon1 Date: Fri, 10 May 2024 15:34:30 +0900 Subject: [PATCH 6/7] =?UTF-8?q?esLint,prettier=EA=B7=9C=EC=B9=99=EC=97=90?= =?UTF-8?q?=20=EB=94=B0=EB=9D=BC=20=EC=BD=94=EB=93=9C=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 29 +++++++++++------------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/src/main.js b/src/main.js index d845992..e8709c1 100644 --- a/src/main.js +++ b/src/main.js @@ -2,29 +2,26 @@ import { Random, value } from './components/Random.js'; import { Strike, strikes } from './components/Strike.js'; -import { Ball, balls, } from './components/Ball.js'; -import { result } from './components/result.js'; +import { Ball, balls } from './components/Ball.js'; +import { result } from './components/result.js'; import { validateInput } from './components/InputValidator.js'; import { disableInput, enableInput } from './components/InputController.js'; // 임의의 정답 값 설정 및 게임 초기세팅 Random(); - -// 확인 버튼 클릭 시 stike, ball 계산 +// 확인 버튼 클릭 시 strike, ball 계산 const submitButton = document.getElementById("submit"); - submitButton.addEventListener('click', () => { // value 배열이 비어 있는지 확인 if (value.length === 0) { console.error("Value array is empty. Random function should be called first."); return; } - - //strikes,balls 계산. - const input = document.getElementById('num').value.trim(); + // strikes, balls 계산 + const input = document.getElementById('num').value.trim(); // 입력값 유효성 검사 if (!validateInput(input)) { @@ -32,30 +29,26 @@ submitButton.addEventListener('click', () => { return; } - const inputValue = String(input); Strike(inputValue, value); Ball(inputValue, value); - let realballs = balls-strikes; - console.log(value, strikes,realballs) + let realballs = balls - strikes; + console.log(value, strikes, realballs); - - //결과값 보여주기 + // 결과값 보여주기 result(strikes, realballs); // 정답을 맞춘 경우 입력 비활성화 if (strikes === 3) { disableInput(); } - }); - - -//재시작. +// 재시작 버튼 클릭 시 게임 초기화 및 재시작 const restartButton = document.getElementById("restart"); restartButton.addEventListener('click', () => { Random(); // 새로운 랜덤 값 설정 + enableInput(); // 입력 활성화 document.querySelector('.result').style.display = 'none'; // 결과 창 숨기기 -}); \ No newline at end of file +}); From 95de633b4427784a9f81062cc426f3512ff366d0 Mon Sep 17 00:00:00 2001 From: kangjuyeon1 Date: Fri, 10 May 2024 15:40:16 +0900 Subject: [PATCH 7/7] readme --- README.md | 10 +++++++++- src/main.js | 29 ++++++++++++++++++----------- 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 8b2833c..679cf11 100644 --- a/README.md +++ b/README.md @@ -1 +1,9 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse + +#기능 +1. 임의의 정답값 설정 및 게임 초기세팅 +2. 사용자가 입력한 값과 정답값을 비교하여 ball,strike 갯수 계산 +3. 결과 오답시 alert() / 정답 시 정답 메시지 출력 +4. 잘못된 입력 시 예외알리기 +5. 정답 시, 입력 못하도록 제한하기 +6. esLint, prettier 규칙에 따라 코드 정리. \ No newline at end of file diff --git a/src/main.js b/src/main.js index e8709c1..d845992 100644 --- a/src/main.js +++ b/src/main.js @@ -2,53 +2,60 @@ import { Random, value } from './components/Random.js'; import { Strike, strikes } from './components/Strike.js'; -import { Ball, balls } from './components/Ball.js'; -import { result } from './components/result.js'; +import { Ball, balls, } from './components/Ball.js'; +import { result } from './components/result.js'; import { validateInput } from './components/InputValidator.js'; import { disableInput, enableInput } from './components/InputController.js'; // 임의의 정답 값 설정 및 게임 초기세팅 Random(); -// 확인 버튼 클릭 시 strike, ball 계산 + +// 확인 버튼 클릭 시 stike, ball 계산 const submitButton = document.getElementById("submit"); + submitButton.addEventListener('click', () => { // value 배열이 비어 있는지 확인 if (value.length === 0) { console.error("Value array is empty. Random function should be called first."); return; } - - // strikes, balls 계산 + + //strikes,balls 계산. const input = document.getElementById('num').value.trim(); + // 입력값 유효성 검사 if (!validateInput(input)) { console.error("입력값이 유효하지 않습니다."); return; } + const inputValue = String(input); Strike(inputValue, value); Ball(inputValue, value); - let realballs = balls - strikes; - console.log(value, strikes, realballs); + let realballs = balls-strikes; + console.log(value, strikes,realballs) - // 결과값 보여주기 + + //결과값 보여주기 result(strikes, realballs); // 정답을 맞춘 경우 입력 비활성화 if (strikes === 3) { disableInput(); } + }); -// 재시작 버튼 클릭 시 게임 초기화 및 재시작 + + +//재시작. const restartButton = document.getElementById("restart"); restartButton.addEventListener('click', () => { Random(); // 새로운 랜덤 값 설정 - enableInput(); // 입력 활성화 document.querySelector('.result').style.display = 'none'; // 결과 창 숨기기 -}); +}); \ No newline at end of file