From 07f71a0f58bc69e2026d26d4c1b5265ad78c02a6 Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 15:29:34 +0900 Subject: [PATCH 01/18] =?UTF-8?q?feat.=200~9=EA=B9=8C=EC=A7=80=20=EB=9E=9C?= =?UTF-8?q?=EB=8D=A4=20=EB=84=98=EB=B2=84=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 14 +++++++++++--- src/main.js | 14 ++++++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index b021b5c..2f9f332 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,18 @@ - + 숫자 야구 게임 -
- +

⚾숫자 야구 게임

+
1~9까지의 수를 중복없이 3개 입력해주세요.
올바른 예)139
틀린 예)122
+ + + + + + + + diff --git a/src/main.js b/src/main.js index e69de29..ce7ee6c 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,14 @@ +//컴퓨터가 입력한 값, 0~9까지 랜덤으로 3자리 수 생성 +let numbers = generatedRandomNumber(); + +function generatedRandomNumber() { + let randomNumbers = [] + while(randomNumbers.length < 3) { + const num = Math.floor(Math.random() * 10); + if (!randomNumbers.includes(num)) + randomNumbers.push(num); + } + return randomNumbers +} + + From d4f4b3bd44144971a870530ea33249cd585bc7bc Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 15:34:27 +0900 Subject: [PATCH 02/18] =?UTF-8?q?feat.=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=EA=B0=80=20=EC=9E=85=EB=A0=A5=ED=95=9C=20=EA=B0=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/main.js b/src/main.js index ce7ee6c..6ac949e 100644 --- a/src/main.js +++ b/src/main.js @@ -1,14 +1,28 @@ //컴퓨터가 입력한 값, 0~9까지 랜덤으로 3자리 수 생성 -let numbers = generatedRandomNumber(); +let numbers = generatedRandomNumber() function generatedRandomNumber() { let randomNumbers = [] while(randomNumbers.length < 3) { const num = Math.floor(Math.random() * 10); if (!randomNumbers.includes(num)) - randomNumbers.push(num); + randomNumbers.push(num) } return randomNumbers } +//사용자가 입력한 값 +let answer; + +window.onload = function() { + const submitButton = document.getElementById('submitButton') + submitButton.addEventListener('click,' , () => { + answer = checkAnswer(answer) + if(answer) { + evaluateGuess(answer) + } + }); +}; + + From 1e1b8f2ae6a866e2eb982f148f2e5318f0979131 Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 15:38:26 +0900 Subject: [PATCH 03/18] =?UTF-8?q?feat=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20?= =?UTF-8?q?=EA=B2=80=EC=82=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/main.js b/src/main.js index 6ac949e..ea57aca 100644 --- a/src/main.js +++ b/src/main.js @@ -24,5 +24,23 @@ window.onload = function() { }); }; +//유효성 검사 +function checkAnswer(answer) { + const userInput = document.getElementById('userInput').value + if (userInput.length !== 3) { + alert('3자리 수를 입력하세요.') + return + } + answer = userInput.split('').map(numbers) + if (hasDuplicates(answer)) { + alert('중복된 숫자를 포함할 수 없습니다.') + return; + } + return answer; +} +//중복 제거 +function hasDuplicates(array) { + return (new Set(array)).size !== array.length; +} From 41553117840973b6c60fb8293a2c07de164ff796 Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 15:51:27 +0900 Subject: [PATCH 04/18] =?UTF-8?q?feat.=20=EC=8A=A4=ED=8A=B8=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=ED=81=AC,=20=EB=B3=BC=20=ED=8C=90=EB=B3=84=ED=95=98?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 +++- src/main.js | 44 +++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 2f9f332..b56adb2 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,9 @@

⚾숫자 야구 게임

1~9까지의 수를 중복없이 3개 입력해주세요.
올바른 예)139
틀린 예)122
- +
+ +
diff --git a/src/main.js b/src/main.js index ea57aca..e332e49 100644 --- a/src/main.js +++ b/src/main.js @@ -10,6 +10,7 @@ function generatedRandomNumber() { } return randomNumbers } +console.log(numbers); //사용자가 입력한 값 let answer; @@ -25,16 +26,16 @@ window.onload = function() { }; //유효성 검사 -function checkAnswer(answer) { +function checkAnswer() { const userInput = document.getElementById('userInput').value if (userInput.length !== 3) { alert('3자리 수를 입력하세요.') - return + return null; } answer = userInput.split('').map(numbers) if (hasDuplicates(answer)) { alert('중복된 숫자를 포함할 수 없습니다.') - return; + return null; } return answer; } @@ -44,3 +45,40 @@ function hasDuplicates(array) { return (new Set(array)).size !== array.length; } +//스트라이크, 볼 +let count = 0; + +function evaluateGuess() { + const resultDiv = document('result'); + if (count < 10) { + 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 = '🎉정답을 맞추셨습니다🎉' + printResult(resultMessage) + }else if(strike === 0 && ball === 0) { + resultMessage = '낫싱' + InputBox() + printResult(resultMessage); + }else { + resultMessge = `${strike}스트라이크 ${ball}볼` + InputBox() + printResult(resultMessage0) + } + count ++; + }else { + resultMessage = '시도 횟수를 초과했습니다.' + } +} + + From 1c190e5376796107eb431fc7c9da6e1489e142f0 Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 18:49:03 +0900 Subject: [PATCH 05/18] =?UTF-8?q?fix.=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20?= =?UTF-8?q?=EA=B2=80=EC=82=AC=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 76 ++++++++++++++--------------------------------------- 1 file changed, 19 insertions(+), 57 deletions(-) diff --git a/src/main.js b/src/main.js index e332e49..ebdcfd9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,84 +1,46 @@ -//컴퓨터가 입력한 값, 0~9까지 랜덤으로 3자리 수 생성 -let numbers = generatedRandomNumber() +// 컴퓨터가 입력한 값, 0~9까지 랜덤으로 3자리 수 생성 +let numbers = generateRandomNumber(); -function generatedRandomNumber() { - let randomNumbers = [] +function generateRandomNumber() { + let randomNumbers = []; while(randomNumbers.length < 3) { const num = Math.floor(Math.random() * 10); if (!randomNumbers.includes(num)) - randomNumbers.push(num) + randomNumbers.push(num); } - return randomNumbers + return randomNumbers; } console.log(numbers); -//사용자가 입력한 값 +// 사용자가 입력한 값 let answer; window.onload = function() { - const submitButton = document.getElementById('submitButton') - submitButton.addEventListener('click,' , () => { - answer = checkAnswer(answer) + const submitButton = document.getElementById('submitButton'); + submitButton.addEventListener('click', () => { + answer = checkAnswer(answer); if(answer) { - evaluateGuess(answer) + evaluateGuess(answer); } }); }; -//유효성 검사 +// 유효성 검사 function checkAnswer() { - const userInput = document.getElementById('userInput').value + const userInput = document.getElementById('userInput').value; if (userInput.length !== 3) { alert('3자리 수를 입력하세요.') - return null; + return null } - answer = userInput.split('').map(numbers) + answer = userInput.split('').map(Number); if (hasDuplicates(answer)) { - alert('중복된 숫자를 포함할 수 없습니다.') - return null; + alert('중복된 숫자를 포함할 수 없습니다.'); + return null } - return answer; + return answer } -//중복 제거 +// 중복 제거 function hasDuplicates(array) { return (new Set(array)).size !== array.length; } - -//스트라이크, 볼 -let count = 0; - -function evaluateGuess() { - const resultDiv = document('result'); - if (count < 10) { - 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 = '🎉정답을 맞추셨습니다🎉' - printResult(resultMessage) - }else if(strike === 0 && ball === 0) { - resultMessage = '낫싱' - InputBox() - printResult(resultMessage); - }else { - resultMessge = `${strike}스트라이크 ${ball}볼` - InputBox() - printResult(resultMessage0) - } - count ++; - }else { - resultMessage = '시도 횟수를 초과했습니다.' - } -} - - From 39de955a90e7c31b70208f37b715aa87240b2d24 Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 18:49:26 +0900 Subject: [PATCH 06/18] =?UTF-8?q?feat.=20result=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b56adb2..a66b645 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,8 @@

⚾숫자 야구 게임

1~9까지의 수를 중복없이 3개 입력해주세요.
올바른 예)139
틀린 예)122
-
- +
+
From 2eb792af261468a22d01f0d13612f542b9e717f6 Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 19:05:43 +0900 Subject: [PATCH 07/18] =?UTF-8?q?fix=20=EA=B2=8C=EC=9E=84=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a66b645..7332a0a 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
1~9까지의 수를 중복없이 3개 입력해주세요.
올바른 예)1
- +

📝결과

From 4d84f357254432d62e930af4dddd87541091a1ae Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 19:06:02 +0900 Subject: [PATCH 08/18] =?UTF-8?q?feat=20=EB=AC=B8=EA=B5=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/main.js b/src/main.js index ebdcfd9..b5bfe87 100644 --- a/src/main.js +++ b/src/main.js @@ -44,3 +44,40 @@ function checkAnswer() { function hasDuplicates(array) { return (new Set(array)).size !== array.length; } + +//게임 로직 +let count = 0 //횟수 +function evaluateGuess() { + const result = document.getElementById('result') + + if (count < 10) { + let strike = 0 + let ball = 0 + + for (let i = 0; i Date: Thu, 9 May 2024 19:28:50 +0900 Subject: [PATCH 09/18] =?UTF-8?q?feat=20=EB=A9=94=EC=84=B8=EC=A7=80=20?= =?UTF-8?q?=EC=B6=9C=EB=A0=A5=20=ED=95=A8=EC=88=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 6 +++++- src/main.js | 9 +++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 7332a0a..9d11555 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,11 @@
1~9까지의 수를 중복없이 3개 입력해주세요.
올바른 예)1
-

📝결과

+

📝결과

+
게임을 새로 시작하시겠습니까 ?
+ +
+
diff --git a/src/main.js b/src/main.js index b5bfe87..2260a0d 100644 --- a/src/main.js +++ b/src/main.js @@ -81,3 +81,12 @@ function evaluateGuess() { resultMessage = '시도 횟수를 초과했습니다.' } } + +//출력 메세지 함수 +function printResult(resultMessage) { + const resultDiv = document.getElementById('result'); + resultDiv.innerHTML = `${resultMessage}`; + const restartButton = document.getElementById('restartButton') + restartButton.addEventListener('click',restartGame()) +} + From 7732bb79658554f1fbf6b7c403edcacc06683698 Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 22:54:14 +0900 Subject: [PATCH 10/18] =?UTF-8?q?feat.=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=83=81=EC=9E=90=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 12 +----- src/main.js | 106 ++++++++++++++++++++++++++++++---------------------- 2 files changed, 64 insertions(+), 54 deletions(-) diff --git a/index.html b/index.html index 9d11555..9cbdc19 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ 숫자 야구 게임 +

⚾숫자 야구 게임

@@ -11,16 +12,7 @@
1~9까지의 수를 중복없이 3개 입력해주세요.
올바른 예)1
-

📝결과

-
게임을 새로 시작하시겠습니까 ?
- -
-
+
- - - - - diff --git a/src/main.js b/src/main.js index 2260a0d..353b332 100644 --- a/src/main.js +++ b/src/main.js @@ -1,10 +1,12 @@ // 컴퓨터가 입력한 값, 0~9까지 랜덤으로 3자리 수 생성 -let numbers = generateRandomNumber(); +let numbers = generateRandomNumber() +// 사용자가 입력한 값 +let answer = []; function generateRandomNumber() { let randomNumbers = []; - while(randomNumbers.length < 3) { - const num = Math.floor(Math.random() * 10); + while (randomNumbers.length < 3) { + const num = Math.floor(Math.random() * 10) if (!randomNumbers.includes(num)) randomNumbers.push(num); } @@ -12,81 +14,97 @@ function generateRandomNumber() { } console.log(numbers); -// 사용자가 입력한 값 -let answer; - -window.onload = function() { - const submitButton = document.getElementById('submitButton'); +window.onload = function () { + const submitButton = document.getElementById('submitButton') submitButton.addEventListener('click', () => { answer = checkAnswer(answer); - if(answer) { - evaluateGuess(answer); + if (answer) { + evaluateGuess(answer) } }); }; -// 유효성 검사 -function checkAnswer() { - const userInput = document.getElementById('userInput').value; +// 유효성 검사 및 값 저장 +function checkAnswer(answer) { + const userInput = document.getElementById('userInput').value if (userInput.length !== 3) { alert('3자리 수를 입력하세요.') - return null + return; } - answer = userInput.split('').map(Number); - if (hasDuplicates(answer)) { - alert('중복된 숫자를 포함할 수 없습니다.'); - return null + answer = userInput.split('').map(Number) + if(hasDuplicates(answer)) { + alert('중복된 숫자를 포함할 수 없습니다.') + return; } - return answer + return answer; } // 중복 제거 function hasDuplicates(array) { - return (new Set(array)).size !== array.length; + return (new Set(array)).size !== array.length } -//게임 로직 -let count = 0 //횟수 +// 게임 로직 +let count = 0; // 횟수 function evaluateGuess() { - const result = document.getElementById('result') - if (count < 10) { - let strike = 0 - let ball = 0 + let strike = 0; + let ball = 0; - for (let i = 0; i📝결과

${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' + + //공백 요소 생성 + const space = document.createElement('div') + space.textContent = '\xa0' + + resultDiv.appendChild(restartMessage) + resultDiv.appendChild(space) + resultDiv.appendChild(restartButton) } +// 텍스트 상자 초기화 +function inputBox() { + const inputBox = document.getElementById('userInput') + inputBox.value = ''; + inputBox.focus(); // 입력 상자에 포커스를 맞춘다. +} From 272b431b0b0a6cb065b226d6d02af12a05af5031 Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 23:06:02 +0900 Subject: [PATCH 11/18] =?UTF-8?q?feat=20=EA=B2=8C=EC=9E=84=20=EC=9E=AC?= =?UTF-8?q?=EC=8B=9C=EC=9E=91=20=EB=B0=8F=20=EA=B2=B0=EA=B3=BC=EA=B0=92=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20=ED=95=A8=EC=88=98=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 353b332..fb31162 100644 --- a/src/main.js +++ b/src/main.js @@ -92,19 +92,45 @@ function printResult(resultMessage) { restartButton.textContent = '게임 재시작' restartButton.id = 'restartButton' restartButton.style.display = resultMessage ? 'block' : 'none' - + restartButton.addEventListener('click', restartGame) + //공백 요소 생성 const space = document.createElement('div') space.textContent = '\xa0' + //result div에 추가 resultDiv.appendChild(restartMessage) resultDiv.appendChild(space) resultDiv.appendChild(restartButton) } +//게임 재시작 함수 +function restartGame() { + //컴퓨터가 입력한 값, 랜덤으로 3자리 수 생성 + numbers = generateRandomNumber() + console.log(numbers) + + //시도 횟수 초기화 + count = 0; + + //결과창 초기화 + clearResult() + + //텍스트 상자 초기화 + inputBox() + +} + // 텍스트 상자 초기화 function inputBox() { const inputBox = document.getElementById('userInput') inputBox.value = ''; inputBox.focus(); // 입력 상자에 포커스를 맞춘다. } + +//결과창 초기화 함수 +function clearResult() { + const resultDiv = document.getElementById('result') + resultDiv.textContent = ''; +} + From ef6e189a392a6cbf127b835e32906e4b0751043e Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Thu, 9 May 2024 23:42:27 +0900 Subject: [PATCH 12/18] =?UTF-8?q?fix.=EA=B2=8C=EC=9E=84=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 51 ++++++++++++++++++++++++--------------------------- 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/src/main.js b/src/main.js index fb31162..56284ee 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,4 @@ -// 컴퓨터가 입력한 값, 0~9까지 랜덤으로 3자리 수 생성 +// 컴퓨터가 입력한 값, 1~9까지 랜덤으로 3자리 수 생성 let numbers = generateRandomNumber() // 사용자가 입력한 값 let answer = []; @@ -6,7 +6,7 @@ let answer = []; function generateRandomNumber() { let randomNumbers = []; while (randomNumbers.length < 3) { - const num = Math.floor(Math.random() * 10) + const num = Math.floor(Math.random() * 9) + 1 if (!randomNumbers.includes(num)) randomNumbers.push(num); } @@ -29,11 +29,13 @@ function checkAnswer(answer) { 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; @@ -47,35 +49,30 @@ function hasDuplicates(array) { // 게임 로직 let count = 0; // 횟수 function evaluateGuess() { - if (count < 10) { - 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 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 = '낫싱'; - inputBox(); - } else { - resultMessage = `${strike} 스트라이크 ${ball} 볼` - inputBox(); - } - printResult(resultMessage); - count++; + // 결과값 출력 + let resultMessage = ''; + if (strike === 3) { + resultMessage = '🎉정답을 맞추셨습니다🎉' + } else if (strike === 0 && ball === 0) { + resultMessage = '낫싱'; + inputBox(); } else { - resultMessage = '시도 횟수를 초과했습니다.' - printResult(resultMessage); + resultMessage = `${strike} 스트라이크 ${ball} 볼` + inputBox(); } + printResult(resultMessage); + count++; } // 출력 메세지 함수 From d243bfedf214dcc6a1c1ef4b1c393d8b9ae6d328 Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Fri, 10 May 2024 01:43:11 +0900 Subject: [PATCH 13/18] feat. modul refactoring --- src/check.js | 21 ++++++++++++ src/gameLogic.js | 27 ++++++++++++++++ src/main.js | 78 ++++++--------------------------------------- src/randomNumber.js | 10 ++++++ 4 files changed, 67 insertions(+), 69 deletions(-) create mode 100644 src/check.js create mode 100644 src/gameLogic.js create mode 100644 src/randomNumber.js 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 56284ee..4939aae 100644 --- a/src/main.js +++ b/src/main.js @@ -1,80 +1,22 @@ +import { checkAnswer } from "./check"; +import { generateRandomNumber } from "./randomNumber"; +import { evaluateGuess } from "./gameLogic"; + // 컴퓨터가 입력한 값, 1~9까지 랜덤으로 3자리 수 생성 let numbers = generateRandomNumber() // 사용자가 입력한 값 let answer = []; - -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; -} -console.log(numbers); - window.onload = function () { const submitButton = document.getElementById('submitButton') submitButton.addEventListener('click', () => { answer = checkAnswer(answer); if (answer) { - evaluateGuess(answer) + const resultMessage = evaluateGuess(numbers, answer) + printResult(resultMessage) } }); }; -// 유효성 검사 및 값 저장 -function checkAnswer(answer) { - 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 -} - -// 게임 로직 -let count = 0; // 횟수 -function evaluateGuess() { - 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 = '낫싱'; - inputBox(); - } else { - resultMessage = `${strike} 스트라이크 ${ball} 볼` - inputBox(); - } - printResult(resultMessage); - count++; -} - // 출력 메세지 함수 function printResult(resultMessage) { const resultDiv = document.getElementById('result') @@ -103,19 +45,17 @@ function printResult(resultMessage) { //게임 재시작 함수 function restartGame() { - //컴퓨터가 입력한 값, 랜덤으로 3자리 수 생성 + numbers = generateRandomNumber() - console.log(numbers) - //시도 횟수 초기화 - count = 0; + //컴퓨터가 입력한 값, 랜덤으로 3자리 수 생성 + answer = [] //결과창 초기화 clearResult() //텍스트 상자 초기화 inputBox() - } // 텍스트 상자 초기화 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; +} From 22ea436ecb6c93b3c8273b8e2a1cb2718d116de0 Mon Sep 17 00:00:00 2001 From: Kuheewon <119719994+HeHelee@users.noreply.github.com> Date: Fri, 10 May 2024 01:59:25 +0900 Subject: [PATCH 14/18] Update README.md --- README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b2833c..15b8d7f 100644 --- a/README.md +++ b/README.md @@ -1 +1,12 @@ -# 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 : 숫자 야구를 진행하는 게임 로직입니다. + From dfb734792fd2502e881ad7b850c8096bab0f00fa Mon Sep 17 00:00:00 2001 From: Kuheewon Date: Fri, 10 May 2024 20:41:27 +0900 Subject: [PATCH 15/18] =?UTF-8?q?feat.=20=EA=B2=8C=EC=9E=84=20=EC=A2=85?= =?UTF-8?q?=EB=A3=8C=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/main.js b/src/main.js index 4939aae..eb5a96b 100644 --- a/src/main.js +++ b/src/main.js @@ -17,6 +17,8 @@ window.onload = function () { }); }; +console.log(numbers) + // 출력 메세지 함수 function printResult(resultMessage) { const resultDiv = document.getElementById('result') @@ -33,6 +35,13 @@ function printResult(resultMessage) { 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' @@ -41,6 +50,8 @@ function printResult(resultMessage) { resultDiv.appendChild(restartMessage) resultDiv.appendChild(space) resultDiv.appendChild(restartButton) + resultDiv.appendChild(space) + resultDiv.appendChild(endGameButton) } //게임 재시작 함수 @@ -48,6 +59,8 @@ function restartGame() { numbers = generateRandomNumber() + console.log(numbers) + //컴퓨터가 입력한 값, 랜덤으로 3자리 수 생성 answer = [] @@ -58,6 +71,21 @@ function restartGame() { 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') From 0e0030be639a861876174503adebfa928438c227 Mon Sep 17 00:00:00 2001 From: Kuheewon <119719994+HeHelee@users.noreply.github.com> Date: Fri, 10 May 2024 20:43:54 +0900 Subject: [PATCH 16/18] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 15b8d7f..ceb701c 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ ## 기능 소개 ### main.js : 변수들과 전체적인 로직의 흐름이 들어있는 파일입니다. +### 게임 결과 출력, 게임 재시작, 게임 종료 로직이 추가되어있습니다. ### radomNumber.js : 컴퓨터가 1~9까지 랜덤으로 숫자를 생성합니다. ### check.js : 숫자가 중복인지, 3글자인지를 판단하는 유효성 검사 로직입니다. ### gameLogic.js : 숫자 야구를 진행하는 게임 로직입니다. From 3dd5b562347c69e20d739a17ddc38766721bf597 Mon Sep 17 00:00:00 2001 From: Kuheewon <119719994+HeHelee@users.noreply.github.com> Date: Fri, 10 May 2024 20:44:09 +0900 Subject: [PATCH 17/18] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index ceb701c..3de3764 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,9 @@ #### 1~9 까지 컴퓨터가 생성한 숫자 중에서 사용자가 숫자를 입력하면 그에 맞는 결과를 판단해서 보여줍니다. ## 기능 소개 -### main.js : 변수들과 전체적인 로직의 흐름이 들어있는 파일입니다. -### 게임 결과 출력, 게임 재시작, 게임 종료 로직이 추가되어있습니다. -### radomNumber.js : 컴퓨터가 1~9까지 랜덤으로 숫자를 생성합니다. -### check.js : 숫자가 중복인지, 3글자인지를 판단하는 유효성 검사 로직입니다. -### gameLogic.js : 숫자 야구를 진행하는 게임 로직입니다. +#### main.js : 변수들과 전체적인 로직의 흐름이 들어있는 파일입니다. +#### 게임 결과 출력, 게임 재시작, 게임 종료 로직이 추가되어있습니다. +#### radomNumber.js : 컴퓨터가 1~9까지 랜덤으로 숫자를 생성합니다. +#### check.js : 숫자가 중복인지, 3글자인지를 판단하는 유효성 검사 로직입니다. +#### gameLogic.js : 숫자 야구를 진행하는 게임 로직입니다. From f560087be71be6f8325b394165f5446cb06a9645 Mon Sep 17 00:00:00 2001 From: Kuheewon <119719994+HeHelee@users.noreply.github.com> Date: Fri, 10 May 2024 20:44:20 +0900 Subject: [PATCH 18/18] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3de3764..0b0514e 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ## 기능 소개 #### main.js : 변수들과 전체적인 로직의 흐름이 들어있는 파일입니다. -#### 게임 결과 출력, 게임 재시작, 게임 종료 로직이 추가되어있습니다. +#### - 게임 결과 출력, 게임 재시작, 게임 종료 로직이 추가되어있습니다. #### radomNumber.js : 컴퓨터가 1~9까지 랜덤으로 숫자를 생성합니다. #### check.js : 숫자가 중복인지, 3글자인지를 판단하는 유효성 검사 로직입니다. #### gameLogic.js : 숫자 야구를 진행하는 게임 로직입니다.