diff --git a/README.md b/README.md index 8b2833c..05f3334 100644 --- a/README.md +++ b/README.md @@ -1 +1,17 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse +2024 카카오테크캠퍼스 1회차 미니과제 - 숫자야구 + +### 수행 일자 +2024.05.05(일) + +### 기능 목록 +1. 숫자야구 게임 화면 +- 숫자 3개 입력 form +- 게임 결과 화면 +- 게임 재시작 버튼 +2. 게임 +- 같은 수가 같은 자리에 있으면 스트라이크, 다른 자리에 있으면 볼, 같은 수가 전혀 없으면 낫싱 출력 +- 3개의 숫자를 모두 맞추면 게임 종료 + +### 참고 +git commit convention : https://gist.github.com/stephenparish/9941e89d80e2bc58a153#examples \ No newline at end of file diff --git a/index.html b/index.html index b021b5c..166ee69 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,27 @@ - + KakaoTechCampus HW1 - Baseball Game -
+
+
+

⚾숫자 야구 게임

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

📄결과

+
+
+
diff --git a/src/main.js b/src/main.js index e69de29..63f8a94 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,82 @@ +// 새 게임 시작 +// 컴퓨터가 서로 다른 임의의 수 3개를 선택한다. +function startGame() { + let nums = []; + while (nums.length < 3) { + let newDigit = Math.floor(Math.random() * 9) + 1; + if (!nums.includes(newDigit)) { + nums.push(newDigit); + } + } + return nums +} + +function checkNumber(inputDigits) { + let strikes = 0, balls = 0; + + inputDigits.forEach((digit, i) => { + if (digit === answer[i]) { + strikes++; + } else if (answer.includes(digit)) { + balls++; + } + }); + + let resultMessage = document.createElement('div'); + if (strikes === 0 && balls === 0) { + resultMessage.textContent = "낫싱"; + } else if (strikes === 3) { + const h3El = document.createElement('h3'); + const spanEl = document.createElement('span'); + const brEl = document.createElement('br'); + const buttonEl = document.createElement('button'); + h3El.textContent = "🎉정답을 맞추셨습니다🎉"; + spanEl.textContent = "게임을 새로 시작하시겠습니까?"; + buttonEl.textContent = "게임 재시작"; + buttonEl.addEventListener("click", restartGame); + resultMessage.appendChild(h3El); + resultMessage.appendChild(spanEl); + resultMessage.appendChild(brEl); + resultMessage.appendChild(buttonEl); + } else { + resultMessage.textContent = `${strikes} 스트라이크, ${balls} 볼`; + } + + return resultMessage +} + +function play(input) { + let inputDigits = Array.from(new Set(input.split('').map(Number))); // 중복 제거, 문자열을 숫자로 변환 + + if (inputDigits.length !== 3 || inputDigits.some(digit => digit < 1 || digit > 9)) { + document.querySelector(".noti").innerHTML = "1부터 9까지의 서로 다른 숫자 세 개를 입력해주세요."; + return; + } + + let resultMessage = checkNumber(inputDigits); + document.querySelector(".result").appendChild(resultMessage); + +} + +function restartGame() { + document.querySelector(".noti").innerHTML = ""; + document.querySelector(".result").innerHTML = ""; + answer = startGame() + console.log(answer) +} + + +let answer = startGame() +console.log(answer) + +document.querySelector(".input__button").addEventListener("click", (e) => { + document.querySelector(".noti").innerHTML = ""; + document.querySelector(".result").innerHTML = ""; + let inputnums = document.querySelector(".input__text").value; + play(inputnums); + + document.querySelector(".input__text").value = ""; +}) +document.querySelector(".restart").addEventListener("click", (e) => { + restartGame(); +}) \ No newline at end of file