From 0bd7c252c19191e959a2bb52e3c643481f3fc167 Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 6 May 2024 01:27:35 +0900 Subject: [PATCH 1/8] =?UTF-8?q?docs=20:=20README.md=20=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=20=EB=AA=A9=EB=A1=9D=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b2833c..f94211e 100644 --- a/README.md +++ b/README.md @@ -1 +1,35 @@ -# javascript-baseball-precourse \ No newline at end of file +# 미니 과제 - 숫자야구 (JavaScript) + +카카오 테크 캠퍼스 2기 + +[STEP1] 1회차 미니과제 - 숫자야구 (JavaScript) + +### 숫자야구 +1부터 9까지 서로 다른 수로 이루어진 3자리의 수를 맞추는 게임 + +### 규칙 +같은 수가 같은 자리에 있으면 `스트라이크`, +다른 자리에 있으면 `볼`, +같은 수가 전혀 없으면 `낫싱`이란 힌트를 얻을 수 있다. + +=> 그 **힌트**를 이용해서 먼저 상대방(컴퓨터)의 +수를 맞추면 승리! + +예를 들어 상대방(컴퓨터)의 수가 425라면, 다음과 같은 **힌트**를 얻을 수 있다. +- 123을 제시한 경우: 1 스트라이크 +- 456을 제시한 경우: 1 볼 1 스트라이크 +- 789를 제시한 경우: 낫싱 + + +## 기능 목록 +- 인터페이스 구현 +- 게임 시작 +- 1에서 9까지 서로 다른 임의의 수 3개 생성 +- 3개의 수를 입력받기 +- 입력 확인 + - 입력 값이 잘못된 경우, 에러 메시지 출력하고 다시 이전 단계로 이동 +- 컴퓨터와 플레이어의 숫자를 비교하고 결과를 반환 +- 반환 값에 따라 + - 정답인 경우 게임 종료 및 재시작 버튼 표시 + - 재시작 버튼을 누르면 재시작(게임 시작) + - 오답인 경우 힌트를 출력 From 2a6fcf1b272f8c0128db45c9ca3f5404ba4a9d52 Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 6 May 2024 03:11:32 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat=20:=20=EC=9D=B8=ED=84=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index b021b5c..f04eb0a 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,26 @@ - + - + 숫자 야구 게임 + -
- +

⚾숫자 야구 게임

+
+

1~9까지의 수를 중복없이 3개 입력해주세요.
+ 올바른 예) 139
+ 틀린 예) 122
+

+
+
+ + +
+ - + \ No newline at end of file From 182d084f22eaa4a4bac5ba7ed381c45adf38f2d3 Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 6 May 2024 06:12:16 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat=20:=20=EA=B2=8C=EC=9E=84=20=EC=8B=9C?= =?UTF-8?q?=EC=9E=91=20=EB=B0=8F=20=EC=9E=84=EC=9D=98=EC=9D=98=20=EC=A0=95?= =?UTF-8?q?=EB=8B=B5=EA=B0=92=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 8 ++++---- src/initialGame.js | 10 ++++++++++ src/main.js | 8 ++++++++ 3 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 src/initialGame.js diff --git a/index.html b/index.html index f04eb0a..e48d1a9 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ 숫자 야구 게임 - +

⚾숫자 야구 게임

@@ -16,11 +16,11 @@

⚾숫자 야구 게임

- +
- + \ No newline at end of file diff --git a/src/initialGame.js b/src/initialGame.js new file mode 100644 index 0000000..976143a --- /dev/null +++ b/src/initialGame.js @@ -0,0 +1,10 @@ + +export function setAnswer() { + const numbers = [] + while(numbers.length < 3) { + const randomNum = Math.floor(Math.random() * 9) + 1 + if (!numbers.includes(randomNum)) + numbers.push(randomNum) + } + return numbers +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..0da266c 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,8 @@ +import { setAnswer } from "./initialGame.js"; +let answer = [] +playGame() + +function playGame() { + answer = setAnswer() + console.log(answer) +} From b9199976e1601b42bcb9d5f6f7851947c1208c60 Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 6 May 2024 06:26:13 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat=20:=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=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 4 ++++ src/validCheck.js | 9 +++++++++ 2 files changed, 13 insertions(+) create mode 100644 src/validCheck.js diff --git a/src/main.js b/src/main.js index 0da266c..fe1a1b9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,6 @@ import { setAnswer } from "./initialGame.js"; +import { checkNumbers } from "./validCheck.js"; + let answer = [] playGame() @@ -6,3 +8,5 @@ function playGame() { answer = setAnswer() console.log(answer) } + +// console.group(checkNumbers(answer)) \ No newline at end of file diff --git a/src/validCheck.js b/src/validCheck.js new file mode 100644 index 0000000..563ed4c --- /dev/null +++ b/src/validCheck.js @@ -0,0 +1,9 @@ +// 유효성 체크 +export function checkNumbers(guessNum) { + const guessNumSet = new Set(guessNum) + if (guessNum.length === 3 && guessNumSet.size === 3 && !guessNum.includes(0)) { + return true + } else { + return false + } +} From fdb9f22020296c12c8e29b0586b8ac8e1a751ec3 Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 6 May 2024 06:42:33 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat=20:=20=EB=8B=B5=20=EC=9E=85=EB=A0=A5?= =?UTF-8?q?=EB=B0=9B=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EB=B0=8F=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=B6=9C=EB=A0=A5=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=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 | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index fe1a1b9..05b9232 100644 --- a/src/main.js +++ b/src/main.js @@ -9,4 +9,19 @@ function playGame() { console.log(answer) } -// console.group(checkNumbers(answer)) \ No newline at end of file +// 확인 버튼 +const sendBtn = document.querySelector('.send-btn') +sendBtn.addEventListener('click', () => { + let guessNum = document.querySelector('.input-box').value.split('').map(Number) + console.log("inputValue", guessNum) + console.log("answer", answer) + + let valid = checkNumbers(guessNum) + console.log("valid", valid) + if (valid === true) { + } else { + alert("잘못된 값이 입력되었어요. 다시 입력해주세요."); + } +}); + +// console.log(checkNumbers(guessNum)) \ No newline at end of file From 01b48311c5a24b38e1e11c6fbe232d3a10bb2b1f Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 6 May 2024 06:49:42 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat=20:=20=EC=A0=90=EC=88=98=20=EA=B3=84?= =?UTF-8?q?=EC=82=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/calculateScore.js | 12 ++++++++++++ src/main.js | 7 +++---- 2 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 src/calculateScore.js diff --git a/src/calculateScore.js b/src/calculateScore.js new file mode 100644 index 0000000..e5007d6 --- /dev/null +++ b/src/calculateScore.js @@ -0,0 +1,12 @@ +export function calculateStrikeBall(guessNum, answerNum) { + let strike = 0 + let ball = 0 + for (let i = 0; i < 3; i++){ + if (guessNum[i] === answerNum[i]) { + strike++; + } else if (answerNum.includes(guessNum[i])) { + ball++; + } + } + return {strike, ball} +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 05b9232..48f1ca1 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,6 @@ import { setAnswer } from "./initialGame.js"; import { checkNumbers } from "./validCheck.js"; +import { calculateStrikeBall } from "./calculateScore.js"; let answer = [] playGame() @@ -9,16 +10,14 @@ function playGame() { console.log(answer) } -// 확인 버튼 const sendBtn = document.querySelector('.send-btn') sendBtn.addEventListener('click', () => { let guessNum = document.querySelector('.input-box').value.split('').map(Number) - console.log("inputValue", guessNum) - console.log("answer", answer) let valid = checkNumbers(guessNum) - console.log("valid", valid) if (valid === true) { + let score = calculateStrikeBall(guessNum, answer) + console.log("score", score) } else { alert("잘못된 값이 입력되었어요. 다시 입력해주세요."); } From 730e805c113d143674143a5c55a34eb9426ed109 Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 6 May 2024 06:57:28 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat=20:=20=EA=B2=B0=EA=B3=BC=20=EC=B6=9C?= =?UTF-8?q?=EB=A0=A5=20=EA=B8=B0=EB=8A=A5=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 | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/main.js b/src/main.js index 48f1ca1..e9c9e78 100644 --- a/src/main.js +++ b/src/main.js @@ -17,10 +17,31 @@ sendBtn.addEventListener('click', () => { let valid = checkNumbers(guessNum) if (valid === true) { let score = calculateStrikeBall(guessNum, answer) - console.log("score", score) + printResult(score) } else { alert("잘못된 값이 입력되었어요. 다시 입력해주세요."); } }); -// console.log(checkNumbers(guessNum)) \ No newline at end of file +// console.log(checkNumbers(guessNum)) + +function printResult(score) { + let result = '' + let strike = score.strike + let ball = score.ball + if (strike + ball === 0) { + result = '낫싱'; + } else if (ball > 0) { + result += `${ball}볼 ` + } + if (strike > 0){ + if (strike === 3) { + result = "🎉정답을 맞추셨습니다🎉" + restart() + } else { + result += `${strike}스트라이크` + } + } + console.log(result) + document.querySelector('.score').innerText = result; // 결과 표시 +} \ No newline at end of file From 3258206d3ad765a036c3950a615aa4d16057a4e6 Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 6 May 2024 07:16:53 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat=20:=20=EC=9E=AC=EC=8B=9C=EC=9E=91=20?= =?UTF-8?q?=EB=B0=8F=20=EC=A2=85=EB=A3=8C=20=EA=B8=B0=EB=8A=A5=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, 31 insertions(+), 6 deletions(-) diff --git a/src/main.js b/src/main.js index e9c9e78..02d801c 100644 --- a/src/main.js +++ b/src/main.js @@ -7,7 +7,6 @@ playGame() function playGame() { answer = setAnswer() - console.log(answer) } const sendBtn = document.querySelector('.send-btn') @@ -19,7 +18,7 @@ sendBtn.addEventListener('click', () => { let score = calculateStrikeBall(guessNum, answer) printResult(score) } else { - alert("잘못된 값이 입력되었어요. 다시 입력해주세요."); + alert("잘못된 값이 입력되었어요. 다시 입력해주세요.") } }); @@ -37,11 +36,37 @@ function printResult(score) { if (strike > 0){ if (strike === 3) { result = "🎉정답을 맞추셨습니다🎉" - restart() + endOfGame() } else { result += `${strike}스트라이크` } } - console.log(result) - document.querySelector('.score').innerText = result; // 결과 표시 -} \ No newline at end of file + document.querySelector('.score').innerText = result // 결과 표시 +} + +function endOfGame() { + const restartMsg = document.createElement('p') + restartMsg.innerText = "게임을 새로 시작하시겠습니까?" + const restartBtn = document.createElement('button') + restartBtn.textContent = '게임 재시작' + const endBtn = document.createElement('button') + endBtn.textContent = '게임 종료' + + document.querySelector('.result-field').appendChild(restartMsg); + document.querySelector('.result-field').appendChild(restartBtn); + document.querySelector('.result-field').appendChild(endBtn); + + restartBtn.addEventListener('click', function() { + document.querySelector('.score').innerText = '' + document.querySelector('.result-field').removeChild(restartMsg); + document.querySelector('.result-field').removeChild(restartBtn); + document.querySelector('.result-field').removeChild(endBtn); + document.querySelector('.input-box').value = '' + playGame(); + }) + endBtn.addEventListener('click', function() { + document.querySelector('.result-field').remove() + document.querySelector('.input-field').remove() + document.querySelector('.manual').innerText = '게임이 종료되었습니다.' + }) +}; \ No newline at end of file