diff --git a/README.md b/README.md index 8b2833c..0b0514e 100644 --- a/README.md +++ b/README.md @@ -1 +1,13 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse + +## 과제 소개 +#### 카카오테크 캠퍼스에서 진행한 과제로 숫자 야구 게임입니다. +#### 1~9 까지 컴퓨터가 생성한 숫자 중에서 사용자가 숫자를 입력하면 그에 맞는 결과를 판단해서 보여줍니다. + +## 기능 소개 +#### main.js : 변수들과 전체적인 로직의 흐름이 들어있는 파일입니다. +#### - 게임 결과 출력, 게임 재시작, 게임 종료 로직이 추가되어있습니다. +#### radomNumber.js : 컴퓨터가 1~9까지 랜덤으로 숫자를 생성합니다. +#### check.js : 숫자가 중복인지, 3글자인지를 판단하는 유효성 검사 로직입니다. +#### gameLogic.js : 숫자 야구를 진행하는 게임 로직입니다. + diff --git a/index.html b/index.html index b021b5c..9cbdc19 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,16 @@ - + 숫자 야구 게임 + -
- +

⚾숫자 야구 게임

+
1~9까지의 수를 중복없이 3개 입력해주세요.
올바른 예)139
틀린 예)122
+ + +
+ +
diff --git a/src/check.js b/src/check.js new file mode 100644 index 0000000..64f85c2 --- /dev/null +++ b/src/check.js @@ -0,0 +1,21 @@ +// 유효성 검사 및 값 저장 +export function checkAnswer(answer,inputBox) { + const userInput = document.getElementById('userInput').value + if (userInput.length !== 3) { + alert('3자리 수를 입력하세요.') + inputBox() + return; + } + answer = userInput.split('').map(Number) + if(hasDuplicates(answer)) { + alert('중복된 숫자를 포함할 수 없습니다.') + inputBox() + return; + } + return answer; +} + +// 중복 제거 +function hasDuplicates(array) { + return (new Set(array)).size !== array.length +} \ No newline at end of file diff --git a/src/gameLogic.js b/src/gameLogic.js new file mode 100644 index 0000000..da6f546 --- /dev/null +++ b/src/gameLogic.js @@ -0,0 +1,27 @@ +import { checkAnswer } from "./check"; +import { generateRandomNumber } from "./randomNumber"; + +let answer = []; + +export function evaluateGuess(numbers, answer) { + let strike = 0; + let ball = 0; + + for (let i = 0; i < numbers.length; i++) { + if (numbers[i] === answer[i]) { + strike++; + } else if (answer.includes(numbers[i])) { + ball++; + } + } + + let resultMessage = ''; + if (strike === 3) { + resultMessage = '🎉정답을 맞추셨습니다🎉'; + } else if (strike === 0 && ball === 0) { + resultMessage = '낫싱'; + } else { + resultMessage = `${strike} 스트라이크 ${ball} 볼`; + } + return resultMessage; +} diff --git a/src/main.js b/src/main.js index e69de29..eb5a96b 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,101 @@ +import { checkAnswer } from "./check"; +import { generateRandomNumber } from "./randomNumber"; +import { evaluateGuess } from "./gameLogic"; + +// 컴퓨터가 입력한 값, 1~9까지 랜덤으로 3자리 수 생성 +let numbers = generateRandomNumber() +// 사용자가 입력한 값 +let answer = []; +window.onload = function () { + const submitButton = document.getElementById('submitButton') + submitButton.addEventListener('click', () => { + answer = checkAnswer(answer); + if (answer) { + const resultMessage = evaluateGuess(numbers, answer) + printResult(resultMessage) + } + }); +}; + +console.log(numbers) + +// 출력 메세지 함수 +function printResult(resultMessage) { + const resultDiv = document.getElementById('result') + resultDiv.innerHTML = resultMessage ? `

📝결과

${resultMessage}

` : '' + + //게임 재시작 안내 문구 + const restartMessage = document.createElement('div') + restartMessage.textContent = '게임을 새로 시작하시겠습니까?' + + //restartButton 버튼 + const restartButton = document.createElement('button') // restartButton 정의 + restartButton.textContent = '게임 재시작' + restartButton.id = 'restartButton' + restartButton.style.display = resultMessage ? 'block' : 'none' + restartButton.addEventListener('click', restartGame) + + //endGame 버튼 + const endGameButton = document.createElement('button') // restartButton 정의 + endGameButton.textContent = '게임 종료' + endGameButton.id = 'endGameButton' + endGameButton.style.display = resultMessage ? 'block' : 'none' + endGameButton.addEventListener('click', endGame) + + //공백 요소 생성 + const space = document.createElement('div') + space.textContent = '\xa0' + + //result div에 추가 + resultDiv.appendChild(restartMessage) + resultDiv.appendChild(space) + resultDiv.appendChild(restartButton) + resultDiv.appendChild(space) + resultDiv.appendChild(endGameButton) +} + +//게임 재시작 함수 +function restartGame() { + + numbers = generateRandomNumber() + + console.log(numbers) + + //컴퓨터가 입력한 값, 랜덤으로 3자리 수 생성 + answer = [] + + //결과창 초기화 + clearResult() + + //텍스트 상자 초기화 + inputBox() +} + +//게임 종료 함수 +function endGame() { + //결과창 초기화 + clearResult() + + //텍스트 상자 초기화 + inputBox() + + //개임 종료 메시지 출력 + const resultDiv = document.getElementById('result') + const endMessage = document.createElement('h4') + endMessage.textContent = '게임이 종료되었습니다' + resultDiv.appendChild(endMessage) +} + +// 텍스트 상자 초기화 +function inputBox() { + const inputBox = document.getElementById('userInput') + inputBox.value = ''; + inputBox.focus(); // 입력 상자에 포커스를 맞춘다. +} + +//결과창 초기화 함수 +function clearResult() { + const resultDiv = document.getElementById('result') + resultDiv.textContent = ''; +} + diff --git a/src/randomNumber.js b/src/randomNumber.js new file mode 100644 index 0000000..db2f4e4 --- /dev/null +++ b/src/randomNumber.js @@ -0,0 +1,10 @@ +//랜덤 넘버 생성 +export function generateRandomNumber() { + let randomNumbers = []; + while (randomNumbers.length < 3) { + const num = Math.floor(Math.random() * 9) + 1 + if (!randomNumbers.includes(num)) + randomNumbers.push(num); + } + return randomNumbers; +}