diff --git a/README.md b/README.md index 8b2833c..7838ac0 100644 --- a/README.md +++ b/README.md @@ -1 +1,12 @@ -# javascript-baseball-precourse \ No newline at end of file +# 1~9까지 서로 다른수로 이루어진 3자리 수를 맞추는 게임 + +### 1~9까지 무작위 숫자 선택 + +### 숫자 입력받기 + +### 입력받은 값이 유효한지 확인 + +### 스트라이크,볼,낫싱 계산 + +### 3자리 숫자를 맞출때까지 게임 반복, 모두 맞히면 게임 종료or재시작 + diff --git a/index.html b/index.html index b021b5c..0c52027 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,28 @@ - - - - - - -
- - - + + + + + 숫자 야구 게임 + + + +
+

⚾숫자 야구 게임

+

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

+ + +

📄결과

+
+ +
+ + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..a9a9a1e 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,64 @@ +import { generateNumber } from './modules/generateNumber.js'; +import { validateInput } from './modules/validateInput.js'; + +const playerInput = document.getElementById('userInput'); +const submitBtn = document.getElementById('submit'); +const resultEl = document.getElementById('result'); +const gameOverSection = document.getElementById('game-over-section'); +const restartBtn = document.getElementById('restart-btn'); +const quitBtn = document.getElementById('quit-btn'); + +submitBtn.addEventListener('click', displayResult); +restartBtn.addEventListener('click', restartGame); +quitBtn.addEventListener('click', quitGame); + +let answer = generateNumber(); + +function displayResult() { + const inputValue = playerInput.value; + if (!validateInput(inputValue)) { + return; + } + + let strikes = 0; + let balls = 0; + for (let i = 0; i < 3; i++) { + const input = parseInt(inputValue[i]); + if (input === parseInt(answer[i])) { + strikes++; + } else if (answer.includes(input.toString())) { + balls++; + } + } + + if (strikes === 3) { + resultEl.innerText = '🎉정답을 맞추셨습니다🎉'; + gameOverSection.style.display = 'block'; + restartBtn.style.display = 'inline'; + quitBtn.style.display = 'inline'; + submitBtn.disabled = true; + playerInput.disabled = false; + } else if (strikes === 0 && balls === 0) { + resultEl.innerText = '낫싱'; + } else { + resultEl.innerText = `${balls}볼 ${strikes}스트라이크`; + } +} + +function restartGame() { + answer = generateNumber(); + gameOverSection.style.display = 'none'; + resultEl.innerText = ''; + playerInput.value = ''; + playerInput.disabled = false; + submitBtn.disabled = false; +} + +function quitGame() { + gameOverSection.style.display = 'none'; + resultEl.innerText = '게임이 종료되었습니다.'; + playerInput.disabled = true; + submitBtn.disabled = true; + restartBtn.style.display = 'none'; + quitBtn.style.display = 'none'; +} \ No newline at end of file diff --git a/src/modules/generateNumber.js b/src/modules/generateNumber.js new file mode 100644 index 0000000..613144d --- /dev/null +++ b/src/modules/generateNumber.js @@ -0,0 +1,10 @@ +export function generateNumber() { + let numbers = ''; + while (numbers.length < 3) { + const randomNumber = Math.floor(Math.random() * 9) + 1; + if (!numbers.includes(randomNumber)) { + numbers += randomNumber; + } + } + return numbers; +} \ No newline at end of file diff --git a/src/modules/validateInput.js b/src/modules/validateInput.js new file mode 100644 index 0000000..74e4da3 --- /dev/null +++ b/src/modules/validateInput.js @@ -0,0 +1,15 @@ +export function validateInput(inputValue) { + if (inputValue.length !== 3) { + alert("숫자 3개를 입력하세요.."); + return false; + } + if (!/^[1-9]{3}$/.test(inputValue)) { + alert("1~9까지의 숫자를 입력하세요."); + return false; + } + if (new Set(inputValue).size !== 3) { + alert("중복되지 않은 숫자를 입력하세요."); + return false; + } + return true; +}