From b4e4505235e8b32ddbb4c744ecf947d9ad406b72 Mon Sep 17 00:00:00 2001 From: dsrud1218 Date: Mon, 6 May 2024 10:24:20 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 38 +++++++++++++++++++++++++++++++++++++- index.html | 17 ++++++++++++++--- src/checkinput.js | 0 src/compareN.js | 22 ++++++++++++++++++++++ src/main.js | 3 +++ src/randomnums.js | 15 +++++++++++++++ src/restart.js | 15 +++++++++++++++ src/result.js | 2 ++ 8 files changed, 108 insertions(+), 4 deletions(-) create mode 100644 src/checkinput.js create mode 100644 src/compareN.js create mode 100644 src/randomnums.js create mode 100644 src/restart.js create mode 100644 src/result.js diff --git a/README.md b/README.md index 8b2833c..2222084 100644 --- a/README.md +++ b/README.md @@ -1 +1,37 @@ -# javascript-baseball-precourse \ No newline at end of file +# javascript-baseball-precourse + +##기능 요구사항 +1~9까지 서로 다른 수로 이루어진 3자리의 수를 맞추는 게임.\ ++ 같은 수가 같은 자리에 있으면 스트라이크, 다른 자리에 있으면 볼, 같은 수가 전혀 없으면 낫싱이란 힌트를 얻고, 그 힌트를 이용해서 먼저 상대방(컴퓨터)의 수를 맞추면 승리한다. + ++ ``` ++ e.g. ++ 상대방(컴퓨터)의 수가 425일 때, ++ - 123을 제시한 경우:1스트라이크 ++ - 456을 제시한 경우: 1볼 1스트라이크 ++ - 789를 제시한 경우: 낫싱 ++ ``` + ++ 위 숫자 야구 게임에서 상대방의 역할을 컴퓨터가 한다.\ +1. 컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다.\ +2. 게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력.\ +3. 컴퓨터는 입력한 숫자에 대한 결과를 출력한다. ++ 이 같은 과정을 반복해 컴퓨터가 선택한 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼이 표시된다.\ ++ 게임을 종료한 후 게임을 다시 시작하거나 완전히 종료할 수 있다. ++ 사용자가 잘못된 값을 입력한 경우 `alert()`으로 에러 메시지를 출력 후 그 부분부터 다시 입력을 받는다. + +###HTML +전체적인 화면 만들기 + +### JS +- 랜덤숫자생성 +- 비교하고 결과 출력 +- 재시작버튼과 메세지 및 재시작관련 구현 +- 숫자 받기 + +### 추가요구사항 ++ Node.js 18.17.1 버전에서 실행 가능해야 한다. ++ 'package.json' 파일은 변경할 수 없으며, 제공된 라이브러리와 스타일 라이브러리 이외의 외부 라이브러리는 사용하지 않는다. ++ 프로그램 종료 시 process.exit() 를 호출하지 않는다. ++ 프로그래밍 요구 사항에서 달리 명시하지 않는 한 파일, 패키지 등의 이름을 바꾸거나 이동하지 않는다. + diff --git a/index.html b/index.html index b021b5c..4970c49 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,23 @@ - + - + javascript_baseball -
+
+
+

⚾숫자 야구 게임

+
+ 1~9까지의 숫자를 중복없이 3개 입력해주세요.
+ 올바른 예) 139
틀린 예) 122
+
+
+ + +
+ diff --git a/src/checkinput.js b/src/checkinput.js new file mode 100644 index 0000000..e69de29 diff --git a/src/compareN.js b/src/compareN.js new file mode 100644 index 0000000..82735dc --- /dev/null +++ b/src/compareN.js @@ -0,0 +1,22 @@ +function strikeball (user,useridx, computerN,strike,ball) { + computerN.forEach((computer,idx) => { + if(user === computer && useridx === idx) //===를 사용해 비교 + strike[0]++; + + else if (user === computer) + ball[0]++; + }) +} + + + +function comparenum (userN, computerN) { + let strike = [0]; + let ball =[0]; + + user.forEach((user,useridx) => { + strikeball(user,useridx,comparenum,strike,ball) + }) + return {strike, ball}; +} + diff --git a/src/main.js b/src/main.js index e69de29..cc776c4 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,3 @@ +import randomnums from "./randomnums"; +import compareN from "./compareN"; + diff --git a/src/randomnums.js b/src/randomnums.js new file mode 100644 index 0000000..6f9b538 --- /dev/null +++ b/src/randomnums.js @@ -0,0 +1,15 @@ +//랜덤숫자 +//let list; +//let answer; +let result=""; + +function generatenum(){ + let numbers = [1,2,3,4,5,6,7,8,9]; + + for(let i=0;i<3;i++){ + const idx = Math.floor(Math.random()*numbers.length); + result += numbers[idx]; + numbers.splice(idx,1); + } + return result; +} \ No newline at end of file diff --git a/src/restart.js b/src/restart.js new file mode 100644 index 0000000..314d4b0 --- /dev/null +++ b/src/restart.js @@ -0,0 +1,15 @@ +import randomnums from "./randomnums"; + +//재시작버튼 보이기 +function showRestartButton() { + const restartbuttonshow = document.getElementById("restartButton"); + restartbuttonshow.style.display = "block"; +}; + +//재시작문구 +function showReplayMessage() { + const replaymessage = document.getElementById("restartMessage"); + replaymessage.style.display="block"; + +}; + diff --git a/src/result.js b/src/result.js new file mode 100644 index 0000000..f380b5d --- /dev/null +++ b/src/result.js @@ -0,0 +1,2 @@ +//결과 반환하도록 따로 작성해보기 +function result (strike, ball, foo) \ No newline at end of file From e4fc1783e5c282c413b9e5adb0261fdc9bbcf4a1 Mon Sep 17 00:00:00 2001 From: dsrud1218 Date: Mon, 6 May 2024 11:11:43 +0900 Subject: [PATCH 02/10] =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- index.html | 16 ++++++++-------- src/checkinput.js | 24 ++++++++++++++++++++++++ src/compareN.js | 43 ++++++++++++++++++++++++++----------------- src/main.js | 34 ++++++++++++++++++++++++++++++++-- src/randomnums.js | 15 ++++++--------- src/replay.js | 7 +++++++ src/restart.js | 15 --------------- src/result.js | 2 -- 9 files changed, 104 insertions(+), 54 deletions(-) create mode 100644 src/replay.js delete mode 100644 src/restart.js delete mode 100644 src/result.js diff --git a/README.md b/README.md index 2222084..9d4ea86 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ - 랜덤숫자생성 - 비교하고 결과 출력 - 재시작버튼과 메세지 및 재시작관련 구현 -- 숫자 받기 +- 숫자 ### 추가요구사항 + Node.js 18.17.1 버전에서 실행 가능해야 한다. diff --git a/index.html b/index.html index 4970c49..94a0d53 100644 --- a/index.html +++ b/index.html @@ -10,14 +10,14 @@

⚾숫자 야구 게임

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

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

+

올바른 예)139

+

틀린 예)122

+ + +

📝결과

+

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

+ diff --git a/src/checkinput.js b/src/checkinput.js index e69de29..12d4228 100644 --- a/src/checkinput.js +++ b/src/checkinput.js @@ -0,0 +1,24 @@ +import checkStrikeandBall from "./compareN"; +export default userArray; + +//input 확인 +function checkN() { + + if(GameOver) { + alert("게임이 종료되었습니다. 다시시작해주세요."); + return; + } + + let UserInput = document.getElementById("UserInput").value; + + if (!Validput(UserInput)) { + alert("올바른 3자리 숫자를 입력해주세요"); + return; + } + let userArray = UserInput.split("").map(Number); + + + + checkStrikeandBall(userArray); + +} \ No newline at end of file diff --git a/src/compareN.js b/src/compareN.js index 82735dc..3fab91a 100644 --- a/src/compareN.js +++ b/src/compareN.js @@ -1,22 +1,31 @@ -function strikeball (user,useridx, computerN,strike,ball) { - computerN.forEach((computer,idx) => { - if(user === computer && useridx === idx) //===를 사용해 비교 - strike[0]++; - - else if (user === computer) - ball[0]++; - }) -} - +import answer from "./randomnums"; +import userArray from "./checkinput"; +//strike, ball 확인 및 출력 -function comparenum (userN, computerN) { - let strike = [0]; - let ball =[0]; +function checkStrikeandBall(userArray) { + let strikes =0; + let balls =0; - user.forEach((user,useridx) => { - strikeball(user,useridx,comparenum,strike,ball) - }) - return {strike, ball}; + for(let i=0;i<3;i++) { + if(userArray[i] === answer[i]) { + strikes++; + } + else if(answer.includes(userArray[i])) { + balls++; + } + } + + let output = document.getElementById("output"); + if(strikes === 3) { + out.innerHTML = "정답을 맞추셨습니다~!"; + GameOver = true; + } + else if(strikes === 0 && balls === 0) { + out.innerHTML = "낫싱"; } + else{ + out.innerHTML = `${strikes} 스트라이크, ${balls} 볼`; + } } + diff --git a/src/main.js b/src/main.js index cc776c4..e7404f1 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,33 @@ -import randomnums from "./randomnums"; -import compareN from "./compareN"; +import randomNum from "./randomnums"; +import checkN from "./checkinput"; +import checkinput from "./checkinput"; +import replay from "./replay"; + +let answer = randomNum(); +let GemeOver =false; + +//입력값이 유효한지 +function isValidnum(input){ + //세 자리 숫자확인 + if (!/^\d{3}$/.test(input)) { + return false; +} + // 입력이 숫자로 이루어져 있는지 확인 + for (let i = 0; i < input.length; i++) { + if (isNaN(parseInt(input[i]))) { + return GemeOver; + } + } + + return true; +} + +checkN(input) + + + + + +window.checkN=checkN; +window.restart=restart; \ No newline at end of file diff --git a/src/randomnums.js b/src/randomnums.js index 6f9b538..72cc0ce 100644 --- a/src/randomnums.js +++ b/src/randomnums.js @@ -1,15 +1,12 @@ //랜덤숫자 -//let list; -//let answer; -let result=""; - -function generatenum(){ - let numbers = [1,2,3,4,5,6,7,8,9]; +function randomNum(){ + let nums = [1,2,3,4,5,6,7,8,9]; + let array=[]; for(let i=0;i<3;i++){ - const idx = Math.floor(Math.random()*numbers.length); - result += numbers[idx]; - numbers.splice(idx,1); + let index = Math.floor(Math.random()*nums.length); + array.push(nums[index]); + numbers.splice(idx,1) } return result; } \ No newline at end of file diff --git a/src/replay.js b/src/replay.js new file mode 100644 index 0000000..1ba2282 --- /dev/null +++ b/src/replay.js @@ -0,0 +1,7 @@ +import randomnums from "./randomnums"; + +function replay() { + answer = randomnums(); + document.getElementById("output").innerHTML = ""; + GameOver =false; +} \ No newline at end of file diff --git a/src/restart.js b/src/restart.js deleted file mode 100644 index 314d4b0..0000000 --- a/src/restart.js +++ /dev/null @@ -1,15 +0,0 @@ -import randomnums from "./randomnums"; - -//재시작버튼 보이기 -function showRestartButton() { - const restartbuttonshow = document.getElementById("restartButton"); - restartbuttonshow.style.display = "block"; -}; - -//재시작문구 -function showReplayMessage() { - const replaymessage = document.getElementById("restartMessage"); - replaymessage.style.display="block"; - -}; - diff --git a/src/result.js b/src/result.js deleted file mode 100644 index f380b5d..0000000 --- a/src/result.js +++ /dev/null @@ -1,2 +0,0 @@ -//결과 반환하도록 따로 작성해보기 -function result (strike, ball, foo) \ No newline at end of file From 280ebd5d5454a1a153dce06563e75891e4adedef Mon Sep 17 00:00:00 2001 From: dsrud1218 Date: Mon, 6 May 2024 12:13:41 +0900 Subject: [PATCH 03/10] =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/checkinput.js | 47 ++++++++++++++++------------ src/compareN.js | 31 ------------------- src/main.js | 79 ++++++++++++++++++++++++++++++++++------------- src/randomnums.js | 19 ++++++------ src/replay.js | 16 +++++++--- 5 files changed, 106 insertions(+), 86 deletions(-) delete mode 100644 src/compareN.js diff --git a/src/checkinput.js b/src/checkinput.js index 12d4228..694633f 100644 --- a/src/checkinput.js +++ b/src/checkinput.js @@ -1,24 +1,33 @@ -import checkStrikeandBall from "./compareN"; -export default userArray; -//input 확인 -function checkN() { - - if(GameOver) { - alert("게임이 종료되었습니다. 다시시작해주세요."); - return; +// 사용자가 입력한 숫자 확인 +function checkNumbers() { + const input = document.getElementById("input").value; // 입력값 가져오기 + if (new Set(input).size !== 3 || input.includes("0") || input.length !== 3) { + alert("잘못된 입력입니다. 중복없이 1~9까지의 숫자를 입력해주세요."); + return; } - - let UserInput = document.getElementById("UserInput").value; - - if (!Validput(UserInput)) { - alert("올바른 3자리 숫자를 입력해주세요"); - return; - } - let userArray = UserInput.split("").map(Number); + + let strikes = 0; + let balls = 0; + const inputNumbers = input.split(""); + answer.forEach((number, index) => { + if (number === inputNumbers[index]) { + strikes++; + } else if (inputNumbers.includes(number)) { + balls++; + } + }); - + console.log(strikes, balls); - checkStrikeandBall(userArray); - + if (strikes === 3) { + document.getElementById("result").innerText = "정답을 맞추셨습니다"; + // replay(); // 게임 재시작 + } else if (strikes === 0 && balls === 0) { + document.getElementById("result").innerText = "낫싱"; + } else { + document.getElementById( + "result" + ).innerText = `${balls}볼 ${strikes}스트라이크`; + } } \ No newline at end of file diff --git a/src/compareN.js b/src/compareN.js deleted file mode 100644 index 3fab91a..0000000 --- a/src/compareN.js +++ /dev/null @@ -1,31 +0,0 @@ -import answer from "./randomnums"; -import userArray from "./checkinput"; - -//strike, ball 확인 및 출력 - -function checkStrikeandBall(userArray) { - let strikes =0; - let balls =0; - - for(let i=0;i<3;i++) { - if(userArray[i] === answer[i]) { - strikes++; - } - else if(answer.includes(userArray[i])) { - balls++; - } - } - - let output = document.getElementById("output"); - if(strikes === 3) { - out.innerHTML = "정답을 맞추셨습니다~!"; - GameOver = true; - } - else if(strikes === 0 && balls === 0) { - out.innerHTML = "낫싱"; } - else{ - out.innerHTML = `${strikes} 스트라이크, ${balls} 볼`; - } -} - - diff --git a/src/main.js b/src/main.js index e7404f1..0c63da9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,33 +1,70 @@ -import randomNum from "./randomnums"; +import RandomNumbers from "./randomnums"; import checkN from "./checkinput"; -import checkinput from "./checkinput"; +import checkNumbers from "./checkinput"; import replay from "./replay"; -let answer = randomNum(); -let GemeOver =false; - -//입력값이 유효한지 -function isValidnum(input){ - //세 자리 숫자확인 - if (!/^\d{3}$/.test(input)) { - return false; -} - // 입력이 숫자로 이루어져 있는지 확인 - for (let i = 0; i < input.length; i++) { - if (isNaN(parseInt(input[i]))) { - return GemeOver; - } +let answer = []; //정답 저장 +// 1~9까지 랜덤 숫자 3개를 선택하는 함수 +function RandomNumbers() { + const numbers = []; + while (numbers.length < 3) { + const n = Math.floor(Math.random() * 9) + 1; + if (!numbers.includes(n)) { + numbers.push(n); + } } + return numbers.join(""); // 숫자 배열을 문자열로 반환 + } + + // 사용자가 입력한 숫자 확인 + function checkNumbers() { + const input = document.getElementById("input").value; // 입력값 가져오기 + if (new Set(input).size !== 3 || input.includes("0") || input.length !== 3) { + alert("잘못된 입력입니다. 중복없이 1~9까지의 숫자를 입력해주세요."); + return; + } + + let strikes = 0; + let balls = 0; + const inputNumbers = input.split(""); + answer.forEach((number, index) => { + if (number === inputNumbers[index]) { + strikes++; + } else if (inputNumbers.includes(number)) { + balls++; + } + }); - return true; -} - -checkN(input) - + console.log(strikes, balls); + if (strikes === 3) { + document.getElementById("result").innerText = "정답을 맞추셨습니다"; + // replay(); // 게임 재시작 + } else if (strikes === 0 && balls === 0) { + document.getElementById("result").innerText = "낫싱"; + } else { + document.getElementById( + "result" + ).innerText = `${balls}볼 ${strikes}스트라이크`; + } +} +// 게임 재시작 +function replay() { + answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 + document.getElementById("input").value = ""; // 입력 필드 초기화 + document.getElementById("answer").innerText = answer; + } + + // 게임 초기화 및 시작 + window.onload = function () { + answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 + document.getElementById("answer").innerText = answer; + }; + +//html 함수 참조하도록 객체전달합니다 window.checkN=checkN; window.restart=restart; \ No newline at end of file diff --git a/src/randomnums.js b/src/randomnums.js index 72cc0ce..efffb36 100644 --- a/src/randomnums.js +++ b/src/randomnums.js @@ -1,12 +1,11 @@ //랜덤숫자 -function randomNum(){ - let nums = [1,2,3,4,5,6,7,8,9]; - let array=[]; - - for(let i=0;i<3;i++){ - let index = Math.floor(Math.random()*nums.length); - array.push(nums[index]); - numbers.splice(idx,1) +function RandomNumbers() { + const numbers = []; + while (numbers.length < 3) { + const n = Math.floor(Math.random() * 9) + 1; + if (!numbers.includes(n)) { + numbers.push(n); + } } - return result; -} \ No newline at end of file + return numbers.join(""); // 숫자 배열을 문자열로 반환 + } \ No newline at end of file diff --git a/src/replay.js b/src/replay.js index 1ba2282..8dc3405 100644 --- a/src/replay.js +++ b/src/replay.js @@ -1,7 +1,13 @@ -import randomnums from "./randomnums"; +import answer from "./checkinput"; function replay() { - answer = randomnums(); - document.getElementById("output").innerHTML = ""; - GameOver =false; -} \ No newline at end of file + answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 + document.getElementById("input").value = ""; // 입력 필드 초기화 + document.getElementById("answer").innerText = answer; + } + + // 게임 초기화 및 시작 + window.onload = function () { + answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 + document.getElementById("answer").innerText = answer; + }; \ No newline at end of file From 3c6137dcffb4d4ef27a7a8d804dfe21d4d3d2df5 Mon Sep 17 00:00:00 2001 From: dmsrud1218 Date: Mon, 6 May 2024 19:00:08 +0900 Subject: [PATCH 04/10] finish eunkyung --- src/main.js | 90 ++++++++++++++++++++++++++--------------------------- 1 file changed, 44 insertions(+), 46 deletions(-) diff --git a/src/main.js b/src/main.js index 0c63da9..acf7c43 100644 --- a/src/main.js +++ b/src/main.js @@ -1,44 +1,43 @@ -import RandomNumbers from "./randomnums"; -import checkN from "./checkinput"; -import checkNumbers from "./checkinput"; -import replay from "./replay"; +let answer = []; // 정답을 저장할 배열 - -let answer = []; //정답 저장 // 1~9까지 랜덤 숫자 3개를 선택하는 함수 -function RandomNumbers() { - const numbers = []; - while (numbers.length < 3) { - const n = Math.floor(Math.random() * 9) + 1; - if (!numbers.includes(n)) { - numbers.push(n); - } +function generateRandomNumbers() { + const numbers = []; + while (numbers.length < 3) { + const n = Math.floor(Math.random() * 9) + 1; + if (!numbers.includes(n)) { + numbers.push(n); } - return numbers.join(""); // 숫자 배열을 문자열로 반환 + } + return numbers.join(""); // 숫자 배열을 문자열로 반환 +} + + +//input 확인 +function checkNumbers() { + const input = document.getElementById("input").value; + if (new Set(input).size !== 3 || input.includes("0") || input.length !== 3) { + alert("잘못된 입력입니다. 중복없이 1~9까지의 숫자를 입력해주세요."); + return; } - // 사용자가 입력한 숫자 확인 - function checkNumbers() { - const input = document.getElementById("input").value; // 입력값 가져오기 - if (new Set(input).size !== 3 || input.includes("0") || input.length !== 3) { - alert("잘못된 입력입니다. 중복없이 1~9까지의 숫자를 입력해주세요."); - return; + let strikes = 0; + let balls = 0; + const inputNumbers = input.split(""); + answer.forEach((number, index) => { + if (number === inputNumbers[index]) { + strikes++; + + } else if (inputNumbers.includes(number)) { + balls++; + } - - let strikes = 0; - let balls = 0; - const inputNumbers = input.split(""); - answer.forEach((number, index) => { - if (number === inputNumbers[index]) { - strikes++; - } else if (inputNumbers.includes(number)) { - balls++; - } - }); + }); - console.log(strikes, balls); + + console.log(strikes, balls); - if (strikes === 3) { + if (strikes === 3) { document.getElementById("result").innerText = "정답을 맞추셨습니다"; // replay(); // 게임 재시작 } else if (strikes === 0 && balls === 0) { @@ -50,21 +49,20 @@ function RandomNumbers() { } } + // 게임 재시작 function replay() { - answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 - document.getElementById("input").value = ""; // 입력 필드 초기화 - document.getElementById("answer").innerText = answer; - } - - // 게임 초기화 및 시작 - window.onload = function () { - answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 - document.getElementById("answer").innerText = answer; - }; + answer = generateRandomNumbers().split(""); // 정답 생성 및 배열로 변환 + document.getElementById("input").value = ""; // 입력 필드 초기화 +} +// 게임 초기화 및 시작 +window.onload = function () { + answer = generateRandomNumbers().split(""); // 정답 생성 및 배열로 변환 + +}; -//html 함수 참조하도록 객체전달합니다 -window.checkN=checkN; -window.restart=restart; \ No newline at end of file +// HTML 내에서 함수를 참조할 수 있도록 window 객체에 할당 +window.checkNumbers = checkNumbers; +window.replay = replay; \ No newline at end of file From 7a6ff3555f07c38531f51a4af75f57796e0e396d Mon Sep 17 00:00:00 2001 From: dsrud1218 Date: Fri, 10 May 2024 10:46:16 +0900 Subject: [PATCH 05/10] jeat(js) --- index.html | 21 +++++++++++---------- src/checkinput.js | 33 --------------------------------- src/main.js | 35 ++++++++++++++++++++--------------- src/randomnums.js | 11 ----------- src/replay.js | 13 ------------- 5 files changed, 31 insertions(+), 82 deletions(-) delete mode 100644 src/checkinput.js delete mode 100644 src/randomnums.js delete mode 100644 src/replay.js diff --git a/index.html b/index.html index 94a0d53..5936da4 100644 --- a/index.html +++ b/index.html @@ -7,17 +7,18 @@
+

⚾숫자 야구 게임

+

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

+

올바른 예) 139

+

틀린 예)122

+ + +

📝결과

+

+

+

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

+
-

⚾숫자 야구 게임

-

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

-

올바른 예)139

-

틀린 예)122

- - -

📝결과

-

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

- - diff --git a/src/checkinput.js b/src/checkinput.js deleted file mode 100644 index 694633f..0000000 --- a/src/checkinput.js +++ /dev/null @@ -1,33 +0,0 @@ - -// 사용자가 입력한 숫자 확인 -function checkNumbers() { - const input = document.getElementById("input").value; // 입력값 가져오기 - if (new Set(input).size !== 3 || input.includes("0") || input.length !== 3) { - alert("잘못된 입력입니다. 중복없이 1~9까지의 숫자를 입력해주세요."); - return; - } - - let strikes = 0; - let balls = 0; - const inputNumbers = input.split(""); - answer.forEach((number, index) => { - if (number === inputNumbers[index]) { - strikes++; - } else if (inputNumbers.includes(number)) { - balls++; - } - }); - - console.log(strikes, balls); - - if (strikes === 3) { - document.getElementById("result").innerText = "정답을 맞추셨습니다"; - // replay(); // 게임 재시작 - } else if (strikes === 0 && balls === 0) { - document.getElementById("result").innerText = "낫싱"; - } else { - document.getElementById( - "result" - ).innerText = `${balls}볼 ${strikes}스트라이크`; - } -} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 0c63da9..9422d42 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,8 @@ -import RandomNumbers from "./randomnums"; +/*import RandomNumbers from "./randomnums"; import checkN from "./checkinput"; import checkNumbers from "./checkinput"; import replay from "./replay"; - +*/ let answer = []; //정답 저장 // 1~9까지 랜덤 숫자 3개를 선택하는 함수 @@ -22,6 +22,7 @@ function RandomNumbers() { const input = document.getElementById("input").value; // 입력값 가져오기 if (new Set(input).size !== 3 || input.includes("0") || input.length !== 3) { alert("잘못된 입력입니다. 중복없이 1~9까지의 숫자를 입력해주세요."); + input.value =""; return; } @@ -36,35 +37,39 @@ function RandomNumbers() { } }); - console.log(strikes, balls); + //console.log(strikes, balls); if (strikes === 3) { document.getElementById("result").innerText = "정답을 맞추셨습니다"; - // replay(); // 게임 재시작 + document.getElementById("replayButton").style.display = "block"; //재시작 버튼 표시 추가 + document.getElementById("replayMessage").innerText = "게임을 새로 시작하시겠습니까?"; //재시작 멘트 표시 추가 + } else if (strikes === 0 && balls === 0) { document.getElementById("result").innerText = "낫싱"; } else { - document.getElementById( - "result" - ).innerText = `${balls}볼 ${strikes}스트라이크`; + document.getElementById("result").innerText = `${balls}볼 ${strikes}스트라이크`; } } + + // 게임 재시작 -function replay() { - answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 - document.getElementById("input").value = ""; // 입력 필드 초기화 - document.getElementById("answer").innerText = answer; - } +/*function replay() { + answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 + document.getElementById("input").value = ""; // 입력 필드 초기화 + + //document.getElementById("answer").innerText = answer; 정답 체크용 +}*/ // 게임 초기화 및 시작 window.onload = function () { answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 - document.getElementById("answer").innerText = answer; + document.getElementById("replayButton").style.display="none"; // 시작할때는 재시작버튼 안보이도록숨김 + document.getElementById("replayMessage").innerText=""; //재시작 멘트 숨김 }; //html 함수 참조하도록 객체전달합니다 -window.checkN=checkN; -window.restart=restart; \ No newline at end of file +window.checkNumbers=checkNumbers; +window.replay=replay; \ No newline at end of file diff --git a/src/randomnums.js b/src/randomnums.js deleted file mode 100644 index efffb36..0000000 --- a/src/randomnums.js +++ /dev/null @@ -1,11 +0,0 @@ -//랜덤숫자 -function RandomNumbers() { - const numbers = []; - while (numbers.length < 3) { - const n = Math.floor(Math.random() * 9) + 1; - if (!numbers.includes(n)) { - numbers.push(n); - } - } - return numbers.join(""); // 숫자 배열을 문자열로 반환 - } \ No newline at end of file diff --git a/src/replay.js b/src/replay.js deleted file mode 100644 index 8dc3405..0000000 --- a/src/replay.js +++ /dev/null @@ -1,13 +0,0 @@ -import answer from "./checkinput"; - -function replay() { - answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 - document.getElementById("input").value = ""; // 입력 필드 초기화 - document.getElementById("answer").innerText = answer; - } - - // 게임 초기화 및 시작 - window.onload = function () { - answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 - document.getElementById("answer").innerText = answer; - }; \ No newline at end of file From 97ca04a3415da54d73254f9e93b712899c1d22bb Mon Sep 17 00:00:00 2001 From: dsrud1218 Date: Fri, 10 May 2024 20:31:51 +0900 Subject: [PATCH 06/10] feat(js) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9d4ea86..adec191 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ + 사용자가 잘못된 값을 입력한 경우 `alert()`으로 에러 메시지를 출력 후 그 부분부터 다시 입력을 받는다. ###HTML -전체적인 화면 만들기 +전체적인 화면 만들기 (메세지와 버튼 등) ### JS - 랜덤숫자생성 From de893dcf8ad78a138d42276d6c00270cee709d14 Mon Sep 17 00:00:00 2001 From: dsrud1218 Date: Fri, 10 May 2024 20:54:17 +0900 Subject: [PATCH 07/10] =?UTF-8?q?=EC=9A=94=EA=B5=AC=EC=82=AC=ED=95=ADreadm?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index adec191..2202353 100644 --- a/README.md +++ b/README.md @@ -12,9 +12,9 @@ + - 789를 제시한 경우: 낫싱 + ``` -+ 위 숫자 야구 게임에서 상대방의 역할을 컴퓨터가 한다.\ ++ 숫자 야구 게임에서 상대방의 역할을 컴퓨터가 한다.\ 1. 컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다.\ -2. 게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력.\ +2. 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력.\ 3. 컴퓨터는 입력한 숫자에 대한 결과를 출력한다. + 이 같은 과정을 반복해 컴퓨터가 선택한 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼이 표시된다.\ + 게임을 종료한 후 게임을 다시 시작하거나 완전히 종료할 수 있다. From 8682125e355d50356781e6408baad8d6a6cde897 Mon Sep 17 00:00:00 2001 From: dsrud1218 Date: Fri, 10 May 2024 23:21:59 +0900 Subject: [PATCH 08/10] =?UTF-8?q?=EB=AA=A8=EB=93=88=ED=99=94.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 26 +++++++------- src/checkNumbers.js | 31 ++++++++++++++++ src/main.js | 84 +++++++------------------------------------- src/randomNumbers.js | 10 ++++++ 4 files changed, 66 insertions(+), 85 deletions(-) create mode 100644 src/checkNumbers.js create mode 100644 src/randomNumbers.js diff --git a/index.html b/index.html index 5936da4..05fe2cf 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,24 @@ - + - javascript_baseball +

⚾숫자 야구 게임

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

-

올바른 예) 139

-

틀린 예)122

- - -

📝결과

-

-

-

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

- -
+

올바른 예)139

+

틀린 예)122

+ + +

📝결과

+

+

+

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

+ + - + \ No newline at end of file diff --git a/src/checkNumbers.js b/src/checkNumbers.js new file mode 100644 index 0000000..6115e8a --- /dev/null +++ b/src/checkNumbers.js @@ -0,0 +1,31 @@ +export default function checkNumbers(answer) { + const input = document.getElementById("input").value; // 입력값 가져오기 + if (new Set(input).size !== 3 || input.includes("0") || input.length !== 3) { + alert("잘못된 입력입니다. 중복없이 1~9까지의 숫자를 입력해주세요."); + document.getElementById("input").value = ""; // 입력 필드 초기화 + return; + } + + let strikes = 0; + let balls = 0; + const inputNumbers = input.split(""); + + answer.forEach((number, index) => { + if (number === inputNumbers[index]) { + strikes++; + } else if (inputNumbers.includes(number)) { + balls++; + } + }); + + if (strikes === 3) { + document.getElementById("result").innerText = "정답을 맞추셨습니다"; + document.getElementById("replayButton").style.display = "block"; //재시작 버튼 표시 추가 + document.getElementById("replayMessage").innerText = "게임을 새로 시작하시겠습니까?"; //재시작 멘트 표시 추가 + + } else if (strikes === 0 && balls === 0) { + document.getElementById("result").innerText = "낫싱"; + } else { + document.getElementById("result").innerText = `${balls}볼 ${strikes}스트라이크`; + } +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 9422d42..db13901 100644 --- a/src/main.js +++ b/src/main.js @@ -1,75 +1,15 @@ -/*import RandomNumbers from "./randomnums"; -import checkN from "./checkinput"; -import checkNumbers from "./checkinput"; -import replay from "./replay"; -*/ +import randomNumbers from "./randomNumbers.js"; +import checkNumbers from "./checkNumbers.js"; -let answer = []; //정답 저장 -// 1~9까지 랜덤 숫자 3개를 선택하는 함수 -function RandomNumbers() { - const numbers = []; - while (numbers.length < 3) { - const n = Math.floor(Math.random() * 9) + 1; - if (!numbers.includes(n)) { - numbers.push(n); - } - } - return numbers.join(""); // 숫자 배열을 문자열로 반환 - } - - // 사용자가 입력한 숫자 확인 - function checkNumbers() { - const input = document.getElementById("input").value; // 입력값 가져오기 - if (new Set(input).size !== 3 || input.includes("0") || input.length !== 3) { - alert("잘못된 입력입니다. 중복없이 1~9까지의 숫자를 입력해주세요."); - input.value =""; - return; - } - - let strikes = 0; - let balls = 0; - const inputNumbers = input.split(""); - answer.forEach((number, index) => { - if (number === inputNumbers[index]) { - strikes++; - } else if (inputNumbers.includes(number)) { - balls++; - } - }); - - //console.log(strikes, balls); - - if (strikes === 3) { - document.getElementById("result").innerText = "정답을 맞추셨습니다"; - document.getElementById("replayButton").style.display = "block"; //재시작 버튼 표시 추가 - document.getElementById("replayMessage").innerText = "게임을 새로 시작하시겠습니까?"; //재시작 멘트 표시 추가 - - } else if (strikes === 0 && balls === 0) { - document.getElementById("result").innerText = "낫싱"; - } else { - document.getElementById("result").innerText = `${balls}볼 ${strikes}스트라이크`; - } -} +let answer = []; +window.onload = function () { + answer = randomNumbers().split(""); // 정답 생성 및 배열로 변환 + document.getElementById("replayButton").style.display = "none"; // 시작할때는 재시작버튼 안보이도록 숨김 + document.getElementById("replayMessage").innerText = ""; //재시작 멘트 숨김 - -// 게임 재시작 -/*function replay() { - answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 - document.getElementById("input").value = ""; // 입력 필드 초기화 - - //document.getElementById("answer").innerText = answer; 정답 체크용 -}*/ - - // 게임 초기화 및 시작 - window.onload = function () { - answer = RandomNumbers().split(""); // 정답 생성 및 배열로 변환 - document.getElementById("replayButton").style.display="none"; // 시작할때는 재시작버튼 안보이도록숨김 - document.getElementById("replayMessage").innerText=""; //재시작 멘트 숨김 - }; - - - -//html 함수 참조하도록 객체전달합니다 -window.checkNumbers=checkNumbers; -window.replay=replay; \ No newline at end of file + document.getElementById("checkButton").addEventListener("click", function (event) { + event.preventDefault(); // 기본 동작(페이지 새로고침) 방지 + checkNumbers(answer); // 사용자가 입력한 숫자 확인 함수 호출 + }); +}; \ No newline at end of file diff --git a/src/randomNumbers.js b/src/randomNumbers.js new file mode 100644 index 0000000..85aa52a --- /dev/null +++ b/src/randomNumbers.js @@ -0,0 +1,10 @@ +export default function randomNumbers() { + const numbers = []; + while (numbers.length < 3) { + const n = Math.floor(Math.random() * 9) + 1; + if (!numbers.includes(n)) { + numbers.push(n); + } + } + return numbers.join(""); // 숫자 배열을 문자열로 반환 +} \ No newline at end of file From 67eaf304e73e72e0654bc39312d3688c7a42da9e Mon Sep 17 00:00:00 2001 From: dsrud1218 Date: Fri, 10 May 2024 23:39:18 +0900 Subject: [PATCH 09/10] =?UTF-8?q?replay=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/main.js | 10 ++++++++++ src/replay.js | 7 +++++++ 3 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 src/replay.js diff --git a/index.html b/index.html index 05fe2cf..d5f236e 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@

📝결과

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

- + diff --git a/src/main.js b/src/main.js index db13901..26c127d 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,11 @@ import randomNumbers from "./randomNumbers.js"; import checkNumbers from "./checkNumbers.js"; +import { replay } from "./replay.js"; let answer = []; + + window.onload = function () { answer = randomNumbers().split(""); // 정답 생성 및 배열로 변환 document.getElementById("replayButton").style.display = "none"; // 시작할때는 재시작버튼 안보이도록 숨김 @@ -12,4 +15,11 @@ window.onload = function () { event.preventDefault(); // 기본 동작(페이지 새로고침) 방지 checkNumbers(answer); // 사용자가 입력한 숫자 확인 함수 호출 }); + + document.getElementById("replayButton").addEventListener("click", function (event) { + event.preventDefault(); // 기본 동작(페이지 새로고침) 방지 + replay(); // 게임 재시작 함수 호출 + }); + + }; \ No newline at end of file diff --git a/src/replay.js b/src/replay.js new file mode 100644 index 0000000..64a7364 --- /dev/null +++ b/src/replay.js @@ -0,0 +1,7 @@ +export function replay() { + answer = randomNumbers().split(""); // 정답 생성 및 배열로 변환 + document.getElementById("input").value = ""; // 입력 필드 초기화 + document.getElementById("result").innerText = ""; // 결과 초기화 + document.getElementById("answer").innerText = ""; // 정답 초기화 + document.getElementById("replayButton").style.display = "none"; // 재시작 버튼 숨기기 + } From fa05a2728edda059dd398c33be429c79dbb1faee Mon Sep 17 00:00:00 2001 From: dsrud1218 Date: Sat, 11 May 2024 11:17:46 +0900 Subject: [PATCH 10/10] =?UTF-8?q?feat(=EC=A2=85=EB=A3=8C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 7 +++++-- src/checkNumbers.js | 2 ++ src/endGame.js | 15 +++++++++++++++ src/main.js | 14 +++++++++++--- src/replay.js | 9 ++++++++- 5 files changed, 41 insertions(+), 6 deletions(-) create mode 100644 src/endGame.js diff --git a/index.html b/index.html index d5f236e..c4e84d6 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + baseball-game
@@ -16,8 +16,11 @@

⚾숫자 야구 게임

📝결과

-

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

+

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

+ +

게임을 종료합니다

+
diff --git a/src/checkNumbers.js b/src/checkNumbers.js index 6115e8a..a2e2d3b 100644 --- a/src/checkNumbers.js +++ b/src/checkNumbers.js @@ -22,6 +22,8 @@ export default function checkNumbers(answer) { document.getElementById("result").innerText = "정답을 맞추셨습니다"; document.getElementById("replayButton").style.display = "block"; //재시작 버튼 표시 추가 document.getElementById("replayMessage").innerText = "게임을 새로 시작하시겠습니까?"; //재시작 멘트 표시 추가 + document.getElementById("endButton").style.display = "block"; // 재시작 버튼 표시 + document.getElementById("endMessage").innerText = "게임을 종료합니다 "; } else if (strikes === 0 && balls === 0) { document.getElementById("result").innerText = "낫싱"; diff --git a/src/endGame.js b/src/endGame.js new file mode 100644 index 0000000..551791a --- /dev/null +++ b/src/endGame.js @@ -0,0 +1,15 @@ +// 게임 종료 버튼을 표시하는 함수 +export function showEndGameButton() { + const endDisplay = document.getElementById("endButton"); + endDisplay.style.display = "block"; + } + +// 게임 종료 메시지를 표시하는 함수 +export function endGame() { + const app = document.getElementById("app"); + const endMessage = document.createElement("h1"); + endMessage.textContent = "게임이 종료되었습니다. 감사합니다!"; + app.innerHTML = ""; // 기존 내용 초기화 + app.appendChild(endMessage); + document.getElementById("replayButton").style.display = "block"; // 재시작 버튼 표시 + } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 26c127d..7621fd9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,15 +1,17 @@ import randomNumbers from "./randomNumbers.js"; import checkNumbers from "./checkNumbers.js"; import { replay } from "./replay.js"; +import {endGame} from "./endGame.js"; let answer = []; - window.onload = function () { answer = randomNumbers().split(""); // 정답 생성 및 배열로 변환 document.getElementById("replayButton").style.display = "none"; // 시작할때는 재시작버튼 안보이도록 숨김 document.getElementById("replayMessage").innerText = ""; //재시작 멘트 숨김 + document.getElementById("endButton").style.display = "none"; + document.getElementById("endMessage").innerText = ""; document.getElementById("checkButton").addEventListener("click", function (event) { event.preventDefault(); // 기본 동작(페이지 새로고침) 방지 @@ -20,6 +22,12 @@ window.onload = function () { event.preventDefault(); // 기본 동작(페이지 새로고침) 방지 replay(); // 게임 재시작 함수 호출 }); - -}; \ No newline at end of file + document.getElementById("endButton").addEventListener("click", function (event) { + event.preventDefault(); // 기본 동작(페이지 새로고침) 방지 + endGame(); // 게임 종료 함수 호출 + }); + +}; + +//제ㅐ시작과 종료 추가 \ No newline at end of file diff --git a/src/replay.js b/src/replay.js index 64a7364..a688fc1 100644 --- a/src/replay.js +++ b/src/replay.js @@ -1,7 +1,14 @@ +import randomNumbers from "./randomNumbers.js"; + +let answer =[]; + export function replay() { answer = randomNumbers().split(""); // 정답 생성 및 배열로 변환 document.getElementById("input").value = ""; // 입력 필드 초기화 document.getElementById("result").innerText = ""; // 결과 초기화 document.getElementById("answer").innerText = ""; // 정답 초기화 document.getElementById("replayButton").style.display = "none"; // 재시작 버튼 숨기기 - } + document.getElementById("endButton").style.display = "none"; // 종료 버튼 숨기기 + document.getElementById("endMessage").style.display = "none"; + document.getElementById("replayMessage").style.display = "none"; +}