<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="ball.css">
<title>숫자야구 게임</title>
</head>
<body class="home__container">
<h1 class="home__title">숫자 야구 게임!</h1>
<p class="home__descript">
<br>
컴퓨터가 세 자리 숫자를 생성하였습니다.
<br>
정답을 맞춰보세요!
<br><br>
[게임 진행 방식]
<br>
숫자의 값과 위치가 모두 일치하면 S
<br>
숫자의 값은 일치하지만 위치가 틀린다면 B
<br><br>
숫자 3개를 모두 맞춘 경우, 게임을 종료합니다.
<br>
</p>
<div class="input">
<input type="text" id="userInput" placeholder=" 세 자리 숫자를 입력하세요">
<button onclick="checkGuess()">시도</button>
</div>
<div id="output"></div>
<script src="ball.js"></script>
</body>
</html>
// 게임에 필요한 변수 초기화
let answer = generateRandomNumber();
let attempts = 0;
// HTML 요소 가져오기
const output = document.getElementById('output');
const userInput = document.getElementById('userInput');
// 1. 메인 게임 로직
function checkGuess() {
// HTML 입력값 가져오기
const guess = userInput.value;
// 입력값이 3자리 숫자인지 확인
if (!isValidInput(guess)) {
alert('세 자리 숫자를 입력하세요.');
return;
}
// 시도 횟수 증가
attempts++;
// 스트라이크와 볼 계산
const result = calculateResult(guess);
// 결과 출력
output.innerHTML += `${attempts}번째 시도: ${guess} - ${result}<br>`;
// 정답 여부 확인
if (result === '3S') {
output.innerHTML += `${attempts}번만에 맞혔습니다. 게임을 종료합니다.`;
userInput.disabled = true;
}
// 입력 창 초기화
userInput.value = '';
}
// 2. 랜덤 숫자 생성 함수
function generateRandomNumber() {
let numbers = [];
// 서로 다른 숫자 3개 뽑기
while (numbers.length < 3) {
const randomNumber = Math.floor(Math.random() * 10);
if (!numbers.includes(randomNumber)) {
numbers.push(randomNumber);
}
}
return numbers.join('');
}
// 3. 입력값이 3자리 숫자인지 확인하는 함수
function isValidInput(input) {
return /^\d{3}$/.test(input);
}
// 4. 볼과 스트라이크 계산하는 함수
function calculateResult(guess) {
let strikes = 0;
let balls = 0;
for (let i = 0; i < 3; i++) {
const digit = guess[i];
if (digit === answer[i]) {
strikes++;
} else if (answer.includes(digit)) {
balls++;
}
}
// 결과 문자열 생성
let result = '';
if (strikes > 0) {
result += `${strikes}S`;
}
if (balls > 0) {
result += `${balls}B`;
}
return result || '0B0S';
}
