diff --git a/README.md b/README.md index 8b2833c..b74d8a2 100644 --- a/README.md +++ b/README.md @@ -1 +1,36 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse +게임 시작 + '1~9까지의 수를 중복없이 3개 입력해주세요.' 출력 + +게임 재시작 / 프로그램 종료 + 3개의 숫자를 모두 맞힐 경우 : '정답을 맞추셨습니다' '게임을 새로 시작하시겠습니까?' 출력 + 재시작 버튼을 누르면 게임이 다시 시작됨 + 재시작 버튼 외에 특별한 종료 버튼은 없음 + +Random 값 추출 + 서로 다른 숫자 3개로 구성된 배열 생성 + Math.random()과 Math.floor() 사용하여 randomNum 생성 + 생성된 randomNum과 중복되는 숫자가 있는지 검사 후 추가 + +사용자의 입력 + 입력값 세자리가 모두 다르면 통과 + alert()를 사용하여 에러 메시지 출력 + 입력 받은 숫자가 3자리가 아닌 경우 + 입력 받은 값이 숫자가 아닌 경우 + 입력 받은 값에 중복된 숫자가 있을 경우 + +3자리의 수를 맞추기 + 같은 수가 같은 자리 : '스트라이크' + 같은 수가 다른 자리 : '볼' + 같은 수가 없으면 : '낫싱' + +필요한 기능 + 숫자 배열 생성 + 스트라이크 개수 체크 + 볼 개수 체크 + 숫자 비교 함수 + +출력 + 입력한 수에 대한 결과를 볼,스트라이크 개수로 표시 : ' 볼 스트라이크' + 하나도 없는 경우 : '낫싱' + 3개의 숫자를 모두 맞힐 경우 : '정답을 맞추셨습니다' '게임을 새로 시작하시겠습니까?' 출력 \ No newline at end of file diff --git a/index.html b/index.html index b021b5c..6f516ec 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,27 @@ - + baseball-game -
+
+

⚾숫자 야구 게임

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

📄 결과

+
+
+ diff --git "a/src/components/\brandomNum.js" "b/src/components/\brandomNum.js" new file mode 100644 index 0000000..a94538f --- /dev/null +++ "b/src/components/\brandomNum.js" @@ -0,0 +1,10 @@ +export default function randomNum() { + let arr = []; + while(arr.length < 3) { + let num = Math.floor(Math.random() * 9) + 1; + if (!arr.includes(num)) { + arr.push(num); + } + } + return arr; +} \ No newline at end of file diff --git a/src/components/checkError.js b/src/components/checkError.js new file mode 100644 index 0000000..00b2572 --- /dev/null +++ b/src/components/checkError.js @@ -0,0 +1,23 @@ +export default function checkError(value) { + // 입력 받은 값이 숫자가 아닌 경우 + if (!value || isNaN(value)) { + alert("숫자만 입력해야 합니다.\n다시 입력해주세요."); + return false; + } + + // 입력 받은 숫자가 3자리가 아닌 경우 + if (value.length !== 3) { + alert("3자리 수의 숫자만 입력해야 합니다.\n다시 입력해주세요."); + return false; + } + + // 입력 받은 값에 중복된 숫자가 있을 경우 + let digits = value.split(''); + let uniqueDigits = [...new Set(digits)]; + if (uniqueDigits.length !== digits.length) { + alert("중복 없이 숫자를 입력해야 합니다.\n다시 입력해주세요."); + return false; + } + return true; +} + diff --git a/src/components/inputNum.js b/src/components/inputNum.js new file mode 100644 index 0000000..ae0a042 --- /dev/null +++ b/src/components/inputNum.js @@ -0,0 +1,19 @@ +import checkError from "./checkError"; +import playGame from "./playGame"; + +export default function inputNum() { + const confirmButton = document.getElementById('confirmButton'); + + function handleConfirmClick() { + const userInput = document.getElementById('user-input').value; + if (!userInput) return; + + const isValid = checkError(userInput); + if (!isValid) { + return; + } + playGame(userInput); + } + + confirmButton.addEventListener('click', handleConfirmClick); +} diff --git a/src/components/playGame.js b/src/components/playGame.js new file mode 100644 index 0000000..d980c1b --- /dev/null +++ b/src/components/playGame.js @@ -0,0 +1,44 @@ +import randomNum from "./\brandomNum"; + +let comValue = randomNum(); +console.log(comValue); + +export default function playGame() { + + const userInput = document.getElementById('user-input').value; + + let strike = 0; + let ball = 0; + + const userInputArray = Array.from(userInput.toString()).map(Number); + const resultDiv = document.getElementById('result'); + + for (let i = 0; i < userInputArray.length; i++) { + if (comValue.includes(userInputArray[i]) && userInputArray[i] !== comValue[i]) { + ball++; + } + } + + for (let i = 0; i < comValue.length; i++) { + if (userInputArray[i] === comValue[i]) { + strike++; + } + } + + if (strike === 3) { + resultDiv.innerHTML = `정답을 맞추셨습니다!

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

`; + const restartButton = document.createElement("button"); + restartButton.innerText = "게임 재시작"; + restartButton.addEventListener("click", function() { + location.reload(); + comValue = randomNum(); + document.getElementById('user-input').value = ''; + restartButton.remove(); + }); + document.getElementById('app').appendChild(restartButton); + } else if (strike === 0 && ball === 0) { + resultDiv.innerHTML = `낫싱`; + } else { + resultDiv.innerHTML = `${ball}볼 ${strike}스트라이크`; + } +} diff --git a/src/main.js b/src/main.js index e69de29..9018ab5 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,7 @@ +import inputNum from "./components/inputNum"; +import playGame from "./components/playGame"; + +function main() { + inputNum(playGame); +} +main(); \ No newline at end of file