From f7545550f6f6d84c98b9c2af7c9b5daba2f54f80 Mon Sep 17 00:00:00 2001 From: Hyoeunkh Date: Mon, 6 May 2024 02:23:12 +0900 Subject: [PATCH 1/6] docs:README --- README.md | 8 +++++++- index.html | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8b2833c..89a76e8 100644 --- a/README.md +++ b/README.md @@ -1 +1,7 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse + +1. 초기화면 구현 및 랜덤 숫자 생성 +2. 입력 범위 확인, alert +3. 틀렸을 경우, 볼 or 스트라이크 판별 및 결과 확인 +4. 정답일 경우, 재시작 +5. 디자인 \ No newline at end of file diff --git a/index.html b/index.html index b021b5c..061e64d 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + Baseball Game With Hyoeun
From b0eb0ee60674e9fe12a630eb2ce5e23883d2bcd9 Mon Sep 17 00:00:00 2001 From: Hyoeunkh Date: Mon, 6 May 2024 02:26:48 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=EC=B4=88=EA=B8=B0=ED=99=94=EB=A9=B4?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EB=9E=9C=EB=8D=A4=20?= =?UTF-8?q?=EC=88=AB=EC=9E=90=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 32 ++++++++++++++++++++++++++++++-- src/createRandomNum.js | 13 +++++++++++++ src/main.js | 3 +++ 3 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 src/createRandomNum.js diff --git a/index.html b/index.html index 061e64d..cd1db7a 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,37 @@ Baseball Game With Hyoeun + + -
- +
+
+ +

⚾숫자 야구 게임⚾

+
+

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

+
+ + +
+
+ +
+

📄결과

+
+
+

🎉정답을 맞추셨습니다🎉

+

게임을 새로 시작하시겠습니까?

+ +
+
+
+ +
diff --git a/src/createRandomNum.js b/src/createRandomNum.js new file mode 100644 index 0000000..2f383cc --- /dev/null +++ b/src/createRandomNum.js @@ -0,0 +1,13 @@ +const numbers = Array(9).fill().map((item, index) => index + 1); +export let random = []; + +export const createRandomNum = () => { + random.length = 0; + for(var i=0; i<3; i++) { + const num = Math.floor(Math.random() * numbers.length); + const newArr = numbers.splice(num, 1); + const val = newArr[0]; + random.push(String(val)); + } + console.log(random); +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..3a22af4 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,3 @@ +import { createRandomNum } from "./createRandomNum.js" +//랜덤 숫자 생성 +createRandomNum() \ No newline at end of file From 56f149778dc21c2e9f58f0f1049a1e82be8d1b76 Mon Sep 17 00:00:00 2001 From: Hyoeunkh Date: Mon, 6 May 2024 02:29:37 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=EC=9E=85=EB=A0=A5=20=EB=B2=94?= =?UTF-8?q?=EC=9C=84=20=ED=99=95=EC=9D=B8,=20alert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 6 +++++- src/playBaseball.js | 25 +++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 src/playBaseball.js diff --git a/src/main.js b/src/main.js index 3a22af4..ff2bc15 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,7 @@ import { createRandomNum } from "./createRandomNum.js" +import { playBaseball } from "./playBaseball.js"; //랜덤 숫자 생성 -createRandomNum() \ No newline at end of file +createRandomNum() + +// 야구게임 시작 +document.querySelector('.search-submit').addEventListener('click', playBaseball); diff --git a/src/playBaseball.js b/src/playBaseball.js new file mode 100644 index 0000000..1a84287 --- /dev/null +++ b/src/playBaseball.js @@ -0,0 +1,25 @@ +export const playBaseball = () => { + const inputNum = document.querySelector('.search input').value; + var checkVal = checkValue(inputNum); + + if (checkVal) { + //볼 스트라이크 판정 로직 + } + else { + document.querySelector('.search input').focus(); + } +} + // 입력 범위 확인 +function checkValue(inputNum) { + if(inputNum == null || inputNum.length !== 3) { + alert(`3자리를 입력해주세요.`); + return false; + } else if(inputNum < '0' || inputNum >= '999') { + alert(`숫자만 입력해야 합니다.`); + return false; + } else if(new Set(inputNum).size !== 3) { + alert('중복없이 입력해주세요.'); + return false; + } + return true; +} \ No newline at end of file From cb8467bb6fa698cf775e68f0ad078ba8b7af8a93 Mon Sep 17 00:00:00 2001 From: Hyoeunkh Date: Mon, 6 May 2024 02:31:47 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=ED=8B=80=EB=A0=B8=EC=9D=84=20?= =?UTF-8?q?=EA=B2=BD=EC=9A=B0,=20=EB=B3=BC=20or=20=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EB=9D=BC=EC=9D=B4=ED=81=AC=20=ED=8C=90=EB=B3=84=20=EB=B0=8F=20?= =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20=ED=99=95=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ballOrStrike.js | 38 ++++++++++++++++++++++++++++++++++++++ src/playBaseball.js | 4 +++- 2 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 src/ballOrStrike.js diff --git a/src/ballOrStrike.js b/src/ballOrStrike.js new file mode 100644 index 0000000..58dc959 --- /dev/null +++ b/src/ballOrStrike.js @@ -0,0 +1,38 @@ +import { random } from "./createRandomNum.js"; + +// 볼 or 스트라이크 판별 +const correct = document.querySelector('.result-correct'); + +export const ballOrStrike = (inputNum) => { + var res =''; + var strike = 0; + var ball = 0; + inputNum.split('').forEach((num, index) => { + if (random.indexOf(num) === index) + strike++; + else if (random.includes(num)) + ball++; + }) + res = createResult(ball, strike) + console.log(document.querySelector('.result-hint').textContent = res); + if (strike === 3) { + correct.classList.add('block'); + } else { + correct.classList.remove('block'); + } +} + +// 숫자 입력 결과 확인 +function createResult(ball, strike) { + var resultText = ''; + if (strike === 0 && ball >0) + resultText = `${ball}볼` + else if (strike > 0 && ball === 0) + resultText = `${strike}스트라이크` + else if (ball > 0 || strike > 0) + resultText = `${ball}볼 ${strike}스트라이크` + else + resultText = '낫싱'; + return resultText +} + \ No newline at end of file diff --git a/src/playBaseball.js b/src/playBaseball.js index 1a84287..446d97e 100644 --- a/src/playBaseball.js +++ b/src/playBaseball.js @@ -1,9 +1,11 @@ +import { ballOrStrike } from "./ballOrStrike.js"; + export const playBaseball = () => { const inputNum = document.querySelector('.search input').value; var checkVal = checkValue(inputNum); if (checkVal) { - //볼 스트라이크 판정 로직 + ballOrStrike(inputNum) } else { document.querySelector('.search input').focus(); From ce33cb971ad27fc5dc9e656a02b3156db4e2bccb Mon Sep 17 00:00:00 2001 From: Hyoeunkh Date: Mon, 6 May 2024 02:33:49 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=EC=A0=95=EB=8B=B5=EC=9D=BC=20?= =?UTF-8?q?=EA=B2=BD=EC=9A=B0,=20=EC=9E=AC=EC=8B=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 5 +++++ src/restart.js | 8 ++++++++ 2 files changed, 13 insertions(+) create mode 100644 src/restart.js diff --git a/src/main.js b/src/main.js index ff2bc15..481d5b7 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,12 @@ import { createRandomNum } from "./createRandomNum.js" import { playBaseball } from "./playBaseball.js"; +import { restart } from "./restart.js"; + //랜덤 숫자 생성 createRandomNum() // 야구게임 시작 document.querySelector('.search-submit').addEventListener('click', playBaseball); + +// 재시작 +document.querySelector('.restart').addEventListener('click', restart); \ No newline at end of file diff --git a/src/restart.js b/src/restart.js new file mode 100644 index 0000000..af48fc8 --- /dev/null +++ b/src/restart.js @@ -0,0 +1,8 @@ +import { createRandomNum } from "./createRandomNum.js"; + +export const restart = () => { + document.querySelector('.result-hint').textContent = ''; + document.querySelector('.result-correct').classList.remove('block'); + document.querySelector('.search input').value = ''; + createRandomNum(); +} \ No newline at end of file From 23d32b6bb9b8638dfd86852dea03c92e4779b736 Mon Sep 17 00:00:00 2001 From: Hyoeunkh Date: Mon, 6 May 2024 02:35:13 +0900 Subject: [PATCH 6/6] =?UTF-8?q?style:=EB=94=94=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 3 +++ src/main.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 src/main.css diff --git a/index.html b/index.html index cd1db7a..5f5e719 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,9 @@ Baseball Game With Hyoeun + + + diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..87fd2b5 --- /dev/null +++ b/src/main.css @@ -0,0 +1,44 @@ +body { + background-color: beige; + font-size: 20px; + font-weight: 400; + line-height: 1.4; + font-family: "Nanum Gothic", sans-serif; + } + .inner { + width: 1100px; + margin: 0 auto; + } + .btn { + padding: 6px 10px; + border: 1px solid #333; + border-radius: 4px; + color: #333; + font-size: 14px; + font-weight: 700; + text-align: center; + cursor: pointer; + box-sizing: border-box; + display: block; + transition: .4s; + } + .btn:hover { + background-color: #333; + color: #fff; + } + #app .inner .baseball-game .search { + display: flex; + gap: 3px; + } + + h4, strong, h3 { + font-weight: 700; + } + #app .result .result-correct { + display: none; + background-color: beige; + } + #app .result .result-correct.block { + display: block; + } + \ No newline at end of file