diff --git a/README.md b/README.md index 19d1fee0..f25a08ff 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ - 위 숫자 야구게임에서 상대방의 역할을 컴퓨터가 한다. 컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다. 게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력하고, 컴퓨터는 입력한 숫자에 대한 결과를 출력한다. - 이 같은 과정을 반복해 컴퓨터가 선택한 3개의 숫자를 모두 맞히면 게임이 종료된다. - 게임을 종료한 후 게임을 다시 시작할 수 있다. -- 게임을 종료한 후 id가 `game-restart-button`인 버튼을 클릭함으로써 게임을 다시 시작할 수 있다. +- 게임을 종료한 후 id가 `game-restart-button`인 버튼을 클릭함으로써 게임을 다시 시작할 수 있다. - `예) `
@@ -87,3 +87,51 @@ play(123, 124); // '2스트라이크' - event - [이벤트](https://ko.javascript.info/introduction-browser-events) - [이벤트 위임](https://ko.javascript.info/event-delegation) + +
+상대방의 역할을 컴퓨터가 한다. +컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다. +게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력하고, +버튼을 눌렀을 때, + +- 사용자가 잘못된 입력 값을 작성한 경우 `alert`을 이용해 메시지를 보여주고, 재입력할 수 있게 한다. -제대로된 값을 입력했을 때, + 컴퓨터의 랜덤값 3개가 나온다. + input값과 겹치는 숫자가 있을 때, + +컴퓨터는 입력한 숫자에 대한 결과를 출력한다. + +사용자인풋과 컴퓨터 랜덤 배열 중, + +1. 같은수 없으면 = 낫싱 +2. 같은 수, 같은 자리 = 스트라이크 +3. 같은 수, 다른 자리 = 볼 그 중에서 같은수 한개면 1볼, 두개면 2볼, 3개면 3볼 + 스트라이크와 볼은 합산 계산 가능 + play(123, 134); // '1볼 1스트라이크' 1볼 불포함 계산 후 스트라이크 계산 + play(123, 132); // '2볼 1스트라이크' + 스트라이크와 볼이 같이 있는 경우 볼을 먼저쓰고, 스트라이크를 쓴다. + +4. 숫자를 모두 맞히면: 🎉정답을 맞추셨습니다!🎉 + 게임을 새로 시작하시겠습니까? 게임재시작 버튼 + 게임이 종료된다. + +## 필요한 함수 펼쳐보기 + +### 인풋 버튼 클릭이벤트 함수 + +### 사용자 인풋을 배열안에 넣는 함수 + +### 겹치지 않는 세자리 난수 생성 + +### 인풋 세자리 겹치지 않는 숫자로 제한 + +### 게임이 승리했을 때 함수? + +- 축하메시지 문자열과 버튼 태그 div 생성 +- 버튼 누르면 게임 리셋 + +## 리셋 버튼 클릭이벤트 함수 + +### 게임결과를 문자열로 나타내는 함수 + +- 볼, 스트라이크, 낫싱 출력 후 +- 각 결과에 맞는 문자열 생성 diff --git a/index.html b/index.html index 041e0300..a8063901 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,13 @@ 숫자 야구 게임 + + + +
@@ -13,11 +20,24 @@

⚾ 숫자 야구 게임

올바른 예) 139
틀린 예) 122

- + +

📄 결과

+ + +
+

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

+ +
- + + diff --git a/src/index.js b/src/index.js index 1553d753..211f23e5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,68 @@ -export default function BaseballGame() { - this.play = function (computerInputNumbers, userInputNumbers) { - return "결과 값 String"; - }; -} - // export default class BaseballGame { // play(computerInputNumbers, userInputNumbers) { // return "결과 값 String"; // } // } +// new BaseballGame(); + +const userInput = document.getElementById("user-input"); +const btnSubmit = document.getElementById("submit"); +const Msgresult = document.getElementById("result"); + +// 인풋 세자리 겹치지 않는 숫자로 제한 +function maxLengthCheck(userInput) { + if (userInput.value.length > userInput.maxLength) { + userInput.value = userInput.value.slice(0, userInput.maxLength); + } +} + +//겹치지 않는 세자리 난수 생성 +let computerrArr = []; +let num; + +function computerInputNumbers() { + while (computerrArr.length < 3) { + num = Math.floor(Math.random() * 9); + if (!computerrArr.includes(num)) { + computerrArr.push(num); + } + } + + return computerrArr; +} + +// 인풋 버튼 클릭이벤트 함수 +btnSubmit.addEventListener("click", userInputNumbers); + +// 사용자 인풋을 배열안에 넣는 함수 +let userArray = []; +function userInputNumbers() { + let inputValue = userInput.value; + for (let i = 0; i < inputValue.length; i++) { + userArray.push(inputValue[i]); + } + userInput.value = null; + + play(userArray, computerInputNumbers()); +} -new BaseballGame(); +// 게임결과를 문자열로 나타내는 함수 +function play(userArray, computerrArr) { + const CountScore = { + strike: 0, + ball: 0, + }; + + for (let num of userArray) { + const indexNum = userArray.indexOf(num); + console.log(computerrArr.indexOf(num)); + + if (computerrArr.indexOf(num) === indexNum) { + CountScore.strike += 1; + } else if (computerrArr.includes(num)) { + CountScore.ball += 1; + } + } + console.log(userArray, computerrArr); + console.log(CountScore); +} diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..9c37f69a --- /dev/null +++ b/src/style.css @@ -0,0 +1,20 @@ +* { + font-family: "Noto Sans KR", sans-serif; +} + +.new-game-message-box { + display: none; + flex-direction: row; + align-items: center; + gap: 10px; +} + +.new-game-message-box button { + height: 1.5rem; +} + +input::-webkit-inner-spin-button { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +}