diff --git a/README.md b/README.md index 8b2833c..ca0a4d8 100644 --- a/README.md +++ b/README.md @@ -1 +1,28 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse + +## 기능 요구 사항 + +1. 1부터 9까지 서로 다른 수로 이루어진 3자리의 수를 맞추는 게임이다. +2. 같은 수가 같은 자리에 있으면 스트라이크, 다른 자리에 있으면 볼, 같은 수가 전혀 없으면 낫싱이란 힌트를 얻고, 그 힌트를 이용해서 먼저 상대방(컴퓨터)의 + 수를 맞추면 승리한다. + > e.g. 상대방(컴퓨터)의 수가 425일 때, + > + > - 123을 제시한 경우: 1스트라이크 + > - 456을 제시한 경우: 1볼 1스트라이크 + > - 789를 제시한 경우: 낫싱 +3. 컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다. 게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력하고, 컴퓨터는 입력한 숫자에 대한 결과를 출력한다. +4. 이 같은 과정을 반복해 컴퓨터가 선택한 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼이 표시된다. +5. 게임을 종료한 후 게임을 다시 시작하거나 완전히 종료할 수 있다. +6. 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 그 부분부터 입력을 다시 받는다. + +## 구현할 기능 + +1. 컴퓨터에서 랜덤값 생성 + 1. 서로 다른 임의의 수 3개로 구성 +2. 사용자 입력 받기 및 검증 + 1. 입력값이 유효하지 않을 시: alert() 으로 에러 메시지를 출력하고 그 부분부터 입력을 다시 받는다. +3. 컴퓨터 값과 사용자 입력값 비교 +4. 결과 띄우기 + 1. 3개 모두 일치: 정답 + 1. 게임 재시작 버튼 + 2. 아니라면: 오답, 힌트 제공 (e.g. 1스트라이크) diff --git a/index.html b/index.html index b021b5c..ec6e6ff 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,31 @@ - - + + - + 숫자 야구 게임 -
+
+

⚾️ 숫자 야구 게임

+

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

+

올바른 예: 139

+

틀린 예: 122

+ + +
+

📄 결과

+

🎉정답을 맞히셨습니다🎉

+

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

+ +
+
+

📄 결과

+

틀렸습니다.

+

힌트:

+
+
+ diff --git a/src/functions/calculateResult.js b/src/functions/calculateResult.js new file mode 100644 index 0000000..1b41355 --- /dev/null +++ b/src/functions/calculateResult.js @@ -0,0 +1,17 @@ +export default function calculateResult(randomNumber, userInput) { + const randomDigits = randomNumber; + const userDigits = userInput.split("").map(Number); + + let strikes = 0; + let balls = 0; + + for (let i = 0; i < randomDigits.length; i++) { + if (randomDigits[i] === userDigits[i]) { + strikes++; + } else if (randomDigits.includes(userDigits[i])) { + balls++; + } + } + + return { strikes, balls }; +} diff --git a/src/functions/generateRandomNumber.js b/src/functions/generateRandomNumber.js new file mode 100644 index 0000000..4697962 --- /dev/null +++ b/src/functions/generateRandomNumber.js @@ -0,0 +1,13 @@ +export default function generateRandomNumber() { + let digits = []; + + while (digits.length < 3) { + let randomNumber = Math.floor(Math.random() * 9) + 1; + + if (!digits.includes(randomNumber)) { + digits.push(randomNumber); + } + } + + return digits; +} diff --git a/src/functions/handleInput.js b/src/functions/handleInput.js new file mode 100644 index 0000000..23fe28e --- /dev/null +++ b/src/functions/handleInput.js @@ -0,0 +1,18 @@ +import calculateResult from "../functions/calculateResult.js"; + +export default function handleInput(randomNumber, userInput) { + const userInputValue = userInput.value; + + if (validateInput(userInputValue)) { + const result = calculateResult(randomNumber, userInputValue); + // console.log(result); + return result; // { strikes, balls } + } else { + alert("잘못된 입력입니다. 다시 입력해주세요."); + userInput.value = ""; + } +} + +function validateInput(input) { + return /^[1-9]{3}$/.test(input) && new Set(input).size === 3; +} diff --git a/src/main.js b/src/main.js index e69de29..9de88c4 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,54 @@ +import generateRandomNumber from "./functions/generateRandomNumber.js"; +import handleInput from "./functions/handleInput.js"; + +// 시작 +window.onload = function () { + let randomNumber = generateRandomNumber(); + // console.log("random number: ", randomNumber); + let strikes = 0; + let balls = 0; + + const inputButton = document.getElementById("inputbutton"); + const userInput = document.getElementById("userinput"); + const hintElement = document.getElementById("hint"); + const correctResultEl = document.getElementById("correct"); + const incorrectResultEl = document.getElementById("incorrect"); + correctResultEl.style.display = "none"; + incorrectResultEl.style.display = "none"; + + const handleInputEvent = function () { + ({ strikes, balls } = handleInput(randomNumber, userInput)); + // console.log(strikes, ", ", balls); + + if (strikes === 3) { + correctResultEl.style.display = "block"; + incorrectResultEl.style.display = "none"; + } else if (strikes === 0 && balls === 0) { + correctResultEl.style.display = "none"; + incorrectResultEl.style.display = "block"; + hintElement.textContent = "낫싱"; + } else { + correctResultEl.style.display = "none"; + incorrectResultEl.style.display = "block"; + hintElement.textContent = `${balls}볼 ${strikes}스트라이크`; + } + }; + + // 사용자 인풋 입력 시 + inputButton.addEventListener("click", handleInputEvent); + userInput.addEventListener("keydown", function (event) { + if (event.key === "Enter") { + handleInputEvent(); + } + }); + + // 게임 재시작 + document.getElementById("restartbutton").addEventListener("click", function () { + correctResultEl.style.display = "none"; + incorrectResultEl.style.display = "none"; + userInput.value = ""; + randomNumber = generateRandomNumber(); + console.log(randomNumber); + userInput.focus(); // 입력 필드에 포커스 설정 + }); +};