diff --git a/README.md b/README.md index 8b2833c..2202353 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..c4e84d6 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,25 @@ - + baseball-game -
+
+

⚾숫자 야구 게임

+

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

+

올바른 예)139

+

틀린 예)122

+ + +

📝결과

+

+

+

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

+ + +

게임을 종료합니다

+ +
- + \ No newline at end of file diff --git a/src/checkNumbers.js b/src/checkNumbers.js new file mode 100644 index 0000000..a2e2d3b --- /dev/null +++ b/src/checkNumbers.js @@ -0,0 +1,33 @@ +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 = "게임을 새로 시작하시겠습니까?"; //재시작 멘트 표시 추가 + document.getElementById("endButton").style.display = "block"; // 재시작 버튼 표시 + document.getElementById("endMessage").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/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 e69de29..7621fd9 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,33 @@ +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(); // 기본 동작(페이지 새로고침) 방지 + checkNumbers(answer); // 사용자가 입력한 숫자 확인 함수 호출 + }); + + document.getElementById("replayButton").addEventListener("click", function (event) { + event.preventDefault(); // 기본 동작(페이지 새로고침) 방지 + replay(); // 게임 재시작 함수 호출 + }); + + document.getElementById("endButton").addEventListener("click", function (event) { + event.preventDefault(); // 기본 동작(페이지 새로고침) 방지 + endGame(); // 게임 종료 함수 호출 + }); + +}; + +//제ㅐ시작과 종료 추가 \ 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 diff --git a/src/replay.js b/src/replay.js new file mode 100644 index 0000000..a688fc1 --- /dev/null +++ b/src/replay.js @@ -0,0 +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"; +}