From a87cca159a1568fede46ec2296334fd21003794e Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 09:48:21 +0900 Subject: [PATCH 01/12] =?UTF-8?q?docs=20:=20=EA=B5=AC=ED=98=84=ED=95=A0=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EB=AA=A9=EB=A1=9D=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 구현할 기능 목록을 정의한다. 총 7단계로 이루어 진다. --- README.md | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 55 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b2833c..0b2bdfe 100644 --- a/README.md +++ b/README.md @@ -1 +1,55 @@ -# 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() 를 호출하지 않는다. + +--- + +### 과제 진행 소감 + +- \ No newline at end of file From 4d795e20dc1acc788a181f38e501809e2193f29c Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 10:46:42 +0900 Subject: [PATCH 02/12] =?UTF-8?q?feat=20:=20=EC=BB=B4=ED=93=A8=ED=84=B0=20?= =?UTF-8?q?=EB=9E=9C=EB=8D=A4=20=EC=88=AB=EC=9E=90=20=EC=84=A0=ED=83=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 컴퓨터는 1에서 9까지의 숫자 중에서 서로 다른 임의의 수 세 개를 선택한다. - 선택된 숫자는 게임이 `재시작 및 종료`될 때까지 변경되지 않는다. --- index.html | 10 ++++++++-- src/main.js | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b021b5c..a23dc5c 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,18 @@ - + - + baseball - sugoring
+

⚾ 숫자 야구 게임 ⚾

+

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

+

올바른 예 ) 139

+

틀린 예 ) 122

+ + diff --git a/src/main.js b/src/main.js index e69de29..07ec9c8 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,34 @@ +// 전역 변수로 선택된 숫자를 저장 +let computerNumbers = []; + +function generateRandomNumbers() { + 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 = generateRandomNumbers(); // 게임 시작 시 숫자 생성 + console.log("게임이 시작되었습니다. 컴퓨터가 선택한 숫자: ", computerNumbers); +} + +function restartGame() { + computerNumbers = generateRandomNumbers(); // 게임 재시작 시 숫자 재생성 + console.log( + "게임이 재시작되었습니다. 컴퓨터가 선택한 숫자: ", + computerNumbers + ); +} + +// 게임 시작 +startGame(); + +// 필요한 경우 게임 재시작 +// restartGame(); From cca7fbec0de57fe0a52fcbd9058d1f5eabb893ea Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 10:52:24 +0900 Subject: [PATCH 03/12] =?UTF-8?q?feat=20:=20=EC=8A=A4=ED=81=AC=EB=A6=BD?= =?UTF-8?q?=ED=8A=B8=20defer=20=EC=86=8D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a23dc5c..c5d3ac4 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,15 @@
+

⚾ 숫자 야구 게임 ⚾

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

-

올바른 예 ) 139

-

틀린 예 ) 122

+

올바른 예 - 139

+

틀린 예 - 122

+ + From a5d1bdffa6a2826378b12e551bc916207fa7beb4 Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 10:54:13 +0900 Subject: [PATCH 04/12] =?UTF-8?q?feat=20:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=EC=88=AB=EC=9E=90=20=EC=9E=85=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 사용자는 세 자리의 숫자를 입력한다. --- index.html | 3 +-- src/main.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c5d3ac4..e46d9e1 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ baseball - sugoring +
@@ -15,7 +16,5 @@

⚾ 숫자 야구 게임 ⚾

- - diff --git a/src/main.js b/src/main.js index 07ec9c8..3ad9245 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,4 @@ +// 컴퓨터 랜덤 숫자 선택 ---------------------------------------------------------------------------------- // 전역 변수로 선택된 숫자를 저장 let computerNumbers = []; @@ -32,3 +33,30 @@ startGame(); // 필요한 경우 게임 재시작 // restartGame(); + +// 사용자 숫자 입력 ---------------------------------------------------------------------------------- +function checkInput() { + const inputField = document.getElementById("inputNumber"); + const inputValue = inputField.value; + + // 입력 값 검증 + if (isValidInput(inputValue)) { + console.log("입력한 숫자: ", inputValue); + // 입력한 숫자를 게임 로직과 비교하는 함수 등 추가 구현 + } 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 + ); +} From 0dda4cb54fddf1ae8cdd00450a4143fba97f7518 Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 11:01:59 +0900 Subject: [PATCH 05/12] =?UTF-8?q?feat=20:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=ED=8C=90?= =?UTF-8?q?=EB=8B=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 각 자리의 숫자가 1에서 9 사이인지 확인한다. - 각 자리의 숫자가 서로 중복되지 않는지 검사한다. - 위의 조건을 만족하지 않을 경우, alert()를 사용하여 오류 메시지를 출력한다. - 그 부분부터 사용자는 다시 숫자를 입력한다. --- index.html | 2 +- src/main.js | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index e46d9e1..f00ff0b 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,6 @@

⚾ 숫자 야구 게임 ⚾

틀린 예 - 122

- + diff --git a/src/main.js b/src/main.js index 3ad9245..a7a4fdb 100644 --- a/src/main.js +++ b/src/main.js @@ -35,6 +35,11 @@ startGame(); // restartGame(); // 사용자 숫자 입력 ---------------------------------------------------------------------------------- +document.addEventListener("DOMContentLoaded", () => { + const button = document.querySelector(".checkInput"); // 클래스 선택자 + button.addEventListener("click", checkInput); +}); + function checkInput() { const inputField = document.getElementById("inputNumber"); const inputValue = inputField.value; @@ -42,11 +47,8 @@ function checkInput() { // 입력 값 검증 if (isValidInput(inputValue)) { console.log("입력한 숫자: ", inputValue); - // 입력한 숫자를 게임 로직과 비교하는 함수 등 추가 구현 } else { - alert( - "잘못된 입력입니다. 1부터 9까지 서로 다른 숫자 세 개를 입력해주세요." - ); + alert("1 ~ 9까지의 수를 중복없이 3개 입력해주세요."); } } From ba3a654d1adacda7f931a4336dbb95dbf4567690 Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 11:09:33 +0900 Subject: [PATCH 06/12] =?UTF-8?q?feat=20:=20=EC=88=AB=EC=9E=90=20=EB=B9=84?= =?UTF-8?q?=EA=B5=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `컴퓨터 랜덤 숫자`와 `사용자 숫자`를 비교한다. - 숫자와 위치가 일치하면, "스트라이크"로 카운트한다. - 숫자는 일치하지만 위치가 다르면, "볼"로 카운트한다. - 일치하는 숫자가 없으면, "낫싱"으로 카운트한다. - 사용자가 `컴퓨터 랜덤 숫자`를 맞출 때까지 과정을 반복한다. --- src/main.js | 40 ++++++++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/src/main.js b/src/main.js index a7a4fdb..ac18de0 100644 --- a/src/main.js +++ b/src/main.js @@ -20,23 +20,12 @@ function startGame() { console.log("게임이 시작되었습니다. 컴퓨터가 선택한 숫자: ", computerNumbers); } -function restartGame() { - computerNumbers = generateRandomNumbers(); // 게임 재시작 시 숫자 재생성 - console.log( - "게임이 재시작되었습니다. 컴퓨터가 선택한 숫자: ", - computerNumbers - ); -} - // 게임 시작 startGame(); -// 필요한 경우 게임 재시작 -// restartGame(); - // 사용자 숫자 입력 ---------------------------------------------------------------------------------- document.addEventListener("DOMContentLoaded", () => { - const button = document.querySelector(".checkInput"); // 클래스 선택자 + const button = document.querySelector(".checkInput"); // 클래스 선택자로 버튼 선택 button.addEventListener("click", checkInput); }); @@ -44,17 +33,22 @@ function checkInput() { const inputField = document.getElementById("inputNumber"); const inputValue = inputField.value; - // 입력 값 검증 if (isValidInput(inputValue)) { - console.log("입력한 숫자: ", inputValue); + const result = compareNumbers(computerNumbers, inputValue); + alert(`결과: ${result.strikes} 스트라이크, ${result.balls} 볼`); + if (result.strikes === 3) { + alert("축하합니다! 모든 숫자를 맞췄습니다."); + // 여기에서 게임 재시작 또는 종료 로직을 추가할 수 있습니다. + } } else { - alert("1 ~ 9까지의 수를 중복없이 3개 입력해주세요."); + alert( + "잘못된 입력입니다. 1부터 9까지 서로 다른 숫자 세 개를 입력해주세요." + ); } } function isValidInput(input) { const uniqueDigits = new Set(input); - // 입력이 세 자리 숫자이고, 모든 자릿수가 1-9 사이이며, 중복된 숫자가 없어야 함 return ( input.length === 3 && @@ -62,3 +56,17 @@ function isValidInput(input) { 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 }; +} From 51890504f9a4f9f66d9b9866119c497f0b240a7d Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 11:27:23 +0900 Subject: [PATCH 07/12] =?UTF-8?q?feat=20:=20=EA=B2=B0=EA=B3=BC=20=EC=B6=9C?= =?UTF-8?q?=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 비교 결과에 따라 "스트라이크", "볼", "낫싱"의 수를 화면에 출력한다. - 예: "1스트라이크 2볼", "낫싱" 등 - 결과가 "3 스트라이크"라면, 게임 종료 메시지를 출력한다. --- index.html | 5 ++++- src/main.js | 15 ++++++++++++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index f00ff0b..40da0ee 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,14 @@

⚾ 숫자 야구 게임 ⚾

-

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

+

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

올바른 예 - 139

틀린 예 - 122

+ +

결과

+

진행 중 입니다.

diff --git a/src/main.js b/src/main.js index ac18de0..c96b451 100644 --- a/src/main.js +++ b/src/main.js @@ -29,16 +29,25 @@ document.addEventListener("DOMContentLoaded", () => { button.addEventListener("click", checkInput); }); +function displayResult(message) { + const resultElement = document.querySelector(".displayResult"); + resultElement.textContent = message; +} + function checkInput() { const inputField = document.getElementById("inputNumber"); const inputValue = inputField.value; if (isValidInput(inputValue)) { const result = compareNumbers(computerNumbers, inputValue); - alert(`결과: ${result.strikes} 스트라이크, ${result.balls} 볼`); + + if (result.strikes == 0 && result.balls == 0) { + displayResult("닛싱"); + } else { + displayResult(`${result.strikes} 스트라이크, ${result.balls} 볼`); + } if (result.strikes === 3) { - alert("축하합니다! 모든 숫자를 맞췄습니다."); - // 여기에서 게임 재시작 또는 종료 로직을 추가할 수 있습니다. + displayResult("축하합니다! 모든 숫자를 맞췄습니다."); } } else { alert( From d80f20bc2383cca7d3a8262c57cf4c1c9f5a50eb Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 12:08:45 +0900 Subject: [PATCH 08/12] =?UTF-8?q?feat=20:=20=EC=9E=AC=EC=8B=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 게임 종료 메시지 후 재시작 버튼을 표시한다. - 재시작 버튼을 클릭하면, 컴퓨터는 새로운 숫자를 선택하고 게임을 다시 시작한다. --- index.html | 2 ++ src/main.js | 22 +++++++++++++++++++--- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 40da0ee..398ffd9 100644 --- a/index.html +++ b/index.html @@ -19,5 +19,7 @@

⚾ 숫자 야구 게임 ⚾

결과

진행 중 입니다.

+ + diff --git a/src/main.js b/src/main.js index c96b451..afb87d1 100644 --- a/src/main.js +++ b/src/main.js @@ -23,12 +23,27 @@ function startGame() { // 게임 시작 startGame(); -// 사용자 숫자 입력 ---------------------------------------------------------------------------------- +// 버튼 ---------------------------------------------------------------------------------- document.addEventListener("DOMContentLoaded", () => { - const button = document.querySelector(".checkInput"); // 클래스 선택자로 버튼 선택 - button.addEventListener("click", checkInput); + const button = document.querySelector(".checkInput"); // 확인 버튼 + const restartButton = document.querySelector(".restartButton"); // 재시작 버튼 + + button.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; @@ -48,6 +63,7 @@ function checkInput() { } if (result.strikes === 3) { displayResult("축하합니다! 모든 숫자를 맞췄습니다."); + restartButton.style.display = "block"; } } else { alert( From 71b15e88274c8df9cfd376cd0745753b34fb0562 Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 12:28:04 +0900 Subject: [PATCH 09/12] =?UTF-8?q?style=20:=20=EB=AC=B8=EA=B5=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 출력되는 문구를 수정한다. --- README.md | 12 +++++++++--- index.html | 34 ++++++++++++++++++++++------------ src/main.css | 6 ++++++ src/main.js | 20 +++++++++++++------- 4 files changed, 50 insertions(+), 22 deletions(-) create mode 100644 src/main.css diff --git a/README.md b/README.md index 0b2bdfe..8344a63 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ --- -## 구현할 기능 목록 +## 구현 기능 목록 ### 1. 컴퓨터 랜덤 숫자 선택 @@ -19,6 +19,7 @@ ### 3. 사용자 입력 유효성 판단 +- 세 자리의 숫자인지 확인한다. - 각 자리의 숫자가 1에서 9 사이인지 확인한다. - 각 자리의 숫자가 서로 중복되지 않는지 검사한다. - 위의 조건을 만족하지 않을 경우, alert()를 사용하여 오류 메시지를 출력한다. @@ -34,7 +35,7 @@ ### 5. 결과 출력 -- 비교 결과에 따라 "스트라이크", "볼", "낫싱"의 수를 사용자에게 알린다. +- 비교 결과에 따라 "스트라이크", "볼", "낫싱"의 수를 화면에 출력한다. - 예: "1스트라이크 2볼", "낫싱" 등 - 결과가 "3 스트라이크"라면, 게임 종료 메시지를 출력한다. @@ -48,8 +49,13 @@ - 사용자가 게임을 완전히 종료할 수 있는 옵션을 제공한다. - 프로그래밍 요구 사항에 따라, 프로그램 종료 시 process.exit() 를 호출하지 않는다. +### 8. 추가 기능 구현 + +- 엔터 버튼으로 입력을 받는다. +- 새로 입력하면, 기존의 입력되어 있던 값이 사라진다. + --- ### 과제 진행 소감 -- \ No newline at end of file +- 이번 프로젝트는 개인 프로젝트였지만, GitHub을 통해 코드를 관리하면서 버전 관리의 중요성과 협업 시 사용될 수 있는 여러 도구와 기법에 대해 배울 수 있었습니다. \ No newline at end of file diff --git a/index.html b/index.html index 398ffd9..45b1c72 100644 --- a/index.html +++ b/index.html @@ -3,23 +3,33 @@ - baseball - sugoring - + Baseball - Sugoring + -
+
+

⚾ Let's Play Ball! ⚾

+

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

+

Example: 1️⃣3️⃣9️⃣

+

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

-

⚾ 숫자 야구 게임 ⚾

-

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

-

올바른 예 - 139

-

틀린 예 - 122

+
+ + +
- - +

결과

+

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

-

결과

-

진행 중 입니다.

+ +
- + diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..b73ad05 --- /dev/null +++ b/src/main.css @@ -0,0 +1,6 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + text-align: center; + } diff --git a/src/main.js b/src/main.js index afb87d1..ec2f651 100644 --- a/src/main.js +++ b/src/main.js @@ -2,7 +2,7 @@ // 전역 변수로 선택된 숫자를 저장 let computerNumbers = []; -function generateRandomNumbers() { +function randomNumbers() { const digits = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const chosenDigits = []; @@ -16,8 +16,8 @@ function generateRandomNumbers() { } function startGame() { - computerNumbers = generateRandomNumbers(); // 게임 시작 시 숫자 생성 - console.log("게임이 시작되었습니다. 컴퓨터가 선택한 숫자: ", computerNumbers); + computerNumbers = randomNumbers(); // 게임 시작 시 숫자 생성 + console.log("컴퓨터 랜덤 숫자 선택: ", computerNumbers); } // 게임 시작 @@ -25,7 +25,7 @@ startGame(); // 버튼 ---------------------------------------------------------------------------------- document.addEventListener("DOMContentLoaded", () => { - const button = document.querySelector(".checkInput"); // 확인 버튼 + const button = document.querySelector(".inputButton"); // 확인 버튼 const restartButton = document.querySelector(".restartButton"); // 재시작 버튼 button.addEventListener("click", checkInput); // 확인 버튼 클릭 이벤트 @@ -57,12 +57,18 @@ function checkInput() { const result = compareNumbers(computerNumbers, inputValue); if (result.strikes == 0 && result.balls == 0) { - displayResult("닛싱"); + displayResult("닛싱 😔"); + } else if (result.strikes == 0) { + displayResult(`볼 - ${result.balls} 🧢`); + } else if (result.balls == 0) { + displayResult(`스트라이크 - ${result.strikes} 💥`); } else { - displayResult(`${result.strikes} 스트라이크, ${result.balls} 볼`); + displayResult( + `스트라이크 - ${result.strikes} 💥, 볼 - ${result.balls} 🧢` + ); } if (result.strikes === 3) { - displayResult("축하합니다! 모든 숫자를 맞췄습니다."); + displayResult(" 🥳 축하합니다! 🥳"); restartButton.style.display = "block"; } } else { From c63b865ae30fbcb53cf9865ed1e9e508d88aacdc Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 12:37:23 +0900 Subject: [PATCH 10/12] =?UTF-8?q?feat=20=20:=20=EC=A2=85=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 사용자가 게임을 종료할 수 있는 옵션을 제공한다. - 게임을 종료한다는 것은, 창을 닫는다는 의미로 해석한다. - 프로그래밍 요구 사항에 따라, 프로그램 종료 시 process.exit() 를 호출하지 않는다. --- index.html | 2 ++ src/main.js | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/index.html b/index.html index 45b1c72..5be59da 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,8 @@

결과

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

+ + diff --git a/src/main.js b/src/main.js index ec2f651..6150660 100644 --- a/src/main.js +++ b/src/main.js @@ -101,3 +101,12 @@ function compareNumbers(computerNumbers, userInput) { } return { strikes, balls }; } + +// 종료 ---------------------------------------------------------------------------------- +document.addEventListener("DOMContentLoaded", () => { + const exitButton = document.querySelector(".exitButton"); + exitButton.addEventListener("click", function () { + document.getElementById("app").style.display = "none"; // 인터페이스 숨기기 + alert("게임이 종료되었습니다. 창을 닫아주세요."); + }); +}); From a00dc5e4e543019cb58e94b37db9534c28d25f2b Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 12:49:33 +0900 Subject: [PATCH 11/12] =?UTF-8?q?docs=20:=20=EA=B3=BC=EC=A0=9C=20=EC=A7=84?= =?UTF-8?q?=ED=96=89=20=EC=86=8C=EA=B0=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 7 +++++-- src/main.css | 3 ++- src/main.js | 7 ++++--- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 8344a63..41652c6 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,8 @@ ### 7. 종료 -- 사용자가 게임을 완전히 종료할 수 있는 옵션을 제공한다. +- 사용자가 게임을 종료할 수 있는 옵션을 제공한다. +- 게임을 종료한다는 것은, 창을 닫는다는 의미로 해석한다. - 프로그래밍 요구 사항에 따라, 프로그램 종료 시 process.exit() 를 호출하지 않는다. ### 8. 추가 기능 구현 @@ -58,4 +59,6 @@ ### 과제 진행 소감 -- 이번 프로젝트는 개인 프로젝트였지만, GitHub을 통해 코드를 관리하면서 버전 관리의 중요성과 협업 시 사용될 수 있는 여러 도구와 기법에 대해 배울 수 있었습니다. \ No newline at end of file +- 이번 개인 프로젝트를 통해 GitHub으로 코드를 관리하며 버전 관리의 중요성과 협업에 필요한 기법을 배울 수 있었습니다. 🤓📚 +- 또한, 구현할 목록을 단계별로 작성하고 이를 하나씩 완성해 가면서 체계적으로 학습할 수 있었습니다. 📝🛠 +- 게임을 종료하는 방식으로 창을 닫는 기능을 구상했었지만, 정책상의 이유로 window.close() 함수를 사용할 수 없었습니다. 그래서 대신 화면의 요소들을 보이지 않게 하여 게임이 종료된 것처럼 처리하였습니다. 이와 같은 방식으로 종료의 의미를 어떻게 해석할 수 있는지 궁금합니다. ❓🚪 \ No newline at end of file diff --git a/src/main.css b/src/main.css index b73ad05..6d728e8 100644 --- a/src/main.css +++ b/src/main.css @@ -2,5 +2,6 @@ body { font-family: Arial, sans-serif; margin: 0; padding: 0; - text-align: center; + background-color: #f0f0f0; } + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 6150660..32e7290 100644 --- a/src/main.js +++ b/src/main.js @@ -25,10 +25,10 @@ startGame(); // 버튼 ---------------------------------------------------------------------------------- document.addEventListener("DOMContentLoaded", () => { - const button = document.querySelector(".inputButton"); // 확인 버튼 + const inputButton = document.querySelector(".inputButton"); // 확인 버튼 const restartButton = document.querySelector(".restartButton"); // 재시작 버튼 - button.addEventListener("click", checkInput); // 확인 버튼 클릭 이벤트 + inputButton.addEventListener("click", checkInput); // 확인 버튼 클릭 이벤트 restartButton.addEventListener("click", restartGame); // 재시작 버튼 클릭 이벤트 }); @@ -52,6 +52,7 @@ function displayResult(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); @@ -107,6 +108,6 @@ document.addEventListener("DOMContentLoaded", () => { const exitButton = document.querySelector(".exitButton"); exitButton.addEventListener("click", function () { document.getElementById("app").style.display = "none"; // 인터페이스 숨기기 - alert("게임이 종료되었습니다. 창을 닫아주세요."); + alert("게임을 종료합니다. 창을 닫아주세요."); }); }); From ded091ed4d0ee1046fa04ea450dc303ee9d29ca8 Mon Sep 17 00:00:00 2001 From: yuni Date: Mon, 6 May 2024 12:54:37 +0900 Subject: [PATCH 12/12] =?UTF-8?q?docs=20:=20=EA=B3=BC=EC=A0=9C=20=EC=A7=84?= =?UTF-8?q?=ED=96=89=20=EC=86=8C=EA=B0=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 과제 진행 소감을 수정한다. --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 41652c6..834d0e5 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,7 @@ ### 과제 진행 소감 -- 이번 개인 프로젝트를 통해 GitHub으로 코드를 관리하며 버전 관리의 중요성과 협업에 필요한 기법을 배울 수 있었습니다. 🤓📚 -- 또한, 구현할 목록을 단계별로 작성하고 이를 하나씩 완성해 가면서 체계적으로 학습할 수 있었습니다. 📝🛠 -- 게임을 종료하는 방식으로 창을 닫는 기능을 구상했었지만, 정책상의 이유로 window.close() 함수를 사용할 수 없었습니다. 그래서 대신 화면의 요소들을 보이지 않게 하여 게임이 종료된 것처럼 처리하였습니다. 이와 같은 방식으로 종료의 의미를 어떻게 해석할 수 있는지 궁금합니다. ❓🚪 \ No newline at end of file +- 이번 개인 프로젝트를 통해 GitHub에서 버전 관리를 하고 처음으로 포크를 진행하면서 협업에 필요한 여러 기법을 배울 수 있었습니다. 🤓📚 특히, 프로그래밍 요구사항을 이해하면서 나중에 개발 협업 시 공통적으로 합의해야 할 사항들에 대해 학습할 수 있었습니다. +- 또한, 구현할 목록을 단계별로 작성하고 이를 하나씩 완성해 가면서 체계적으로 학습할 수 있었습니다. 이전에 미니 프로젝트를 진행하면서 요구사항을 제대로 정의하지 않았던 경험을 되돌아보며 반성하게 되었습니다. 📝🛠 JavaScript를 활용하여 실제로 적용해본 경험은 학습에 많은 도움이 되었으며, 부족한 부분은 블로그와 문서를 참고하여 보완했습니다. +- 게임을 종료하는 방식으로 창을 닫으려 했으나 정책상의 이유로 window.close() 함수를 사용할 수 없었습니다. 대신, 화면의 요소들을 보이지 않게 하여 게임이 종료된 것처럼 처리하였습니다. 이와 같은 방식으로 종료의 의미를 어떻게 해석할 수 있는지 궁금합니다. ❓🚪 +- CSS도 추가로 구현하고 싶었지만, 시간 관리가 부족하여 진행하지 못한 것이 아쉽습니다. ⏳🎨 \ No newline at end of file