반응형
게임 소개
숫자 맞히기 게임은 컴퓨터가 생성한 랜덤 숫자를 사용자가 맞추는 게임입니다. 이 실습을 통해 JavaScript의 조건문(if, else), 반복문(while), 그리고 사용자 입력 처리 방법을 종합적으로 학습할 수 있습니다.
🎯 학습 목표
- 조건문을 활용한 게임 로직 구현
- 반복문을 사용한 게임 진행 제어
- 사용자 입력 검증 및 피드백 제공
- 게임 상태 관리 및 결과 출력
게임 규칙
📋 기본 규칙
- 컴퓨터가 1~100 사이의 랜덤 숫자를 생성
- 사용자가 숫자를 입력하여 맞추기 시도
- 입력한 숫자가 정답보다 크면 "더 작은 수를 입력하세요"
- 입력한 숫자가 정답보다 작으면 "더 큰 수를 입력하세요"
- 정답을 맞추면 시도 횟수와 함께 축하 메시지 출력
- 최대 시도 횟수 제한 (예: 10회)
기본 버전 만들기
먼저 가장 간단한 형태의 숫자 맞히기 게임을 만들어보겠습니다.
1단계: 랜덤 숫자 생성
// 1~100 사이의 랜덤 숫자 생성
let randomNumber = Math.floor(Math.random() * 100) + 1;
console.log("컴퓨터가 1~100 사이의 숫자를 선택했습니다!");
console.log("정답:", randomNumber); // 테스트용 (실제 게임에서는 제거)Math.random() 함수 설명:
Math.random(): 0 이상 1 미만의 소수 반환Math.random() * 100: 0 이상 100 미만의 소수Math.floor(): 소수점 이하 버림+ 1: 1~100 범위로 조정
2단계: 기본 게임 로직
let randomNumber = Math.floor(Math.random() * 100) + 1;
let userGuess = parseInt(prompt("1~100 사이의 숫자를 맞춰보세요:"));
if (userGuess === randomNumber) {
console.log("정답입니다! 축하합니다!");
} else if (userGuess < randomNumber) {
console.log("더 큰 수를 입력하세요!");
} else {
console.log("더 작은 수를 입력하세요!");
}
console.log("정답은 " + randomNumber + "이었습니다.");실행 결과 (예시):
// 사용자가 50을 입력하고 정답이 75인 경우
더 큰 수를 입력하세요!
정답은 75이었습니다.이 기본 버전은 한 번만 추측할 수 있는 단순한 형태입니다. 조건문을 사용해 사용자의 입력과 정답을 비교하고 적절한 피드백을 제공합니다.
기능 개선하기
이제 while문을 사용하여 여러 번 시도할 수 있는 게임으로 개선해보겠습니다.
3단계: 반복 게임 로직
let randomNumber = Math.floor(Math.random() * 100) + 1;
let userGuess = 0;
let attempts = 0;
console.log("숫자 맞히기 게임을 시작합니다!");
console.log("1~100 사이의 숫자를 맞춰보세요!");
while (userGuess !== randomNumber) {
userGuess = parseInt(prompt("숫자를 입력하세요:"));
attempts++;
if (userGuess === randomNumber) {
console.log("정답입니다! 축하합니다!");
console.log("시도 횟수: " + attempts + "회");
} else if (userGuess < randomNumber) {
console.log("더 큰 수를 입력하세요!");
} else {
console.log("더 작은 수를 입력하세요!");
}
}실행 결과 (예시):
숫자 맞히기 게임을 시작합니다!
1~100 사이의 숫자를 맞춰보세요!
// 사용자가 50 입력
더 큰 수를 입력하세요!
// 사용자가 75 입력
더 작은 수를 입력하세요!
// 사용자가 63 입력
정답입니다! 축하합니다!
시도 횟수: 3회4단계: 입력 검증 추가
let randomNumber = Math.floor(Math.random() * 100) + 1;
let userGuess = 0;
let attempts = 0;
console.log("숫자 맞히기 게임을 시작합니다!");
while (userGuess !== randomNumber) {
let input = prompt("1~100 사이의 숫자를 입력하세요:");
userGuess = parseInt(input);
// 입력값 검증
if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
console.log("올바른 숫자를 입력해주세요 (1~100)");
continue; // 다시 입력받기
}
attempts++;
if (userGuess === randomNumber) {
console.log("🎉 정답입니다! 축하합니다!");
console.log("시도 횟수: " + attempts + "회");
} else if (userGuess < randomNumber) {
console.log("⬆️ 더 큰 수를 입력하세요!");
} else {
console.log("⬇️ 더 작은 수를 입력하세요!");
}
}입력 검증 설명:
isNaN(): 숫자가 아닌 값인지 확인userGuess < 1 || userGuess > 100: 범위 밖 값 확인continue: 현재 반복을 건너뛰고 다음 반복으로 이동
완성된 게임
최종적으로 시도 횟수 제한과 게임 재시작 기능을 추가한 완성된 버전입니다.
function numberGuessingGame() {
let randomNumber = Math.floor(Math.random() * 100) + 1;
let userGuess = 0;
let attempts = 0;
const maxAttempts = 10;
console.log("🎮 숫자 맞히기 게임을 시작합니다!");
console.log("1~100 사이의 숫자를 맞춰보세요!");
console.log("최대 " + maxAttempts + "번까지 시도할 수 있습니다.");
while (userGuess !== randomNumber && attempts < maxAttempts) {
let input = prompt(`숫자를 입력하세요 (${attempts + 1}/${maxAttempts}번째 시도):`);
// 게임 종료 조건
if (input === null || input.toLowerCase() === 'quit') {
console.log("게임을 종료합니다.");
return;
}
userGuess = parseInt(input);
// 입력값 검증
if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
console.log("❌ 올바른 숫자를 입력해주세요 (1~100)");
continue;
}
attempts++;
if (userGuess === randomNumber) {
console.log("🎉 정답입니다! 축하합니다!");
console.log("💯 시도 횟수: " + attempts + "회");
// 성능 평가
if (attempts <= 3) {
console.log("🏆 대단해요! 천재적인 실력입니다!");
} else if (attempts <= 6) {
console.log("👍 좋아요! 실력이 좋네요!");
} else {
console.log("✨ 수고하셨습니다!");
}
} else if (userGuess < randomNumber) {
console.log("⬆️ 더 큰 수를 입력하세요!");
// 힌트 제공
if (randomNumber - userGuess > 20) {
console.log("💡 힌트: 많이 작아요!");
}
} else {
console.log("⬇️ 더 작은 수를 입력하세요!");
// 힌트 제공
if (userGuess - randomNumber > 20) {
console.log("💡 힌트: 많이 커요!");
}
}
}
// 게임 종료 처리
if (attempts >= maxAttempts && userGuess !== randomNumber) {
console.log("😢 시도 횟수를 모두 사용했습니다!");
console.log("정답은 " + randomNumber + "이었습니다.");
}
// 게임 재시작 여부 확인
let playAgain = confirm("다시 게임하시겠습니까?");
if (playAgain) {
console.log("\n" + "=".repeat(30));
numberGuessingGame(); // 재귀 호출로 게임 재시작
} else {
console.log("게임을 종료합니다. 감사합니다!");
}
}
// 게임 시작
numberGuessingGame();실행 결과 예시:
🎮 숫자 맞히기 게임을 시작합니다!
1~100 사이의 숫자를 맞춰보세요!
최대 10번까지 시도할 수 있습니다.
// 1번째 시도: 50
⬆️ 더 큰 수를 입력하세요!
💡 힌트: 많이 작아요!
// 2번째 시도: 75
⬇️ 더 작은 수를 입력하세요!
// 3번째 시도: 63
🎉 정답입니다! 축하합니다!
💯 시도 횟수: 3회
🏆 대단해요! 천재적인 실력입니다!
다시 게임하시겠습니까?추가 기능 아이디어
게임을 더욱 흥미롭게 만들 수 있는 추가 기능들입니다:
난이도 선택 기능
function selectDifficulty() {
let difficulty = prompt("난이도를 선택하세요:\n1. 쉬움 (1~50, 15번 시도)\n2. 보통 (1~100, 10번 시도)\n3. 어려움 (1~200, 8번 시도)");
switch(difficulty) {
case "1":
return { max: 50, attempts: 15 };
case "2":
return { max: 100, attempts: 10 };
case "3":
return { max: 200, attempts: 8 };
default:
console.log("기본 난이도(보통)로 설정됩니다.");
return { max: 100, attempts: 10 };
}
}점수 시스템 추가
function calculateScore(attempts, maxAttempts) {
let baseScore = 1000;
let penalty = attempts * 50;
let score = Math.max(baseScore - penalty, 100);
return score;
}
// 게임 끝날 때 점수 계산
let score = calculateScore(attempts, maxAttempts);
console.log("🏆 최종 점수: " + score + "점");최고 기록 저장
// 브라우저의 localStorage 활용
function saveBestScore(attempts) {
let bestScore = localStorage.getItem('bestScore');
if (!bestScore || attempts < parseInt(bestScore)) {
localStorage.setItem('bestScore', attempts);
console.log("🎉 새로운 최고 기록입니다!");
}
}
function showBestScore() {
let bestScore = localStorage.getItem('bestScore');
if (bestScore) {
console.log("🏅 현재 최고 기록: " + bestScore + "회");
}
}마무리
숫자 맞히기 게임 만들기를 통해 JavaScript의 핵심 개념들을 실습해보았습니다.
이 실습을 통해 JavaScript의 기본 문법을 실제 프로젝트에 적용하는 경험을 쌓을 수 있었습니다. 더 복잡한 게임이나 웹 애플리케이션을 만들 때도 이런 기본 개념들이 토대가 됩니다!
'JavaScript > 조건문과 반복문' 카테고리의 다른 글
| JavaScript 반복문 완전 가이드 - for, while, for...of, forEach 마스터하기 (0) | 2025.06.06 |
|---|---|
| JavaScript 조건문 완전 가이드 - if, else, switch 마스터하기 (0) | 2025.06.06 |