From 679fe804c0793ad49a01e4c7a9dc27f5fbe43b9a Mon Sep 17 00:00:00 2001 From: parkjiwon Date: Mon, 27 Nov 2023 18:54:27 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=BB=B4=ED=93=A8=ED=84=B0=20?= =?UTF-8?q?=EC=88=AB=EC=9E=90,=20=EC=9D=B8=ED=92=8B=20=ED=95=B8=EB=93=A4?= =?UTF-8?q?=EB=9F=AC=20+=20build:=20=EB=AA=A8=EB=93=88=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/contants.js | 5 +++++ src/getOtherNumber.js | 12 ++++++++++++ src/handleInputValue.js | 9 +++++++++ 4 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 src/contants.js create mode 100644 src/getOtherNumber.js create mode 100644 src/handleInputValue.js diff --git a/index.html b/index.html index 041e0300..5040341e 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@

⚾ 숫자 야구 게임

올바른 예) 139
틀린 예) 122

- +

📄 결과

diff --git a/src/contants.js b/src/contants.js new file mode 100644 index 00000000..d9f0d7b3 --- /dev/null +++ b/src/contants.js @@ -0,0 +1,5 @@ +const reslut = document.querySelector("#result"); +const input = document.querySelector("#user-input"); +const button = document.querySelector("submit"); + +export { reslut, input, button }; diff --git a/src/getOtherNumber.js b/src/getOtherNumber.js new file mode 100644 index 00000000..046670c0 --- /dev/null +++ b/src/getOtherNumber.js @@ -0,0 +1,12 @@ +export default function getOtherNumber(otherNumber) { + var otherNumber = []; + var gameNumber = Math.floor(Math.random() * 9) + 1; + + while (otherNumber.length < 3) { + if (!otherNumber.includes(gameNumber)) { + otherNumber.push(gameNumber); + } + } + console.log(otherNumber); + return otherNumber.join(""); +} diff --git a/src/handleInputValue.js b/src/handleInputValue.js new file mode 100644 index 00000000..3d060b72 --- /dev/null +++ b/src/handleInputValue.js @@ -0,0 +1,9 @@ +export default function handleInputValue(e) { + if (isNaN(e.target)) { + alert("숫자로 입력해주세요"); + } else if (e.target.value.length > 3) { + alert("세자리 숫자까지 입력해주세요"); + } else { + return e.target.value; + } +} From f0d71639a5f6ae498ca5d87aaf02cbb43919bd60 Mon Sep 17 00:00:00 2001 From: parkjiwon Date: Thu, 30 Nov 2023 20:48:59 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Judgment.js | 12 ++++++++++++ src/contants.js | 6 +++--- src/getOtherNumber.js | 9 +++++---- src/handleInputValue.js | 7 +++++-- src/index.js | 42 ++++++++++++++++++++++++++++++++++------- 5 files changed, 60 insertions(+), 16 deletions(-) create mode 100644 src/Judgment.js diff --git a/src/Judgment.js b/src/Judgment.js new file mode 100644 index 00000000..f88edb6a --- /dev/null +++ b/src/Judgment.js @@ -0,0 +1,12 @@ +export default function judgment(rightAnswer, answer) { + let strike = 0; + let ball = 0; + + for (let i = 0; i < rightAnswer.length; i++) { + if (rightAnswer[i] === answer[i]) { + strike++; + } else if (rightAnswer.includes(answer[i])) { + ball++; + } + } +} diff --git a/src/contants.js b/src/contants.js index d9f0d7b3..9a7c4745 100644 --- a/src/contants.js +++ b/src/contants.js @@ -1,5 +1,5 @@ -const reslut = document.querySelector("#result"); +const result = document.querySelector("#result"); const input = document.querySelector("#user-input"); -const button = document.querySelector("submit"); +const button = document.querySelector("#submit"); -export { reslut, input, button }; +export { result, input, button }; diff --git a/src/getOtherNumber.js b/src/getOtherNumber.js index 046670c0..127bf355 100644 --- a/src/getOtherNumber.js +++ b/src/getOtherNumber.js @@ -1,12 +1,13 @@ -export default function getOtherNumber(otherNumber) { +export default function getOtherNumber() { var otherNumber = []; - var gameNumber = Math.floor(Math.random() * 9) + 1; while (otherNumber.length < 3) { + var gameNumber = Math.floor(Math.random() * 9) + 1; + if (!otherNumber.includes(gameNumber)) { otherNumber.push(gameNumber); } } - console.log(otherNumber); - return otherNumber.join(""); + + return otherNumber; } diff --git a/src/handleInputValue.js b/src/handleInputValue.js index 3d060b72..b46e8f62 100644 --- a/src/handleInputValue.js +++ b/src/handleInputValue.js @@ -1,9 +1,12 @@ export default function handleInputValue(e) { - if (isNaN(e.target)) { + const inputValue = parseInt(e.target.value); + + if (isNaN(inputValue)) { alert("숫자로 입력해주세요"); } else if (e.target.value.length > 3) { alert("세자리 숫자까지 입력해주세요"); } else { - return e.target.value; + const gameValue = e.target.value.split("").map(Number); + return gameValue; } } diff --git a/src/index.js b/src/index.js index 1553d753..4821e287 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,41 @@ +import { result, input, button } from "./contants.js"; +import handleInputValue from "./handleInputValue.js"; +import getOtherNumber from "./getOtherNumber.js"; +import judgment from "./Judgment.js"; + export default function BaseballGame() { this.play = function (computerInputNumbers, userInputNumbers) { - return "결과 값 String"; + const { strike, ball } = judgment(computerInputNumbers, userInputNumbers); + + if (strike === 3) { + return "정답입니다"; + } else if ((strike === 0, ball === 0)) { + return "낫싱"; + } else { + return `볼: ${ball}, 스트라이크: ${strike}`; + } }; } -// export default class BaseballGame { -// play(computerInputNumbers, userInputNumbers) { -// return "결과 값 String"; -// } -// } +input.addEventListener("input", handleInputValue); + +const baseballGame = new BaseballGame(); + +button.addEventListener("submit", (e) => { + e.preventDefault(); + const message = baseballGame.play(getOtherNumber(), input.value); + result.textContent = message; + + if (message === "정답입니다") { + const reTry = document.createElement("button"); + reTry.setAttribute("id", "game-restart-button"); + reTry.textContent = "재시작"; + result.nextElementSibling.append(reTry); -new BaseballGame(); + reTry.addEventListener("click", () => { + input.value = ""; + result.textContent = ""; + reTry.remove(); + }); + } +}); From b91d4429b5f5c63f0929e53e0a1f24a0c45380d9 Mon Sep 17 00:00:00 2001 From: parkjiwon Date: Tue, 5 Dec 2023 00:56:45 +0900 Subject: [PATCH 3/3] feat:make input rule --- index.html | 7 ++- src/Judgment.js | 12 ---- src/contants.js | 5 -- src/getOtherNumber.js | 13 ----- src/handleInputValue.js | 12 ---- src/index.js | 120 ++++++++++++++++++++++++++++------------ 6 files changed, 91 insertions(+), 78 deletions(-) delete mode 100644 src/Judgment.js delete mode 100644 src/contants.js delete mode 100644 src/getOtherNumber.js delete mode 100644 src/handleInputValue.js diff --git a/index.html b/index.html index 5040341e..2259185f 100644 --- a/index.html +++ b/index.html @@ -13,10 +13,13 @@

⚾ 숫자 야구 게임

올바른 예) 139
틀린 예) 122

- - +
+ + +

📄 결과

+ diff --git a/src/Judgment.js b/src/Judgment.js deleted file mode 100644 index f88edb6a..00000000 --- a/src/Judgment.js +++ /dev/null @@ -1,12 +0,0 @@ -export default function judgment(rightAnswer, answer) { - let strike = 0; - let ball = 0; - - for (let i = 0; i < rightAnswer.length; i++) { - if (rightAnswer[i] === answer[i]) { - strike++; - } else if (rightAnswer.includes(answer[i])) { - ball++; - } - } -} diff --git a/src/contants.js b/src/contants.js deleted file mode 100644 index 9a7c4745..00000000 --- a/src/contants.js +++ /dev/null @@ -1,5 +0,0 @@ -const result = document.querySelector("#result"); -const input = document.querySelector("#user-input"); -const button = document.querySelector("#submit"); - -export { result, input, button }; diff --git a/src/getOtherNumber.js b/src/getOtherNumber.js deleted file mode 100644 index 127bf355..00000000 --- a/src/getOtherNumber.js +++ /dev/null @@ -1,13 +0,0 @@ -export default function getOtherNumber() { - var otherNumber = []; - - while (otherNumber.length < 3) { - var gameNumber = Math.floor(Math.random() * 9) + 1; - - if (!otherNumber.includes(gameNumber)) { - otherNumber.push(gameNumber); - } - } - - return otherNumber; -} diff --git a/src/handleInputValue.js b/src/handleInputValue.js deleted file mode 100644 index b46e8f62..00000000 --- a/src/handleInputValue.js +++ /dev/null @@ -1,12 +0,0 @@ -export default function handleInputValue(e) { - const inputValue = parseInt(e.target.value); - - if (isNaN(inputValue)) { - alert("숫자로 입력해주세요"); - } else if (e.target.value.length > 3) { - alert("세자리 숫자까지 입력해주세요"); - } else { - const gameValue = e.target.value.split("").map(Number); - return gameValue; - } -} diff --git a/src/index.js b/src/index.js index 4821e287..344ba9f4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,41 +1,93 @@ -import { result, input, button } from "./contants.js"; -import handleInputValue from "./handleInputValue.js"; -import getOtherNumber from "./getOtherNumber.js"; -import judgment from "./Judgment.js"; - -export default function BaseballGame() { - this.play = function (computerInputNumbers, userInputNumbers) { - const { strike, ball } = judgment(computerInputNumbers, userInputNumbers); - - if (strike === 3) { - return "정답입니다"; - } else if ((strike === 0, ball === 0)) { - return "낫싱"; - } else { - return `볼: ${ball}, 스트라이크: ${strike}`; +const generateNumbers = (min = 1, max = 9) => { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1) + min); +}; + +const generateWinningNumber = () => { + const result = []; + + while (result.length < 3) { + const randomNumber = generateNumbers(); + + if (result.includes(randomNumber)) { + continue; } - }; -} -input.addEventListener("input", handleInputValue); + result.push(randomNumber); + } + + return result; +}; + +const play = (winningNumber, userInputValue) => { + const userInputNumber = userInputValue.split("").map(Number); -const baseballGame = new BaseballGame(); + let strike = 0; + let ball = 0; -button.addEventListener("submit", (e) => { - e.preventDefault(); - const message = baseballGame.play(getOtherNumber(), input.value); - result.textContent = message; + for (let i = 0; i < userInputNumber.length; i++) { + if (userInputNumber[i] === winningNumber[i]) { + strike++; + } else if (winningNumber.includes(userInputNumber[i])) { + ball++; + } + } - if (message === "정답입니다") { - const reTry = document.createElement("button"); - reTry.setAttribute("id", "game-restart-button"); - reTry.textContent = "재시작"; - result.nextElementSibling.append(reTry); + const $result = document.querySelector("#result"); - reTry.addEventListener("click", () => { - input.value = ""; - result.textContent = ""; - reTry.remove(); - }); + if (strike === 3) { + const $gameRestartButton = document.querySelector("#game-restart-button"); + $result.textContent = + "정답을 맞추셨습니다 🎉 게임을 새로 시작하시겠습니까?"; + $gameRestartButton.style.display = "block"; + } else if (strike || ball) { + $result.textContent = `${strike} 스트라이크 ${ball} 볼`; + } else { + $result.textContent = "낫싱"; } -}); +}; + +const baseballGame = () => { + const winningNumber = generateWinningNumber(); + + console.log("winningNumber", winningNumber); + + const $input = document.querySelector("#user-input"); + + $input.addEventListener("keydown", (e) => { + if (e.target.value.length >= 3) { + if (e.key === "Enter" || e.key === "Backspace") return; + + e.preventDefault(); + alert("3자리수 이하의 숫자만 입력해 주세요"); + } + }); + + const $form = document.querySelector("#form"); + + $form.addEventListener("submit", (event) => { + event.preventDefault(); + + const userInputValue = event.target[0].value; + if (userInputValue.length !== 3) { + alert("세자리 숫자를 입력해 주세요"); + e.preventDefault(); + } + + play(winningNumber, userInputValue); + }); + + const $gameRestartButton = document.querySelector("#game-restart-button"); + $gameRestartButton.addEventListener("click", () => { + console.log("리스타트"); + + const $result = document.querySelector("#result"); + + $result.textContent = ""; + $gameRestartButton.style.display = "none"; + baseballGame(); + }); +}; + +baseballGame();