From 95af9a9ea47595c85d3143bbb640f996633e8f47 Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 19:06:22 +0900 Subject: [PATCH 01/11] [Docs] define functional specifications --- README.md | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b2833c..1758b50 100644 --- a/README.md +++ b/README.md @@ -1 +1,25 @@ -# 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. 사용자 입력 창 만들기 +2. 컴퓨터에서 랜덤값 생성 +3. 결과 띄우기 +4. 정답이라면 게임 재시작 버튼 +5. 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 그 부분부터 입력을 다시 받는다. +6. From d52089638cc1e91b42eb2aa1946308edb1cd213f Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 19:31:34 +0900 Subject: [PATCH 02/11] [Docs] redefine functional specifications --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1758b50..ca0a4d8 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,12 @@ ## 구현할 기능 -1. 사용자 입력 창 만들기 -2. 컴퓨터에서 랜덤값 생성 -3. 결과 띄우기 -4. 정답이라면 게임 재시작 버튼 -5. 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 그 부분부터 입력을 다시 받는다. -6. +1. 컴퓨터에서 랜덤값 생성 + 1. 서로 다른 임의의 수 3개로 구성 +2. 사용자 입력 받기 및 검증 + 1. 입력값이 유효하지 않을 시: alert() 으로 에러 메시지를 출력하고 그 부분부터 입력을 다시 받는다. +3. 컴퓨터 값과 사용자 입력값 비교 +4. 결과 띄우기 + 1. 3개 모두 일치: 정답 + 1. 게임 재시작 버튼 + 2. 아니라면: 오답, 힌트 제공 (e.g. 1스트라이크) From 98c37042ff4359ead23aecf9f96e9ae79fb59d95 Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 19:47:04 +0900 Subject: [PATCH 03/11] [Feat] edit index.html --- index.html | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index b021b5c..2b8c255 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,30 @@ - - + + - + 숫자 야구 게임 -
+
+

⚾️ 숫자 야구 게임

+

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

+

올바른 예: 139

+

틀린 예: 122

+ + +

📄 결과

+
+

🎉정답을 맞히셨습니다🎉

+

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

+ +
+
+

틀렸습니다.

+

힌트:

+
+
+ From 2fb4fcfa0dee0e1c4aa5867965caf94ed3edb8e2 Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 21:24:30 +0900 Subject: [PATCH 04/11] [Feat] generate a random number --- src/main.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/main.js b/src/main.js index e69de29..41f7cc8 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,18 @@ +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; +} + +window.onload = function () { + const randomNumber = generateRandomNumber(); + console.log(randomNumber); +}; From 5993403fd4e78b1f5870cd2992c1ad1d6c91533b Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 22:48:47 +0900 Subject: [PATCH 05/11] [Feat] handle the input by enter key --- src/main.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 41f7cc8..d8be075 100644 --- a/src/main.js +++ b/src/main.js @@ -12,7 +12,23 @@ function generateRandomNumber() { return digits; } +// 시작 window.onload = function () { const randomNumber = generateRandomNumber(); - console.log(randomNumber); + // console.log(randomNumber); + + const inputButton = document.getElementById("inputbutton"); + inputButton.addEventListener("click", function () { + const userInput = document.getElementById("userinput").value; + console.log(userInput); + }); + + // 키보드에서 엔터 키 입력 + const userInput = document.getElementById("userinput"); + userInput.addEventListener("keydown", function (event) { + if (event.key === "Enter") { + const userInput = document.getElementById("userinput").value; + console.log(userInput); + } + }); }; From f99240217623beb6b765a6804d57606d0e1e4862 Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 23:06:55 +0900 Subject: [PATCH 06/11] [Feat] handle & validate the input --- src/main.js | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/main.js b/src/main.js index d8be075..38a3767 100644 --- a/src/main.js +++ b/src/main.js @@ -12,23 +12,38 @@ function generateRandomNumber() { return digits; } +function handleInput(userInput) { + const userInputValue = userInput.value; + + if (validateInput(userInputValue)) { + // 정답인지 판단 과정 넣기 + console.log("valid"); + } else { + alert("잘못된 입력입니다. 다시 입력해주세요."); + userInput.value = ""; + } +} + +function validateInput(input) { + return /^[1-9]{3}$/.test(input) && new Set(input).size === 3; +} + // 시작 window.onload = function () { const randomNumber = generateRandomNumber(); // console.log(randomNumber); const inputButton = document.getElementById("inputbutton"); + const userInput = document.getElementById("userinput"); + inputButton.addEventListener("click", function () { - const userInput = document.getElementById("userinput").value; - console.log(userInput); + handleInput(userInput); }); // 키보드에서 엔터 키 입력 - const userInput = document.getElementById("userinput"); userInput.addEventListener("keydown", function (event) { if (event.key === "Enter") { - const userInput = document.getElementById("userinput").value; - console.log(userInput); + handleInput(userInput); } }); }; From 70abef632ada865cff31fe633aa5ea1d6c2162b1 Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 23:18:10 +0900 Subject: [PATCH 07/11] [Feat] calculate result --- src/main.js | 35 +++++++++++++++++++++++++++++------ 1 file changed, 29 insertions(+), 6 deletions(-) diff --git a/src/main.js b/src/main.js index 38a3767..e01b7b3 100644 --- a/src/main.js +++ b/src/main.js @@ -12,12 +12,13 @@ function generateRandomNumber() { return digits; } -function handleInput(userInput) { +function handleInput(randomNumber, userInput) { const userInputValue = userInput.value; if (validateInput(userInputValue)) { - // 정답인지 판단 과정 넣기 - console.log("valid"); + const result = calculateResult(randomNumber, userInputValue); + // console.log(result); + return result; // { strikes, balls } } else { alert("잘못된 입력입니다. 다시 입력해주세요."); userInput.value = ""; @@ -28,22 +29,44 @@ function validateInput(input) { return /^[1-9]{3}$/.test(input) && new Set(input).size === 3; } +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 }; +} + // 시작 window.onload = function () { const randomNumber = generateRandomNumber(); - // console.log(randomNumber); + console.log("random number: ", randomNumber); + let strikes = 0; + let balls = 0; const inputButton = document.getElementById("inputbutton"); const userInput = document.getElementById("userinput"); inputButton.addEventListener("click", function () { - handleInput(userInput); + ({ strikes, balls } = handleInput(randomNumber, userInput)); + console.log(strikes, ", ", balls); }); // 키보드에서 엔터 키 입력 userInput.addEventListener("keydown", function (event) { if (event.key === "Enter") { - handleInput(userInput); + ({ strikes, balls } = handleInput(randomNumber, userInput)); + console.log(strikes, ", ", balls); } }); }; From 44702a5dba174e9b16dd2471ce7a6e5616d69b10 Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 23:25:38 +0900 Subject: [PATCH 08/11] [Refactor] combine the same functions --- src/main.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/main.js b/src/main.js index e01b7b3..006b67a 100644 --- a/src/main.js +++ b/src/main.js @@ -57,16 +57,16 @@ window.onload = function () { const inputButton = document.getElementById("inputbutton"); const userInput = document.getElementById("userinput"); - inputButton.addEventListener("click", function () { + // 버튼 클릭 또는 엔터 키 입력 시 + const handleInputEvent = function () { ({ strikes, balls } = handleInput(randomNumber, userInput)); - console.log(strikes, ", ", balls); - }); + console.log(`strikes: ${strikes}, balls: ${balls}`); + }; - // 키보드에서 엔터 키 입력 + inputButton.addEventListener("click", handleInputEvent); userInput.addEventListener("keydown", function (event) { if (event.key === "Enter") { - ({ strikes, balls } = handleInput(randomNumber, userInput)); - console.log(strikes, ", ", balls); + handleInputEvent(); } }); }; From 9e1f140b52596cf048a523261981ff547ae1b92a Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 23:40:51 +0900 Subject: [PATCH 09/11] [Feat] print the result --- index.html | 3 ++- src/main.js | 34 +++++++++++++++++++++++++++++++--- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 2b8c255..ec6e6ff 100644 --- a/index.html +++ b/index.html @@ -13,13 +13,14 @@

⚾️ 숫자 야구 게임

틀린 예: 122

-

📄 결과

+

📄 결과

🎉정답을 맞히셨습니다🎉

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

+

📄 결과

틀렸습니다.

힌트:

diff --git a/src/main.js b/src/main.js index 006b67a..9d4292e 100644 --- a/src/main.js +++ b/src/main.js @@ -49,24 +49,52 @@ function calculateResult(randomNumber, userInput) { // 시작 window.onload = function () { - const randomNumber = generateRandomNumber(); + 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: ${strikes}, balls: ${balls}`); + // 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(); // 입력 필드에 포커스 설정 + }); }; From d817d0af5b7db3cbe13dd7c5b2eaa193b5cd069b Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 23:50:53 +0900 Subject: [PATCH 10/11] [Refactor] modularize --- src/functions/calculateResult.js | 17 +++++++++ src/functions/generateRandomNumber.js | 13 +++++++ src/functions/handleInput.js | 18 ++++++++++ src/main.js | 50 ++------------------------- 4 files changed, 50 insertions(+), 48 deletions(-) create mode 100644 src/functions/calculateResult.js create mode 100644 src/functions/generateRandomNumber.js create mode 100644 src/functions/handleInput.js 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 9d4292e..f3be7cb 100644 --- a/src/main.js +++ b/src/main.js @@ -1,51 +1,5 @@ -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; -} - -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; -} - -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 }; -} +import generateRandomNumber from "./functions/generateRandomNumber.js"; +import handleInput from "./functions/handleInput.js"; // 시작 window.onload = function () { From 7cc63180cd88bc8307cbeb9f75e57d49048f4218 Mon Sep 17 00:00:00 2001 From: joojjang Date: Mon, 6 May 2024 23:52:09 +0900 Subject: [PATCH 11/11] [Chore] hide random number on console --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index f3be7cb..9de88c4 100644 --- a/src/main.js +++ b/src/main.js @@ -4,7 +4,7 @@ import handleInput from "./functions/handleInput.js"; // 시작 window.onload = function () { let randomNumber = generateRandomNumber(); - console.log("random number: ", randomNumber); + // console.log("random number: ", randomNumber); let strikes = 0; let balls = 0;