diff --git a/README.md b/README.md index 8b2833c..44bbbe1 100644 --- a/README.md +++ b/README.md @@ -1 +1,23 @@ -# javascript-baseball-precourse \ No newline at end of file +컴퓨터가 랜덤의 숫자 3자리 문제 제출 (서로 다른 3개의 수, 1~9) +사용자가 서로 다른 수로 이루어진 3자리의 수 입력 (userInput값) + +입력받은 userInput값 검증 -> userInput값 조건문 작성 +userInput값 길이 - 숫자의 길이가 3인지 확인하기 + +userInput값 숫자 - 모두 숫자인지 확인하기 +userInput값 숫자의 범위 - 숫자의 범위가 1~9 사이인지 확인하기 +userInput값이 서로 다른가? - 모두 다른 수인지 확인하기 + +답의 결과 출력 (볼, 스트라이크 판정) -> 각각 computerInput값과 userInput값 받기 (,) 이렇게? +: 같은 수 같은 자리에 있을 시 스트라이크 +: 다른 자리에 있을 시 볼 +: 같은 수가 전혀 없으면 낫싱 (0볼, 0스트라이크) +: 단, 스트라이크와 볼이 같이 있는 경우 출력 순서는 볼 -> 스트라이크 + +정답여부 확인 +1. 정답일 경우 (3스트라이크) -> "정답을 맞추셨습니다" 결과 멘트 + "게임을 새로 시작하시겠습니까?" 결과 멘트 + 게임 재시작 버튼 출력 (버튼에 기능 부여) +2. 정답이 아닐 경우 -> 판정 결과 각각 문자열 출력 + + +컴퓨터가 선택한 3개의 숫자를 사용자가 맞히면 게임 종료 + 재시작 버튼을 생성해 게임 재시작 가능하게 함 +사용자가 잘못된 값을 입력한 경우 alert 에러 메시지를 보여주고, 재입력 가능하게함 \ No newline at end of file diff --git a/index.html b/index.html index b021b5c..ef1f46e 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,34 @@ - - - - - - -
- - - + + + + + 숫자 야구 게임 + + + + +
+

⚾ 숫자 야구 게임

+

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

+ + +

📄결과

+

+ + +
+ + + + \ No newline at end of file diff --git a/src.zip b/src.zip new file mode 100644 index 0000000..172ffa3 Binary files /dev/null and b/src.zip differ diff --git a/src/controller/baseballGameController.js b/src/controller/baseballGameController.js new file mode 100644 index 0000000..7bd5830 --- /dev/null +++ b/src/controller/baseballGameController.js @@ -0,0 +1,20 @@ +import { BaseballGameModel } from '../model'; +import { BaseballGameView } from '../view'; + +const checkAnswer = (playerNumber) => { + let strikes = 0, balls = 0; + const computerNumber = BaseballGameModel.getComputerNumber(); + const playerDigits = playerNumber.split("").map(Number); + + playerDigits.forEach((digit, index) => { + if (computerNumber[index] === digit) { + strikes++; + } else if (computerNumber.includes(digit)) { + balls++; + } + }); + console.log(computerNumber); + BaseballGameView.displayGameResult(strikes, balls); +}; + +export default { checkAnswer }; diff --git a/src/main.js b/src/main.js index e69de29..e72b2df 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,49 @@ +import { generateComputerNumber, computerNumber } from './model/ComputerNumberModel.js'; +import { displayGameResult } from './view/baseballGameView.js'; + +let playerNumber = ""; + +const getPlayerNumber = () => { + const input = document.getElementById("userInput"); + playerNumber = input.value.trim(); + + // 승리 메시지 입력 후 틀린 결과 입력 시 결과 초기화함 + document.getElementById("gameResult").textContent = ""; + document.getElementById("restartPrompt").style.display = 'none'; + document.getElementById("restartButton").style.display = 'none'; + + if (playerNumber.length !== 3 || new Set(playerNumber).size !== 3) { + alert("잘못된 입력입니다. 1에서 9까지의 숫자를 중복 없이 정확히 3개 입력해주세요."); + input.value = ""; + return; + } + checkAnswer(); +}; + + +const checkAnswer = () => { + let strikes = 0; + let balls = 0; + const playerDigits = playerNumber.split("").map(Number); + const computerDigits = computerNumber.map(Number); + + playerDigits.forEach((digit, index) => { + if (computerDigits[index] === digit) { + strikes++; + } else if (computerDigits.includes(digit)) { + balls++; + } + }); + + displayGameResult(strikes, balls); +}; + +document.addEventListener("DOMContentLoaded", () => { + generateComputerNumber(); + document.getElementById("checkButton").addEventListener("click", (event) => { + event.preventDefault(); + getPlayerNumber(); + }); +}); + +export { computerNumber, generateComputerNumber }; \ No newline at end of file diff --git a/src/model/ComputerNumberModel.js b/src/model/ComputerNumberModel.js new file mode 100644 index 0000000..79d6ef9 --- /dev/null +++ b/src/model/ComputerNumberModel.js @@ -0,0 +1,13 @@ +let computerNumber = []; + +export const generateComputerNumber = () => { + computerNumber = []; + while (computerNumber.length < 3) { + const number = Math.floor(Math.random() * 9) + 1; + if (!computerNumber.includes(number)) { + computerNumber.push(number); + } + } +}; + +export { computerNumber }; diff --git a/src/model/PlayerNumberModel.js b/src/model/PlayerNumberModel.js new file mode 100644 index 0000000..b964b7d --- /dev/null +++ b/src/model/PlayerNumberModel.js @@ -0,0 +1,41 @@ +import { computerNumber } from "../computerNumberModel.js"; +import { displayGameResult } from "../view/displayGameResultView.js"; + +let playerNumber = ""; + +export const getPlayerNumber = () => { + const input = document.getElementById("userInput"); + playerNumber = input.value.trim(); + + // 승리 메시지 입력 후 틀린 결과 입력 시 결과 초기화함 + document.getElementById("gameResult").textContent = ""; + document.getElementById("restartPrompt").style.display = 'none'; + document.getElementById("restartButton").style.display = 'none'; + + if (playerNumber.length !== 3 || new Set(playerNumber).size !== 3) { + alert("잘못된 입력입니다. 1에서 9까지의 숫자를 중복 없이 정확히 3개 입력해주세요."); + input.value = ""; + return; + } + checkAnswer(); +}; + + +export const checkAnswer = () => { + let strikes = 0; + let balls = 0; + const playerDigits = playerNumber.split("").map(Number); + const computerDigits = computerNumber.map(Number); + + playerDigits.forEach((digit, index) => { + if (computerDigits[index] === digit) { + strikes++; + } else if (computerDigits.includes(digit)) { + balls++; + } + }); + + displayGameResult(strikes, balls); +}; + +export { playerNumber }; \ No newline at end of file diff --git a/src/view/baseballGameView.js b/src/view/baseballGameView.js new file mode 100644 index 0000000..ebb4acc --- /dev/null +++ b/src/view/baseballGameView.js @@ -0,0 +1,38 @@ +import {computerNumber, generateComputerNumber } from '../main.js'; + +export const displayGameResult = (strikes, balls) => { + const resultElement = document.getElementById("gameResult"); + if (strikes === 3) { + resultElement.textContent = ""; // 기존 결과 텍스트 초기화 하고 결과 메시지 출력 + showRestartOption(); + } else { + + if (balls === 0 && strikes === 0) { + resultElement.textContent = "낫싱"; + } else if (balls > 0 && strikes === 0) { + resultElement.textContent = `${balls}볼`; + } else if (balls === 0 && strikes > 0) { + resultElement.textContent = `${strikes}스트라이크`; + } else { + resultElement.textContent = `${balls}볼 ${strikes}스트라이크`; + } + } +}; + +const showRestartOption = () => { + const restartPrompt = document.getElementById("restartPrompt"); + const restartButton = document.getElementById("restartButton"); + restartPrompt.style.display = 'block'; + restartButton.style.display = 'block'; + restartButton.onclick = restartGame; +}; + +const restartGame = () => { + // 배열의 내용을 비웁니다. + computerNumber.length = 0; + generateComputerNumber(); + document.getElementById("userInput").value = ""; + document.getElementById("gameResult").textContent = ""; + document.getElementById("restartPrompt").style.display = 'none'; + document.getElementById("restartButton").style.display = 'none'; +};