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..5f5e719 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,41 @@ - + Baseball Game With Hyoeun + + + + + -
- +
+
+ +

⚾숫자 야구 게임⚾

+
+

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

+
+ + +
+
+ +
+

📄결과

+
+
+

🎉정답을 맞추셨습니다🎉

+

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

+ +
+
+
+ +
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/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.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 diff --git a/src/main.js b/src/main.js index e69de29..481d5b7 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +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/playBaseball.js b/src/playBaseball.js new file mode 100644 index 0000000..446d97e --- /dev/null +++ b/src/playBaseball.js @@ -0,0 +1,27 @@ +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(); + } +} + // 입력 범위 확인 +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 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