diff --git a/README.md b/README.md index 8b2833c..834d0e5 100644 --- a/README.md +++ b/README.md @@ -1 +1,65 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse + +- 숫자 야구 - 미니과제 +- [참고 주소](https://github.com/next-step/javascript-baseball-precourse) +- node v20.11.1 + +--- + +## 구현 기능 목록 + +### 1. 컴퓨터 랜덤 숫자 선택 + +- 컴퓨터는 1에서 9까지의 숫자 중에서 서로 다른 임의의 수 세 개를 선택한다. +- 선택된 숫자는 게임이 `재시작 및 종료`될 때까지 변경되지 않는다. + +### 2. 사용자 숫자 입력 + +- 사용자는 세 자리의 숫자를 입력한다. + +### 3. 사용자 입력 유효성 판단 + +- 세 자리의 숫자인지 확인한다. +- 각 자리의 숫자가 1에서 9 사이인지 확인한다. +- 각 자리의 숫자가 서로 중복되지 않는지 검사한다. +- 위의 조건을 만족하지 않을 경우, alert()를 사용하여 오류 메시지를 출력한다. +- 그 부분부터 사용자는 다시 숫자를 입력한다. + +### 4. 숫자 비교 + +- `컴퓨터 랜덤 숫자`와 `사용자 숫자`를 비교한다. + - 숫자와 위치가 일치하면, "스트라이크"로 카운트한다. + - 숫자는 일치하지만 위치가 다르면, "볼"로 카운트한다. + - 일치하는 숫자가 없으면, "낫싱"으로 카운트한다. +- 사용자가 `컴퓨터 랜덤 숫자`를 맞출 때까지 과정을 반복한다. + +### 5. 결과 출력 + +- 비교 결과에 따라 "스트라이크", "볼", "낫싱"의 수를 화면에 출력한다. +- 예: "1스트라이크 2볼", "낫싱" 등 +- 결과가 "3 스트라이크"라면, 게임 종료 메시지를 출력한다. + +### 6. 재시작 + +- 게임 종료 메시지 후 재시작 버튼을 표시한다. +- 재시작 버튼을 클릭하면, 컴퓨터는 새로운 숫자를 선택하고 게임을 다시 시작한다. + +### 7. 종료 + +- 사용자가 게임을 종료할 수 있는 옵션을 제공한다. +- 게임을 종료한다는 것은, 창을 닫는다는 의미로 해석한다. +- 프로그래밍 요구 사항에 따라, 프로그램 종료 시 process.exit() 를 호출하지 않는다. + +### 8. 추가 기능 구현 + +- 엔터 버튼으로 입력을 받는다. +- 새로 입력하면, 기존의 입력되어 있던 값이 사라진다. + +--- + +### 과제 진행 소감 + +- 이번 개인 프로젝트를 통해 GitHub에서 버전 관리를 하고 처음으로 포크를 진행하면서 협업에 필요한 여러 기법을 배울 수 있었습니다. 🤓📚 특히, 프로그래밍 요구사항을 이해하면서 나중에 개발 협업 시 공통적으로 합의해야 할 사항들에 대해 학습할 수 있었습니다. +- 또한, 구현할 목록을 단계별로 작성하고 이를 하나씩 완성해 가면서 체계적으로 학습할 수 있었습니다. 이전에 미니 프로젝트를 진행하면서 요구사항을 제대로 정의하지 않았던 경험을 되돌아보며 반성하게 되었습니다. 📝🛠 JavaScript를 활용하여 실제로 적용해본 경험은 학습에 많은 도움이 되었으며, 부족한 부분은 블로그와 문서를 참고하여 보완했습니다. +- 게임을 종료하는 방식으로 창을 닫으려 했으나 정책상의 이유로 window.close() 함수를 사용할 수 없었습니다. 대신, 화면의 요소들을 보이지 않게 하여 게임이 종료된 것처럼 처리하였습니다. 이와 같은 방식으로 종료의 의미를 어떻게 해석할 수 있는지 궁금합니다. ❓🚪 +- CSS도 추가로 구현하고 싶었지만, 시간 관리가 부족하여 진행하지 못한 것이 아쉽습니다. ⏳🎨 \ No newline at end of file diff --git a/index.html b/index.html index b021b5c..5be59da 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,37 @@ - + - + Baseball - Sugoring + -
- +
+

⚾ Let's Play Ball! ⚾

+

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

+

Example: 1️⃣3️⃣9️⃣

+

Try Again: 1️⃣2️⃣2️⃣

+ +
+ + +
+ +

결과

+

게임 진행 중 입니다... ⏳

+ + + + +
+ + diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..6d728e8 --- /dev/null +++ b/src/main.css @@ -0,0 +1,7 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f0f0f0; + } + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..32e7290 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,113 @@ +// 컴퓨터 랜덤 숫자 선택 ---------------------------------------------------------------------------------- +// 전역 변수로 선택된 숫자를 저장 +let computerNumbers = []; + +function randomNumbers() { + const digits = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + const chosenDigits = []; + + while (chosenDigits.length < 3) { + const randomIndex = Math.floor(Math.random() * digits.length); + const digit = digits.splice(randomIndex, 1)[0]; + chosenDigits.push(digit); + } + + return chosenDigits; +} + +function startGame() { + computerNumbers = randomNumbers(); // 게임 시작 시 숫자 생성 + console.log("컴퓨터 랜덤 숫자 선택: ", computerNumbers); +} + +// 게임 시작 +startGame(); + +// 버튼 ---------------------------------------------------------------------------------- +document.addEventListener("DOMContentLoaded", () => { + const inputButton = document.querySelector(".inputButton"); // 확인 버튼 + const restartButton = document.querySelector(".restartButton"); // 재시작 버튼 + + inputButton.addEventListener("click", checkInput); // 확인 버튼 클릭 이벤트 + restartButton.addEventListener("click", restartGame); // 재시작 버튼 클릭 이벤트 +}); + +// 재시작 버튼 ---------------------------------------------------------------------------------- +function restartGame() { + startGame(); // 게임 재시작 + const resultElement = document.querySelector(".displayResult"); + resultElement.textContent = "진행 중 입니다."; // 결과 표시 초기화 + document.getElementById("inputNumber").value = ""; // 입력 필드 초기화 + + const restartButton = document.querySelector(".restartButton"); + restartButton.style.display = "none"; // 재시작 버튼 숨김 +} + +// 사용자 숫자 입력 ---------------------------------------------------------------------------------- +function displayResult(message) { + const resultElement = document.querySelector(".displayResult"); + resultElement.textContent = message; +} + +function checkInput() { + const inputField = document.getElementById("inputNumber"); + const inputValue = inputField.value; + const restartButton = document.querySelector(".restartButton"); + + if (isValidInput(inputValue)) { + const result = compareNumbers(computerNumbers, inputValue); + + if (result.strikes == 0 && result.balls == 0) { + displayResult("닛싱 😔"); + } else if (result.strikes == 0) { + displayResult(`볼 - ${result.balls} 🧢`); + } else if (result.balls == 0) { + displayResult(`스트라이크 - ${result.strikes} 💥`); + } else { + displayResult( + `스트라이크 - ${result.strikes} 💥, 볼 - ${result.balls} 🧢` + ); + } + if (result.strikes === 3) { + displayResult(" 🥳 축하합니다! 🥳"); + restartButton.style.display = "block"; + } + } else { + alert( + "잘못된 입력입니다. 1부터 9까지 서로 다른 숫자 세 개를 입력해주세요." + ); + } +} + +function isValidInput(input) { + const uniqueDigits = new Set(input); + // 입력이 세 자리 숫자이고, 모든 자릿수가 1-9 사이이며, 중복된 숫자가 없어야 함 + return ( + input.length === 3 && + [...uniqueDigits].every((digit) => digit >= "1" && digit <= "9") && + uniqueDigits.size === 3 + ); +} + +// 숫자 비교 ---------------------------------------------------------------------------------- +function compareNumbers(computerNumbers, userInput) { + let strikes = 0; + let balls = 0; + for (let i = 0; i < 3; i++) { + if (computerNumbers[i] === Number(userInput[i])) { + strikes++; + } else if (computerNumbers.includes(Number(userInput[i]))) { + balls++; + } + } + return { strikes, balls }; +} + +// 종료 ---------------------------------------------------------------------------------- +document.addEventListener("DOMContentLoaded", () => { + const exitButton = document.querySelector(".exitButton"); + exitButton.addEventListener("click", function () { + document.getElementById("app").style.display = "none"; // 인터페이스 숨기기 + alert("게임을 종료합니다. 창을 닫아주세요."); + }); +});