From fa1a948d579b9e3624e855beb481e0c0466cffe2 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 6 May 2024 15:57:19 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=9A=94=EA=B5=AC=20?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 65 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b2833c..fac3ca3 100644 --- a/README.md +++ b/README.md @@ -1 +1,65 @@ -# javascript-baseball-precourse \ No newline at end of file +# ⚾️ javascript-baseball-precourse +카카오 테크 캠퍼스 2기 1회차 미니과제 - 숫자 야구 게임 + + +## 🖥️ 과제 진행 요구 사항 +- 기능을 구현하기 전 README.md 에 구현할 기능 목록을 정리해 추가한다. +- Git의 커밋 단위는 앞 단계에서 README.md 에 정리한 기능 목록 단위로 추가한다 + + +## 🧑‍🤝‍🧑 기능 요구 사항 + #### 1) 컴퓨터 + - 1에서 9까지 서로 다른 임의의 수 3개를 선택 + - 사용자가 입력한 숫자에 대해 같은 수가 같은 자리에 있으면 스트라이크, 다른 자리에 있으면 볼, 같은 수가 전혀 없으면 낫싱 출력 + - 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 + - 사용자가 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼이 표시 + + + #### 2) 게임 플레이어 + - 컴퓨터가 생각하고 있는 3개의 숫자를 입력 + - alert() 에러 메시지가 나타날 경우 그 부분부터 다시 입력 + - 게임을 종료한 후 게임을 다시 시작하거나 완전히 종료 가능 + +
+ +## ⚙️ 구현할 기능 목록 + +### 초기 화면 구성 +- "**시작하기**" 버튼 클릭시 게임 시작 후 사용자에게 값을 입력받을 수 있다. + +
+ +### 입력값 유효성 검사 + +#### 1) 올바른 형식의 값 입력 +- 1에서 9까지 서로 다른 임의의 정수 3개인 경우이며 반대의 경우는 모두 잘못된 형식이다. +- 입력한 값에 대한 결과를 출력한다. + +#### 2) 잘못된 형식의 값 입력 +- alert()을 통해 "잘못된 입력 형식입니다!" 에러메세지를 출력 후 그 부분부터 다시 입력받는다. + +
+ +### 결과 출력 + +#### 1) 정답 +- 🎉정답을 맞추셨습니다🎉 문구 출력 후 게임 종료된다 + +#### 2) 오답 +- 같은 수가 같은 자리에 있으면 스트라이크 출력 +- 다른 자리에 있으면 볼 출력 +- 같은 수가 전혀 없으면 낫싱 출력 + + +### 게임 종료 + +#### 1) 재시작 +- "**게임 재시작**" 버튼을 클릭시 초기 화면으로 돌아가 입력을 받을 수 있다. + +#### 2) 완전 종료 +- "**종료하기**" 버튼을 클릭시 게임이 완전히 종료되고 초기 화면으로 돌아가 "**시작하기**" 버튼을 클릭 할 수 있다. + + +
+ +## 📌 과제 진행 소감 From e89a3b240083593118db8d10d335ed45a0b44539 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 6 May 2024 15:59:08 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=9A=94=EA=B5=AC=20?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index fac3ca3..004afc0 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ - 다른 자리에 있으면 볼 출력 - 같은 수가 전혀 없으면 낫싱 출력 +
### 게임 종료 From ed0a56b22244277831317d8c0bcddf0063915db0 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 6 May 2024 17:35:55 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=EC=B4=88=EA=B8=B0=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 ++- index.html | 37 ++++++++++++++++++++++++++--- src/css/main.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++ src/js/main.js | 32 +++++++++++++++++++++++++ src/main.js | 0 5 files changed, 130 insertions(+), 4 deletions(-) create mode 100644 src/css/main.css create mode 100644 src/js/main.js delete mode 100644 src/main.js diff --git a/README.md b/README.md index 004afc0..15afade 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,8 @@ ## ⚙️ 구현할 기능 목록 ### 초기 화면 구성 -- "**시작하기**" 버튼 클릭시 게임 시작 후 사용자에게 값을 입력받을 수 있다. +- "**시작하기**" 버튼 클릭시 1에서 9까지 서로 다른 임의의 수 3개를 선택 +- 게임 시작 후 사용자에게 값을 입력받을 수 있다.
diff --git a/index.html b/index.html index b021b5c..97a437a 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,41 @@ - + ⚾️숫자 야구 게임⚾️ + -
- +
+ +
+

⚾️숫자 야구 게임⚾️

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

⚾️ 결과

+
+
+ +
+
게임을 시작하시겠습니까?
+ +
+ +
+
게임을 새로 시작하시겠습니까?
+ +
+
+ + +
+ diff --git a/src/css/main.css b/src/css/main.css new file mode 100644 index 0000000..b3aef94 --- /dev/null +++ b/src/css/main.css @@ -0,0 +1,62 @@ +#app{ + display: flex; + justify-content: center; +} + +.container{ + border: 3px solid #000; + border-radius: 10px; + padding: 30px; + margin-top: 150px; +} + +.input{ + +} + +.input .input--answer{ + +} + +.input .input--answer{ + +} + + + + +.result{ + +} + +.result .result--text{ + +} + + + +.game-start{ + display: block; +} + +.game-start.hide{ + display: none; +} + + +.game-start .question--start{ + margin-bottom: 10px; +} + + +.game-restart{ + display: block; +} + +.game-restart.hide{ + display: none; +} + +.game-restart .question--restart{ + margin-bottom: 10px; +} \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 0000000..ec3765c --- /dev/null +++ b/src/js/main.js @@ -0,0 +1,32 @@ +const startBtn = document.querySelector('.btn--start'); +const restartBtn = document.querySelector('.btn--restart'); +const answerBtn = document.querySelector('.btn--answer'); +const gameStart = document.querySelector('.game-start'); +const gameRestart = document.querySelector('.game-restart'); + + +function getRandomNumbers() { + let numbers = []; + while (numbers.length < 3) { + const randomNumber = Math.floor(Math.random() * 9) + 1; + if (!numbers.includes(randomNumber)) { + numbers.push(randomNumber); + } + } + return numbers; +} + +let randomNumbers; + +startBtn.addEventListener('click', function(){ + gameStart.classList.add('hide'); + gameRestart.classList.remove('hide'); + randomNumbers = getRandomNumbers(); +}); + + +restartBtn.addEventListener('click', function(){ + gameRestart.classList.add('hide'); + gameStart.classList.remove('hide'); + randomNumbers = getRandomNumbers(); +}); \ No newline at end of file diff --git a/src/main.js b/src/main.js deleted file mode 100644 index e69de29..0000000 From e56e57b8f551e1a42737e5e3a9836782123b609b Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 6 May 2024 19:02:03 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80?= =?UTF-8?q?=EC=82=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/main.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/js/main.js b/src/js/main.js index ec3765c..293b9aa 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,5 +1,6 @@ const startBtn = document.querySelector('.btn--start'); const restartBtn = document.querySelector('.btn--restart'); +const answerInput = document.getElementById('input--answer'); const answerBtn = document.querySelector('.btn--answer'); const gameStart = document.querySelector('.game-start'); const gameRestart = document.querySelector('.game-restart'); @@ -16,6 +17,23 @@ function getRandomNumbers() { return numbers; } +function isValid(input){ + let inputArray = Array.from(new Set(input.split('').map(Number))); + if(inputArray.length === 3 && input.length === 3){ + showResult(input,randomNumbers); + }else{ + alert("잘못된 입력 형식입니다!"); + } +} + + + +function showResult(input, randomNumbers){ + +} + + + let randomNumbers; startBtn.addEventListener('click', function(){ @@ -29,4 +47,11 @@ restartBtn.addEventListener('click', function(){ gameRestart.classList.add('hide'); gameStart.classList.remove('hide'); randomNumbers = getRandomNumbers(); +}); + +answerBtn.addEventListener('click', function() { + const answerValue = answerInput.value; + isValid(answerValue); + gameRestart.classList.remove('hide'); + gameStart.classList.add('hide'); }); \ No newline at end of file From e1850ab0738f4e6fae5b91af438093cd1f51a310 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 6 May 2024 22:03:43 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=EA=B2=B0=EA=B3=BC=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 --- index.html | 5 ++- src/css/main.css | 4 ++- src/js/main.js | 84 ++++++++++++++++++++++++++++++------------------ 3 files changed, 57 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 97a437a..2c0bb41 100644 --- a/index.html +++ b/index.html @@ -29,11 +29,10 @@

⚾️ 결과

게임을 시작하시겠습니까?
- -
+
diff --git a/src/css/main.css b/src/css/main.css index b3aef94..cf8a9f4 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -30,7 +30,9 @@ } .result .result--text{ - + height: 50px; + font-weight: 700; + font-size: 17px; } diff --git a/src/js/main.js b/src/js/main.js index 293b9aa..3bb15ea 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,13 +1,30 @@ +let randomNumbers; + const startBtn = document.querySelector('.btn--start'); -const restartBtn = document.querySelector('.btn--restart'); +// const restartBtn = document.querySelector('.btn--restart'); const answerInput = document.getElementById('input--answer'); +const form = document.querySelector("form"); const answerBtn = document.querySelector('.btn--answer'); const gameStart = document.querySelector('.game-start'); const gameRestart = document.querySelector('.game-restart'); +const resultEl = document.querySelector(".result--text"); + +startBtn.addEventListener('click', () =>{ + gameStart.classList.add('hide'); + // gameRestart.classList.remove('hide'); + randomNumbers = getRandomNumbers(); +}); + +form.addEventListener('submit', (event) => { + event.preventDefault(); + const answerValue = answerInput.value; + isValid(answerValue); + event.target.reset(); +}); function getRandomNumbers() { - let numbers = []; + const numbers = []; while (numbers.length < 3) { const randomNumber = Math.floor(Math.random() * 9) + 1; if (!numbers.includes(randomNumber)) { @@ -17,41 +34,44 @@ function getRandomNumbers() { return numbers; } +function showResult(inputArray, randomNumbers){ + let strike = 0; + let ball = 0; + + for(let i = 0; i < 3; i++){ + if(inputArray[i] === randomNumbers[i]){ + strike++; + }else if(randomNumbers.includes(inputArray[i])){ + ball++; + } + } + + if(strike === 3){ + resultEl.textContent = " 🎉정답을 맞추셨습니다🎉"; + }else if(strike == 0 && ball == 0){ + resultEl.textContent = "닛싱"; + }else if(strike == 0){ + resultEl.textContent = `${ball} 볼`; + }else if(ball == 0){ + resultEl.textContent = `${strike} 스트라이크`; + }else{ + resultEl.textContent = `${strike} 스트라이크 , ${ball} 볼`; + } +} + function isValid(input){ - let inputArray = Array.from(new Set(input.split('').map(Number))); + const inputArray = Array.from(new Set(input.split('').map(Number))); if(inputArray.length === 3 && input.length === 3){ - showResult(input,randomNumbers); + showResult(inputArray,randomNumbers); }else{ alert("잘못된 입력 형식입니다!"); } } - -function showResult(input, randomNumbers){ - -} - - - -let randomNumbers; - -startBtn.addEventListener('click', function(){ - gameStart.classList.add('hide'); - gameRestart.classList.remove('hide'); - randomNumbers = getRandomNumbers(); -}); - - -restartBtn.addEventListener('click', function(){ - gameRestart.classList.add('hide'); - gameStart.classList.remove('hide'); - randomNumbers = getRandomNumbers(); -}); - -answerBtn.addEventListener('click', function() { - const answerValue = answerInput.value; - isValid(answerValue); - gameRestart.classList.remove('hide'); - gameStart.classList.add('hide'); -}); \ No newline at end of file +// restartBtn.addEventListener('click', function(){ +// gameStarted = true; +// gameRestart.classList.add('hide'); +// gameStart.classList.remove('hide'); +// randomNumbers = getRandomNumbers(); +// }); \ No newline at end of file From 1ae1b3db6145425b5185864cc5d7ebf9ffcc80bf Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 6 May 2024 22:41:05 +0900 Subject: [PATCH 6/7] =?UTF-8?q?=EA=B2=8C=EC=9E=84=20=EC=A2=85=EB=A3=8C=20?= =?UTF-8?q?=EC=8B=9C=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 10 +++++++--- src/css/main.css | 15 +++++++++++++-- src/js/main.js | 34 ++++++++++++++++++++++++---------- 3 files changed, 44 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 2c0bb41..b6f1a60 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@

⚾️숫자 야구 게임⚾️

틀린 예) 122
- +
@@ -29,10 +29,14 @@

⚾️ 결과

게임을 시작하시겠습니까?
- + +
+
게임을 종료하시겠습니까?
+ +
diff --git a/src/css/main.css b/src/css/main.css index cf8a9f4..0a7c97b 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -30,7 +30,6 @@ } .result .result--text{ - height: 50px; font-weight: 700; font-size: 17px; } @@ -45,7 +44,6 @@ display: none; } - .game-start .question--start{ margin-bottom: 10px; } @@ -61,4 +59,17 @@ .game-restart .question--restart{ margin-bottom: 10px; +} + +.game-quit{ + display: block; +} + +.game-quit.hide{ + display: none; +} + +.game-quit .question--quit{ + margin-top: 10px; + margin-bottom: 10px; } \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 3bb15ea..7e6b2e8 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,21 +1,40 @@ let randomNumbers; const startBtn = document.querySelector('.btn--start'); -// const restartBtn = document.querySelector('.btn--restart'); +const restartBtn = document.querySelector('.btn--restart'); +const quitBtn = document.querySelector('.btn--quit'); const answerInput = document.getElementById('input--answer'); const form = document.querySelector("form"); const answerBtn = document.querySelector('.btn--answer'); const gameStart = document.querySelector('.game-start'); const gameRestart = document.querySelector('.game-restart'); +const gameQuit = document.querySelector('.game-quit'); const resultEl = document.querySelector(".result--text"); startBtn.addEventListener('click', () =>{ gameStart.classList.add('hide'); - // gameRestart.classList.remove('hide'); + gameRestart.classList.add('hide'); + gameQuit.classList.add('hide'); + answerInput.disabled = false; randomNumbers = getRandomNumbers(); }); +restartBtn.addEventListener('click', function(){ + gameRestart.classList.add('hide'); + gameStart.classList.add('hide'); + gameQuit.classList.add('hide'); + answerInput.disabled = false; + randomNumbers = getRandomNumbers(); +}); + +quitBtn.addEventListener('click', function(){ + gameRestart.classList.add('hide'); + gameQuit.classList.add('hide'); + gameStart.classList.remove('hide'); + answerInput.disabled = true; +}); + form.addEventListener('submit', (event) => { event.preventDefault(); const answerValue = answerInput.value; @@ -48,6 +67,9 @@ function showResult(inputArray, randomNumbers){ if(strike === 3){ resultEl.textContent = " 🎉정답을 맞추셨습니다🎉"; + answerInput.disabled = true; + gameRestart.classList.remove('hide'); + gameQuit.classList.remove('hide'); }else if(strike == 0 && ball == 0){ resultEl.textContent = "닛싱"; }else if(strike == 0){ @@ -67,11 +89,3 @@ function isValid(input){ alert("잘못된 입력 형식입니다!"); } } - - -// restartBtn.addEventListener('click', function(){ -// gameStarted = true; -// gameRestart.classList.add('hide'); -// gameStart.classList.remove('hide'); -// randomNumbers = getRandomNumbers(); -// }); \ No newline at end of file From ff8820e6af599f869b33065168c2be42ac4a41b3 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 6 May 2024 22:46:01 +0900 Subject: [PATCH 7/7] =?UTF-8?q?css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/main.css | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 0a7c97b..3d2820e 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -10,24 +10,7 @@ margin-top: 150px; } -.input{ -} - -.input .input--answer{ - -} - -.input .input--answer{ - -} - - - - -.result{ - -} .result .result--text{ font-weight: 700;