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/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/Ball.js b/src/components/Ball.js new file mode 100644 index 0000000..f0fe57a --- /dev/null +++ b/src/components/Ball.js @@ -0,0 +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/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/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/components/Random.js b/src/components/Random.js new file mode 100644 index 0000000..95717e4 --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,16 @@ +let value = []; + +export function Random(){ + const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + 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);// 중복 제거. + } + + document.querySelector('.result').style.display = 'none'; + document.getElementById('num').value = ' '; +} + +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..024dab6 --- /dev/null +++ b/src/components/Strike.js @@ -0,0 +1,12 @@ +let strikes = 0; +export function Strike(inputValue,value){ + strikes = 0; + 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/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 e69de29..d845992 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,61 @@ +// main.js + +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'; +import { disableInput, enableInput } from './components/InputController.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; + } + + //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) + + + //결과값 보여주기 + result(strikes, realballs); + + // 정답을 맞춘 경우 입력 비활성화 + if (strikes === 3) { + disableInput(); + } + +}); + + + +//재시작. +const restartButton = document.getElementById("restart"); + +restartButton.addEventListener('click', () => { + Random(); // 새로운 랜덤 값 설정 + document.querySelector('.result').style.display = 'none'; // 결과 창 숨기기 +}); \ No newline at end of file