diff --git a/README.md b/README.md index 8b2833c..0e8edfc 100644 --- a/README.md +++ b/README.md @@ -1 +1,14 @@ -# javascript-baseball-precourse \ No newline at end of file +# baseball-game + +# 구현 기능 목록 +- 3자리의 랜덤 숫자를 생성한다. + +- 게임 플레이어의 3자리 숫자를 입력 받는다. + +- 게임 플레이어 숫자의 유효성을 검사한다. + +- 컴퓨터의 수와 플레이어의 수를 비교하여 스트라이크와 볼을 카운트한다. + +- 정답을 맞춘 경우 결과를 출력한다. + +- 게임 종료시 재시작을 버튼 출력한다. \ No newline at end of file diff --git a/index.html b/index.html index b021b5c..c986097 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,44 @@ - + baseball-game + + + -
- +
+

⚾숫자 야구 게임

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

📄결과

+
+
+ +
+

🎉정답을 맞추셨습니다🎉

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

게임이 종료되었습니다😊

+
+
+ diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..63ae7dd --- /dev/null +++ b/src/main.css @@ -0,0 +1,13 @@ +.form { + display: flex; + align-items: stretch; +} + +#input { + margin-right: 5px; +} + +#restartBtn { + margin-top: 15px; +} + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..4ba57ef 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,48 @@ +import { checkNumber } from "./modules/checkNumber"; +import { finishGame } from "./modules/finishGame"; +import { getResult } from "./modules/getResult"; +import { makeRandom } from "./modules/makeRandom"; +import { showResult } from "./modules/showResult"; + +const resultBoard = document.querySelector(".result"); +const successBoard = document.querySelector(".success"); +const finishBoard = document.querySelector(".finishGame"); +const inputEl = document.getElementById("input"); + + +successBoard.style.display = "none"; +finishBoard.style.display = "none"; + +//컴퓨터 랜덤 수 생성 +const computer = makeRandom(); +console.log(computer); + +//입력 수 검사 +inputEl.addEventListener('input', e => checkNumber(e, inputEl)); + +//숫자 제출 +document.getElementById("submitBtn").addEventListener("click", function() { + + if(inputEl.value.length == 3){ + const score = getResult(computer, inputEl.value); + const result = showResult(score); + + if(score[0] != 3){ + document.getElementById("score").innerHTML += `
${inputEl.value} : ${result}
`; + } else { + resultBoard.style.display = "none"; + successBoard.style.display = "block"; + } + } else { + alert("세자리 숫자를 입력해주세요."); + } + +}) + + +//프로그램 완전히 종료 +document.getElementById("endBtn").addEventListener("click", function() { + finishGame(); +}); + + diff --git a/src/modules/checkNumber.js b/src/modules/checkNumber.js new file mode 100644 index 0000000..4afb248 --- /dev/null +++ b/src/modules/checkNumber.js @@ -0,0 +1,31 @@ + +function checkNumber(e, inputEl) { + let content = inputEl.value; + let lastValue = e.data; + + + if( isNaN(lastValue) ){ + alert("숫자를 입력해 주세요."); + inputEl.value = content.slice(0, -1); + return; + } + else if( content.length > 3 ){ + alert("세자리 수를 입력해 주세요."); + inputEl.value = content.slice(0, -1); + return; + } + else if( content.slice(0, -1).includes(lastValue) ){ + alert("중복되지 않는 수를 입력해 주세요."); + inputEl.value = content.slice(0, -1); + return; + } + else if( lastValue == 0 ){ + alert("1~9까지의 수를 입력해 주세요."); + inputEl.value = content.slice(0, -1); + return; + } + + return true; +} + +export { checkNumber }; \ No newline at end of file diff --git a/src/modules/finishGame.js b/src/modules/finishGame.js new file mode 100644 index 0000000..5188c2c --- /dev/null +++ b/src/modules/finishGame.js @@ -0,0 +1,10 @@ +function finishGame() { + const runBoard = document.querySelector(".runGame"); + const finishBoard = document.querySelector(".finishGame"); + + // window.close(); + runBoard.style.display = "none"; + finishBoard.style.display = "block"; +} + +export { finishGame }; \ No newline at end of file diff --git a/src/modules/getResult.js b/src/modules/getResult.js new file mode 100644 index 0000000..dc0813d --- /dev/null +++ b/src/modules/getResult.js @@ -0,0 +1,25 @@ +function getResult(computer, userNum) { + + let strike = 0; + let ball = 0; + const userArr = userNum.split('').map(Number); + + //count strike + for(let i=0; i