diff --git a/README.md b/README.md index 8b2833c..440901d 100644 --- a/README.md +++ b/README.md @@ -1 +1,34 @@ -# javascript-baseball-precourse \ No newline at end of file +# 1회차 미니과제 - 숫자야구게임 만들기 +## 구현 기능 +### 정답 생성 (generateNumbers) +*1~9사이 숫자를 중복 없이 3자리수를 만듭니다. +### 입력 처리 (handleSubmit) +*사용자가 값을 입력 후 제출 시에 처리하는 함수입니다. +### 게임 재시작 (restartGame) +*사용자가 정답을 맞춘 후 게임 초기화 및 재시작을 가능케 해주는 기능입니다. +### 정답 유효성 확인 (checkInput) +*사용자가 입력한 값이 유효한지 검사합니다. +### 중복 제거 (removeDuplicates) +*값에서 중복값을 제거 후 반환합니다. +### 0값 제거 (removeZero) +*값에서 0값을 제거 후 반환합니다. +### 결과 출력 (displayLogText) +*결과 부분에 값을 출력해줍니다. +### 결과 계산 (counting) +*스트라이크 및 볼을 계산하여 calculateScore에 전달해줍니다. +### 계산값 합산 (calculateScore) +*총 몇 스트라이크 몇 볼인지 계산합니다. +### 점수 출력 (displayScore) +*총 몇 스트라이크 몇 볼인지 결과부분에 출력해줍니다. + + +## 추가사항 +*index.html에 웰컴 스크린을, game.html에 본 게임을 구현하였습니다. + +*첫 시작은 index.html을 통해 이루어집니다. + +*본 게임 시작 전 웰컴스크린이 보입니다. 게임시작 버튼을 통해 본 게임에 진입합니다. + +*중복 및 초과된 값을 입력 시 중복값 및 초과된 값을 제거하고 남은 값은 입력창에 남겨둠으로써 잘못된 부분부터 다시 입력받을 수 있습니다. + +*정답을 맞추면 게임종료 버튼을 통해 게임을 완전히 종료할 수 있고 완전히 종료 시 다시 웰컴스크린으로 돌아갑니다. \ No newline at end of file diff --git a/game.html b/game.html new file mode 100644 index 0000000..e1c6874 --- /dev/null +++ b/game.html @@ -0,0 +1,34 @@ + + + + + + + 숫자야구 + + + +

⚾숫자 야구 게임

+

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

+

올바른 예) 139

+

틀린 예) 122

+
+ + +
+

📄결과

+
+ +
+ + + \ No newline at end of file diff --git a/index.html b/index.html index b021b5c..857c687 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,34 @@ - - - - - - - - -
- - - + + + + + + 숫자야구 + + + +
+

⚾숫자 야구 게임에 오신 것을 환영합니다.
+ +

+ +
+ + \ No newline at end of file diff --git a/src/calculateScore.js b/src/calculateScore.js new file mode 100644 index 0000000..2c719c5 --- /dev/null +++ b/src/calculateScore.js @@ -0,0 +1,12 @@ +//총 스트라이크 및 볼 수 합산계산 +import { counting } from "./counting.js"; +import { answer } from "./main.js"; + +export function calculateScore(value) { + 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); + } + return score; +} \ No newline at end of file diff --git a/src/checkInput.js b/src/checkInput.js new file mode 100644 index 0000000..a4e54d8 --- /dev/null +++ b/src/checkInput.js @@ -0,0 +1,34 @@ +//잘못된 시도인지 검사 +import { removeDuplicates } from "./removeDuplicates.js"; +import { $input } from './main.js'; +import { tries } from "./main.js"; +import { removeZero } from "./removeZero.js"; + +export function checkInput(input) { + if (input.includes('0')){ + $input.value=removeZero(input); + return alert('1~9사이 숫자를 입력하세요'); + } + if (input.length > 3) { + let temp; + temp=input.slice(0,3); + $input.value=removeDuplicates(temp); + + return alert('중복되지 않게 3자리 숫자를 입력해 주세요.'); + } + if (input.length !== 3) { + $input.value=removeDuplicates(input); + return alert('중복되지 않게 3자리 숫자를 입력해 주세요.'); + } + if (new Set(input).size !== 3) { + $input.value=removeDuplicates(input); + + return alert('중복되지 않게 3자리 숫자를 입력해주세요'); + } + if (tries.includes(input)) { + $input.value=''; + return alert('이미 시도한 값입니다'); + } + + return true; +} \ No newline at end of file diff --git a/src/counting.js b/src/counting.js new file mode 100644 index 0000000..4537e6f --- /dev/null +++ b/src/counting.js @@ -0,0 +1,6 @@ +// 스트라이크 및 볼 계산 +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/displayLogText.js b/src/displayLogText.js new file mode 100644 index 0000000..e0daf98 --- /dev/null +++ b/src/displayLogText.js @@ -0,0 +1,6 @@ +//결과값 출력 +import { $logs } from "./main.js"; + +export function displayLogText(text) { // 매개변수로 전달된 값을 출력한다 + $logs.textContent = text; +} \ No newline at end of file diff --git a/src/displayScore.js b/src/displayScore.js new file mode 100644 index 0000000..1bea481 --- /dev/null +++ b/src/displayScore.js @@ -0,0 +1,10 @@ +//스트라이크 및 볼 출력 +import { displayLogText } from "./displayLogText.js"; + +export function displayScore(value, score) { + if (score.strike === 0 && score.ball === 0){ //0스트라이크 0볼일 때 + displayLogText('Nothing(낫싱)'); //낫띵 출력 + } else { //낫싱이 아니라면 + displayLogText(`${value}: ${score.strike} 스트라이크 ${score.ball} 볼`); //스트라이크, 볼 출력 + } +} \ No newline at end of file diff --git a/src/generateNumbers.js b/src/generateNumbers.js new file mode 100644 index 0000000..cc4a176 --- /dev/null +++ b/src/generateNumbers.js @@ -0,0 +1,16 @@ +// 번호생성 +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..c973d3e 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,52 @@ +import { generateNumbers } from "./generateNumbers.js"; +import { checkInput } from "./checkInput.js"; +import { calculateScore } from "./calculateScore.js"; +import { displayScore } from "./displayScore.js"; +import { displayLogText } from "./displayLogText.js"; + +//DOM 요소 +export const $input = document.querySelector('#input'); +export const $logs = document.querySelector('#logs'); +const $form = document.querySelector('#form'); +const $restartButton = document.querySelector('#restartButton'); +const $restart = document.querySelector('#restart'); +const $confirmButton = document.querySelector('#confirmButton'); + +//정답 생성 및 시도값 저장변수 선언 +export let answer = generateNumbers(); +export let tries = []; + +//정답제출버튼 및 재시작 버튼 클릭 시 +$form.addEventListener('submit', handleSubmit); +$restartButton.addEventListener('click', restartGame); + +// 정답 입력 처리 함수 +function handleSubmit(event) { + event.preventDefault(); + const value = $input.value; + const valid = checkInput(value); + + if (!valid) return; //잘못된 값 입력 시 + + if (answer.join('')===value){ //정답 입력 시 + displayLogText('🎉정답을 맞추셨습니다!🎉'); + document.getElementById('restart').style.display='block'; + $input.disabled=true; + $confirmButton.disabled=true; + return; + } + const score = calculateScore(value); //유효한 시도시 + displayScore(value, score); + tries.push(value); +} + +// 게임 재시작 +function restartGame() { + answer = generateNumbers(); + tries = []; + $logs.textContent = ''; + $restart.style.display='none'; + $input.disabled = false; + $confirmButton.disabled=false; + $input.value=''; + } \ No newline at end of file diff --git a/src/removeDuplicates.js b/src/removeDuplicates.js new file mode 100644 index 0000000..c6f0de4 --- /dev/null +++ b/src/removeDuplicates.js @@ -0,0 +1,16 @@ +//중복 제거 함수 +export function removeDuplicates(input) { + let result = ''; + + for (let i = 0; i < input.length; i++) { + //현재 숫자가 이전 숫자와 중복되는지 확인 + if (i === 0 || input[i] !== input[i - 1] && input[i] !== input[i - 2]) { + //중복되지 않으면 결과에 추가 + result += input[i]; + } else { + //중복되면 중단 + break; + } + } + return result; +} \ No newline at end of file diff --git a/src/removeZero.js b/src/removeZero.js new file mode 100644 index 0000000..600cb2c --- /dev/null +++ b/src/removeZero.js @@ -0,0 +1,9 @@ +//0 제거 함수 +export function removeZero(input){ + const zeroIndex=input.indexOf('0'); + let newValue; + if(zeroIndex !== -1) { + newValue=input.substring(0, zeroIndex); + } + return newValue; +} \ No newline at end of file