From b646f6ccdef77e231a07bfd3311c78f537f509f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A7=80=EC=84=A0?= Date: Fri, 10 Nov 2023 01:21:58 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=EC=BB=B4=ED=93=A8=ED=84=B0?= =?UTF-8?q?=EC=B8=A1=20=EB=82=9C=EC=88=98=20=EC=83=9D=EC=84=B1=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 index.js diff --git a/index.js b/index.js new file mode 100644 index 00000000..16da3708 --- /dev/null +++ b/index.js @@ -0,0 +1,9 @@ +//각 자릿수 별로 난수 생성하여 이어붙인 후 숫자형 변환 +//아직 자리 수 겹치지 않도록 구현 x +function generateNum() { + let firstNum = String(Math.floor(Math.random() * 10)); + let secondNum = String(Math.floor(Math.random() * 10)); + let thirdNum = String(Math.floor(Math.random() * 10)); + + return firstNum + secondNum + thirdNum; +} From c3a2bcf38035f3140bf97f519729812987752f1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A7=80=EC=84=A0?= Date: Sat, 11 Nov 2023 18:22:00 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=EA=B2=8C=EC=9E=84=20=EC=8B=A4?= =?UTF-8?q?=ED=96=89=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/index.js b/index.js index 16da3708..e865933d 100644 --- a/index.js +++ b/index.js @@ -7,3 +7,34 @@ function generateNum() { return firstNum + secondNum + thirdNum; } + +const myNumber = [1, 2, 3]; +const userNumber = [3, 2, 6]; + +//myNumber과 userNumber의 각 자리수를 배열로 받아 게임 실행 + +function play(myNumber, userNumber) { + let strike = 0; + let ball = 0; + + for (let i = 0; i < 3; i++) { + const index = myNumber.indexOf(userNumber[i]); + + if (!index) { + continue; + } + + if (i === index) { + strike++; + } else { + ball++; + } + } + + //결과 출력 () + if (strike || ball) { + console.log(`${strike} 스트라이크, ${ball - strike} 볼`); + } else { + console.log("낫싱"); + } +} From bf54dcc6fb80e736a7fbdc4f35dfbc78bc3de7d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A7=80=EC=84=A0?= Date: Sat, 11 Nov 2023 19:06:29 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=EC=BB=B4=ED=93=A8=ED=84=B0=EC=B8=A1?= =?UTF-8?q?=20=EB=82=9C=EC=88=98=20=EC=9E=90=EB=A6=AC=EC=88=98=EB=81=BC?= =?UTF-8?q?=EB=A6=AC=20=EA=B2=B9=EC=B9=98=EC=A7=80=20=EC=95=8A=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/index.js b/index.js index e865933d..ee7e596c 100644 --- a/index.js +++ b/index.js @@ -1,11 +1,19 @@ -//각 자릿수 별로 난수 생성하여 이어붙인 후 숫자형 변환 -//아직 자리 수 겹치지 않도록 구현 x -function generateNum() { - let firstNum = String(Math.floor(Math.random() * 10)); - let secondNum = String(Math.floor(Math.random() * 10)); - let thirdNum = String(Math.floor(Math.random() * 10)); - - return firstNum + secondNum + thirdNum; +//컴퓨터측 세 자리의 난수를 생성하는 함수 +function getMyNumber() { + function getRandomNumber() { + return Math.floor(Math.random() * 10); + } + + const myNumber = []; + + //겹치지 않는 난수로 length:3의 배열 생성 + for (let i = 0; i < 3; i++) { + const randomNumber = getRandomNumber(); + while (!myNumber.includes(randomNumber)) { + myNumber.push(randomNumber); + } //두 자리 수 나오는 문제 해결 팰요 + } + return myNumber; } const myNumber = [1, 2, 3]; From 9a5171a5dceba8fb1e1e2a1c946e1a5a49ea6b10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A7=80=EC=84=A0?= Date: Sun, 12 Nov 2023 01:49:03 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=EC=9D=98=20=EC=9E=85=EB=A0=A5=EA=B0=92=EC=9D=84=20=EB=B0=B0?= =?UTF-8?q?=EC=97=B4=EB=A1=9C=20=EB=B0=9B=EB=8A=94=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index ee7e596c..b16bba88 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -//컴퓨터측 세 자리의 난수를 생성하는 함수 +// 1. 컴퓨터측 세 자리의 난수를 생성하여 배열로 리턴하는 함수: getMyNumber function getMyNumber() { function getRandomNumber() { return Math.floor(Math.random() * 10); @@ -11,15 +11,24 @@ function getMyNumber() { const randomNumber = getRandomNumber(); while (!myNumber.includes(randomNumber)) { myNumber.push(randomNumber); - } //두 자리 수 나오는 문제 해결 팰요 + } //두 자리 수 나오는 문제 해결 필요 } return myNumber; } +// 2. 사용자의 입력값 세 자리를 배열로 리턴하는 함수: getUserNumber (확인 필요) + +function getUserNumber() { + const userNumberTemp = String(document.querySelector("input").value); + const userNumber = [...userNumberTemp]; + + return userNumber; +} + const myNumber = [1, 2, 3]; const userNumber = [3, 2, 6]; -//myNumber과 userNumber의 각 자리수를 배열로 받아 게임 실행 +// 3. myNumber과 userNumber을 비교하여 게임 실행 후 결과 출력: play function play(myNumber, userNumber) { let strike = 0; From c8ba8fa8c28078f6d93f0cd70bd6895e13ac849f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A7=80=EC=84=A0?= Date: Sun, 12 Nov 2023 02:06:25 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=ED=99=95=EC=9D=B8=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20play=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=EB=A5=BC=20=EC=8B=A4=ED=96=89=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=ED=95=B8=EB=93=A4=EB=9F=AC=20?= =?UTF-8?q?=EB=93=B1=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index b16bba88..4512fe7e 100644 --- a/index.js +++ b/index.js @@ -25,9 +25,6 @@ function getUserNumber() { return userNumber; } -const myNumber = [1, 2, 3]; -const userNumber = [3, 2, 6]; - // 3. myNumber과 userNumber을 비교하여 게임 실행 후 결과 출력: play function play(myNumber, userNumber) { @@ -55,3 +52,14 @@ function play(myNumber, userNumber) { console.log("낫싱"); } } + +const myNumber = getMyNumber(); +const userNumber = getUserNumber(); + +// 4. 확인 버튼 클릭 시 play를 실행하는 이벤트 핸들러 + +const button = document.querySelector("button"); + +button.addEventListener("click", function (e) { + play(myNumber, userNumber); +}); From aa0bfb7f3c5350314e142ff8059f203f76dfe000 Mon Sep 17 00:00:00 2001 From: JO YUN HO Date: Thu, 16 Nov 2023 12:27:22 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=ED=8E=98=EC=96=B4=ED=94=84=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EB=9E=98=EB=B0=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Jisun Park --- index.js | 65 ---------------------------------- src/index.js | 99 ++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 89 insertions(+), 75 deletions(-) delete mode 100644 index.js diff --git a/index.js b/index.js deleted file mode 100644 index 4512fe7e..00000000 --- a/index.js +++ /dev/null @@ -1,65 +0,0 @@ -// 1. 컴퓨터측 세 자리의 난수를 생성하여 배열로 리턴하는 함수: getMyNumber -function getMyNumber() { - function getRandomNumber() { - return Math.floor(Math.random() * 10); - } - - const myNumber = []; - - //겹치지 않는 난수로 length:3의 배열 생성 - for (let i = 0; i < 3; i++) { - const randomNumber = getRandomNumber(); - while (!myNumber.includes(randomNumber)) { - myNumber.push(randomNumber); - } //두 자리 수 나오는 문제 해결 필요 - } - return myNumber; -} - -// 2. 사용자의 입력값 세 자리를 배열로 리턴하는 함수: getUserNumber (확인 필요) - -function getUserNumber() { - const userNumberTemp = String(document.querySelector("input").value); - const userNumber = [...userNumberTemp]; - - return userNumber; -} - -// 3. myNumber과 userNumber을 비교하여 게임 실행 후 결과 출력: play - -function play(myNumber, userNumber) { - let strike = 0; - let ball = 0; - - for (let i = 0; i < 3; i++) { - const index = myNumber.indexOf(userNumber[i]); - - if (!index) { - continue; - } - - if (i === index) { - strike++; - } else { - ball++; - } - } - - //결과 출력 () - if (strike || ball) { - console.log(`${strike} 스트라이크, ${ball - strike} 볼`); - } else { - console.log("낫싱"); - } -} - -const myNumber = getMyNumber(); -const userNumber = getUserNumber(); - -// 4. 확인 버튼 클릭 시 play를 실행하는 이벤트 핸들러 - -const button = document.querySelector("button"); - -button.addEventListener("click", function (e) { - play(myNumber, userNumber); -}); diff --git a/src/index.js b/src/index.js index 1553d753..cb9daff8 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,92 @@ -export default function BaseballGame() { - this.play = function (computerInputNumbers, userInputNumbers) { - return "결과 값 String"; - }; +// 1. 컴퓨터측 세 자리의 난수를 생성하여 배열로 리턴하는 함수: getMyNumber +function getMyNumber() { + const myNumber = []; + + //겹치지 않는 난수로 length:3의 배열 생성 + while (myNumber.length < 3) { + const randomNumber = getRandomIntInclusive(); + + if (!myNumber.includes(randomNumber)) { + myNumber.push(randomNumber); + } + } + + return myNumber; + + function getRandomIntInclusive(min = 1, max = 9) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1) + min); // The maximum is inclusive and the minimum is inclusive + } } -// export default class BaseballGame { -// play(computerInputNumbers, userInputNumbers) { -// return "결과 값 String"; -// } -// } +// 2. 사용자의 입력값 세 자리를 배열로 리턴하는 함수: getUserNumber (확인 필요) + +function getUserNumber() { + const $userInput = document.querySelector("#user-input"); + const userInputValue = [...$userInput.value].map(Number); + + if (userInputValue.includes(NaN)) { + alert("숫자만 입력해주세요."); + return; + } + + // TODO 숫자가 아닌 값에 대한 validation 필요 + + return userInputValue; +} + +// 3. myNumber과 userNumber을 비교하여 게임 실행 후 결과 출력: play +function play(myNumber, userNumber) { + let strike = 0; + for (let i = 0; i < 3; i++) { + if (myNumber[i] === userNumber[i]) { + strike++; + } + } + + let ball = 0; + for (let i = 0; i < 3; i++) { + if (myNumber[i] === userNumber[i]) { + continue; + } + + if (myNumber.includes(userNumber[i])) { + ball++; + } + } + + //결과 출력 () + const $result = document.querySelector("#result"); + + if (strike === 3) { + $result.textContent = "축하합니다 정답을 맞추셨습니다."; + } else if (strike || ball) { + $result.textContent = `${strike} 스트라이크, ${ball} 볼`; + } else { + $result.textContent = "낫싱"; + } +} + +const myNumber = getMyNumber(); +const userNumber = getUserNumber(); + +// 4. 확인 버튼 클릭 시 play를 실행하는 이벤트 핸들러 + +const app = () => { + const myNumber = getMyNumber(); // 최초에 생성된 3자리 난수 + + const $submitButton = document.querySelector("#submit"); + $submitButton.addEventListener("click", () => { + const userNumber = getUserNumber(); + + console.log("myNumber", myNumber); + console.log("userNumber", userNumber); + + play(myNumber, userNumber); + }); +}; -new BaseballGame(); +document.addEventListener("DOMContentLoaded", () => { + app(); +});