diff --git a/README.md b/README.md index 8b2833c..9e8d18c 100644 --- a/README.md +++ b/README.md @@ -1 +1,6 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse +사용자의 입력을 받아서 유효성 검사 +정답을 생성하는 기능 +사용자 입력과 정답을 비교하여 스트라이크 및 볼 계산 +게임 결과를 화면에 표시하는 기능 +게임을 다시 시작할 수 있는 기능 \ No newline at end of file diff --git a/index.html b/index.html index b021b5c..6e072a4 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,27 @@ - + - - - - - - -
- - - + + + + + 숫자야구 + + +

⚾숫자 야구 게임

+

1~9까지의 수를 중복없이 3개 입력해주세요.

+

올바른 예) 139

+

틀린 예) 122

+
+ + +
+

📄결과

+
+ +
+ + + \ No newline at end of file diff --git a/src/counting.js b/src/counting.js new file mode 100644 index 0000000..7a54a1b --- /dev/null +++ b/src/counting.js @@ -0,0 +1,5 @@ +export function counting (index, score, i){ + if (index === -1) {return;} //일치하는 정답요소가 없다면 탈출 + if (index === i) {score.strike += 1;} //같은 위치에 있다면 스트라이크 추가 + else {score.ball += 1;} //아니라면 볼 추가 +} \ No newline at end of file diff --git a/src/generateNumber.js b/src/generateNumber.js new file mode 100644 index 0000000..cab7324 --- /dev/null +++ b/src/generateNumber.js @@ -0,0 +1,15 @@ +export function generateNumbers(){ + let numbers = []; //숫자를 담을 배열 + for (let n = 1; n <= 9; n++) { + numbers.push(n); //1~9까지의 숫자 배열을 생성 +} + + let answer = []; //정답을 담을 배열 + for (let n = 0; n <= 2; n++) { //3번 반복 + const index = Math.floor(Math.random() * numbers.length); + answer.push(numbers[index]); //배열의 길이에 따른 범위 내에서 난수 생성 + numbers.splice(index, 1); //중복 방지를 위해 numbers에서 제거 + } + + return answer; //정답 반환 +} diff --git a/src/main.js b/src/main.js index e69de29..52b0390 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,69 @@ +import { generateNumbers } from "./generateNumber.js"; //번호 생성 함수 호출 +import { counting } from "./counting.js"; + +const $input = document.querySelector('#input'); +const $form = document.querySelector('#form'); +const $logs = document.querySelector('#logs'); +const $restartButton = document.querySelector('#restartButton'); +const $restart = document.querySelector('#restart'); + +let answer = generateNumbers(); //정답 생성 +console.log(answer); //콘솔에 정답 출력 + +let tries = []; //시도한 수들 +function checkInput(input) { + if (input.length !== 3) { //3자리 숫자가 아니라면 + return alert('3자리 숫자를 입력해 주세요.'); + } + if (new Set(input).size !== 3) { //중복된 수가 들어갔다면 + return alert('중복되지 않게 입력해주세요'); + } + if (tries.includes(input)) { //이미 시도했던 값이라면 + return alert('이미 시도한 값입니다'); + } + + return true; +} + +$form.addEventListener('submit', (event) => { + event.preventDefault(); //페이지 새로고침 방지 + const value = $input.value; //입력값 할당 + $input.value = ''; //입력창 초기화 + const valid = checkInput(value); //입력값이 유효한지 확인 + if (!valid) return; //유효하지 않다면 중단 후 종료(return) + if (answer.join('') === value) { //문자열 결합 및 정답 확인 + displayResult('🎉정답을 맞추셨습니다!🎉'); //정답이 맞다면 출력 + document.getElementById('restart').style.display = 'block'; //restart버튼이 보이게 + $input.disabled = true; //정답을 맞추면 입력창 비활성화 + return; + } + + let score = {strike: 0, ball: 0}; //스트라이크, 볼 개수 초기화 + + for (let i = 0; i < answer.length; i++) { //정답의 길이만큼 반복 + const index = value.indexOf(answer[i]); //입력값에 정답요소가 있는지 확인, 없으면 -1반환 + counting(index, score, i); + } + + if (score.strike === 0 && score.ball === 0){ //0스트라이크 0볼일 때 + displayResult('Nothing(낫싱)'); //낫띵 출력 + } else { //낫싱이 아니라면 + displayResult(`${value}: ${score.strike} 스트라이크 ${score.ball} 볼`); //스트라이크, 볼 출력 + } + tries.push(value); //시도한 값들을 tries배열에 추가한다 +}); + +function displayResult(result) { + $logs.textContent = result; // 이전 결과를 삭제하고 새로운 결과로 대체 +} + +function restartGame() { + answer = generateNumbers(); //새로운 수를 answer에 할당 + tries = []; //시도했던 기록 초기화 + $logs.textContent = ''; //입력창 초기화 + $restart.style.display='none'; //재시작 버튼 숨기기 + $input.disabled = false; //비활성화된 입력창 다시 활성화 + console.log(answer); //콘솔에 다시 정답출력 +} + +$restartButton.addEventListener('click', restartGame); //재시작 버튼 클릭 시 restartGame호출 \ No newline at end of file