diff --git a/README.md b/README.md index 8b2833c..15afade 100644 --- a/README.md +++ b/README.md @@ -1 +1,67 @@ -# javascript-baseball-precourse \ No newline at end of file +# ⚾️ javascript-baseball-precourse +카카오 테크 캠퍼스 2기 1회차 미니과제 - 숫자 야구 게임 + + +## 🖥️ 과제 진행 요구 사항 +- 기능을 구현하기 전 README.md 에 구현할 기능 목록을 정리해 추가한다. +- Git의 커밋 단위는 앞 단계에서 README.md 에 정리한 기능 목록 단위로 추가한다 + + +## 🧑‍🤝‍🧑 기능 요구 사항 + #### 1) 컴퓨터 + - 1에서 9까지 서로 다른 임의의 수 3개를 선택 + - 사용자가 입력한 숫자에 대해 같은 수가 같은 자리에 있으면 스트라이크, 다른 자리에 있으면 볼, 같은 수가 전혀 없으면 낫싱 출력 + - 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 + - 사용자가 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼이 표시 + + + #### 2) 게임 플레이어 + - 컴퓨터가 생각하고 있는 3개의 숫자를 입력 + - alert() 에러 메시지가 나타날 경우 그 부분부터 다시 입력 + - 게임을 종료한 후 게임을 다시 시작하거나 완전히 종료 가능 + +
+ +## ⚙️ 구현할 기능 목록 + +### 초기 화면 구성 +- "**시작하기**" 버튼 클릭시 1에서 9까지 서로 다른 임의의 수 3개를 선택 +- 게임 시작 후 사용자에게 값을 입력받을 수 있다. + +
+ +### 입력값 유효성 검사 + +#### 1) 올바른 형식의 값 입력 +- 1에서 9까지 서로 다른 임의의 정수 3개인 경우이며 반대의 경우는 모두 잘못된 형식이다. +- 입력한 값에 대한 결과를 출력한다. + +#### 2) 잘못된 형식의 값 입력 +- alert()을 통해 "잘못된 입력 형식입니다!" 에러메세지를 출력 후 그 부분부터 다시 입력받는다. + +
+ +### 결과 출력 + +#### 1) 정답 +- 🎉정답을 맞추셨습니다🎉 문구 출력 후 게임 종료된다 + +#### 2) 오답 +- 같은 수가 같은 자리에 있으면 스트라이크 출력 +- 다른 자리에 있으면 볼 출력 +- 같은 수가 전혀 없으면 낫싱 출력 + +
+ +### 게임 종료 + +#### 1) 재시작 +- "**게임 재시작**" 버튼을 클릭시 초기 화면으로 돌아가 입력을 받을 수 있다. + +#### 2) 완전 종료 +- "**종료하기**" 버튼을 클릭시 게임이 완전히 종료되고 초기 화면으로 돌아가 "**시작하기**" 버튼을 클릭 할 수 있다. + + +
+ +## 📌 과제 진행 소감 diff --git a/index.html b/index.html index b021b5c..b6f1a60 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,44 @@ - + ⚾️숫자 야구 게임⚾️ + -
- +
+ +
+

⚾️숫자 야구 게임⚾️

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

⚾️ 결과

+
+
+ +
+
게임을 시작하시겠습니까?
+ +
+
+
게임을 새로 시작하시겠습니까?
+ +
+
+
게임을 종료하시겠습니까?
+ +
+
+ + +
+ diff --git a/src/css/main.css b/src/css/main.css new file mode 100644 index 0000000..3d2820e --- /dev/null +++ b/src/css/main.css @@ -0,0 +1,58 @@ +#app{ + display: flex; + justify-content: center; +} + +.container{ + border: 3px solid #000; + border-radius: 10px; + padding: 30px; + margin-top: 150px; +} + + + +.result .result--text{ + font-weight: 700; + font-size: 17px; +} + + + +.game-start{ + display: block; +} + +.game-start.hide{ + display: none; +} + +.game-start .question--start{ + margin-bottom: 10px; +} + + +.game-restart{ + display: block; +} + +.game-restart.hide{ + display: none; +} + +.game-restart .question--restart{ + margin-bottom: 10px; +} + +.game-quit{ + display: block; +} + +.game-quit.hide{ + display: none; +} + +.game-quit .question--quit{ + margin-top: 10px; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 0000000..7e6b2e8 --- /dev/null +++ b/src/js/main.js @@ -0,0 +1,91 @@ +let randomNumbers; + +const startBtn = document.querySelector('.btn--start'); +const restartBtn = document.querySelector('.btn--restart'); +const quitBtn = document.querySelector('.btn--quit'); +const answerInput = document.getElementById('input--answer'); +const form = document.querySelector("form"); +const answerBtn = document.querySelector('.btn--answer'); +const gameStart = document.querySelector('.game-start'); +const gameRestart = document.querySelector('.game-restart'); +const gameQuit = document.querySelector('.game-quit'); +const resultEl = document.querySelector(".result--text"); + + +startBtn.addEventListener('click', () =>{ + gameStart.classList.add('hide'); + gameRestart.classList.add('hide'); + gameQuit.classList.add('hide'); + answerInput.disabled = false; + randomNumbers = getRandomNumbers(); +}); + +restartBtn.addEventListener('click', function(){ + gameRestart.classList.add('hide'); + gameStart.classList.add('hide'); + gameQuit.classList.add('hide'); + answerInput.disabled = false; + randomNumbers = getRandomNumbers(); +}); + +quitBtn.addEventListener('click', function(){ + gameRestart.classList.add('hide'); + gameQuit.classList.add('hide'); + gameStart.classList.remove('hide'); + answerInput.disabled = true; +}); + +form.addEventListener('submit', (event) => { + event.preventDefault(); + const answerValue = answerInput.value; + isValid(answerValue); + event.target.reset(); +}); + +function getRandomNumbers() { + const numbers = []; + while (numbers.length < 3) { + const randomNumber = Math.floor(Math.random() * 9) + 1; + if (!numbers.includes(randomNumber)) { + numbers.push(randomNumber); + } + } + return numbers; +} + +function showResult(inputArray, randomNumbers){ + let strike = 0; + let ball = 0; + + for(let i = 0; i < 3; i++){ + if(inputArray[i] === randomNumbers[i]){ + strike++; + }else if(randomNumbers.includes(inputArray[i])){ + ball++; + } + } + + if(strike === 3){ + resultEl.textContent = " 🎉정답을 맞추셨습니다🎉"; + answerInput.disabled = true; + gameRestart.classList.remove('hide'); + gameQuit.classList.remove('hide'); + }else if(strike == 0 && ball == 0){ + resultEl.textContent = "닛싱"; + }else if(strike == 0){ + resultEl.textContent = `${ball} 볼`; + }else if(ball == 0){ + resultEl.textContent = `${strike} 스트라이크`; + }else{ + resultEl.textContent = `${strike} 스트라이크 , ${ball} 볼`; + } +} + +function isValid(input){ + const inputArray = Array.from(new Set(input.split('').map(Number))); + if(inputArray.length === 3 && input.length === 3){ + showResult(inputArray,randomNumbers); + }else{ + alert("잘못된 입력 형식입니다!"); + } +} diff --git a/src/main.js b/src/main.js deleted file mode 100644 index e69de29..0000000