바위-가위-보 자동 대전기 만들기 (HTML 구성, JS 자동화 로직, 기능 확장)

바위-가위-보 게임은 오랜 세월 동안 전 세계적으로 사랑받아 온 간단하면서도 심리전이 가미된 게임입니다. 이를 웹 개발에 적용하면 버튼 클릭, 랜덤 처리, 조건문 등을 자연스럽게 배울 수 있는 좋은 실습 예제가 됩니다. 특히 이번에는 사람이 직접 참여하는 방식이 아닌, 컴퓨터끼리 자동으로 대결을 진행하는 '자동 대전기' 형태로 구현하여 프로그래밍 로직과 반복 실행, DOM 업데이트를 학습할 수 있습니다. 본 글에서는 HTML 구조 구성, JavaScript를 통한 자동 대전 로직 구현, 그리고 시각적 효과 및 통계 기능까지 기능을 확장하는 과정을 단계적으로 설명드리겠습니다.

HTML 구성: 시각 요소와 정보 표시 구역 만들기

자동 대전 방식의 바위-가위-보 게임은 사용자 입력이 없기 때문에, 클릭 요소보다는 결과를 시각적으로 보여주는 영역이 중심이 됩니다. 두 대결 주체(예: 컴퓨터 A, 컴퓨터 B)의 선택 이미지와 결과 표시 영역, 경기 진행 버튼, 전적 표시 영역 등을 포함하는 구조가 적합합니다.

HTML 예시는 다음과 같습니다:

<div class="rps-container">
  <h1>바위-가위-보 자동 대전기</h1>
  <div class="players">
    <div>
      <h2>컴퓨터 A</h2>
      <img id="playerA-img" src="rock.png" alt="A 선택" />
    </div>
    <div>
      <h2>컴퓨터 B</h2>
      <img id="playerB-img" src="scissors.png" alt="B 선택" />
    </div>
  </div>
  <p id="match-result">결과를 기다리는 중...</p>
  <button id="start-match">자동 대전 시작</button>
  <p id="stats">A: 0승 | B: 0승 | 무승부: 0회</p>
</div>

이 구조는 이후 자바스크립트 로직과 결합되어 각 이미지가 자동으로 교체되고, 결과 텍스트와 승부 통계가 갱신되도록 설계되었습니다. `img` 태그에는 기본 이미지가 설정되어 있고, JavaScript를 통해 src 속성이 실시간으로 바뀌게 됩니다. '자동 대전 시작' 버튼을 누르면 게임이 자동 진행됩니다.

HTML에서는 각 요소에 ID를 부여하여 자바스크립트와 연동하기 쉽게 만들어주는 것이 핵심이며, 명확한 시각 피드백을 위해 결과 영역과 전적 통계를 구분해두는 것이 좋습니다.

JS 로직: 랜덤 처리와 대결 결과 계산 자동화

HTML 인터페이스가 구성되었으면 이제 JavaScript로 실제 게임의 핵심 로직을 구현할 차례입니다. 자동 대전 방식이기 때문에 특정 시간 간격으로 두 컴퓨터의 선택을 랜덤으로 생성하고, 그 결과를 비교하여 승패를 판정하며, 결과를 화면에 출력하는 흐름으로 구성됩니다.

먼저 기본적인 상수와 변수를 선언합니다:

const choices = ["rock", "paper", "scissors"];
let winA = 0, winB = 0, draw = 0;

그 다음 두 컴퓨터의 선택을 랜덤하게 생성하고 비교하는 함수는 다음과 같습니다:

function getRandomChoice() {
  return choices[Math.floor(Math.random() * 3)];
}

function playMatch() {
  const choiceA = getRandomChoice();
  const choiceB = getRandomChoice();

  document.getElementById("playerA-img").src = `${choiceA}.png`;
  document.getElementById("playerB-img").src = `${choiceB}.png`;

  let result = "";

  if (choiceA === choiceB) {
    result = "무승부입니다.";
    draw++;
  } else if (
    (choiceA === "rock" && choiceB === "scissors") ||
    (choiceA === "scissors" && choiceB === "paper") ||
    (choiceA === "paper" && choiceB === "rock")
  ) {
    result = "컴퓨터 A 승!";
    winA++;
  } else {
    result = "컴퓨터 B 승!";
    winB++;
  }

  document.getElementById("match-result").innerText = result;
  document.getElementById("stats").innerText = `A: ${winA}승 | B: ${winB}승 | 무승부: ${draw}회`;
}

마지막으로 버튼 클릭 이벤트에 자동 반복 실행을 연결합니다:

document.getElementById("start-match").addEventListener("click", function () {
  setInterval(playMatch, 2000); // 2초마다 자동 대전
  this.disabled = true;
});

이 로직을 통해 게임은 사용자 개입 없이 자동으로 진행되며, 이미지와 텍스트가 주기적으로 갱신됩니다. `setInterval`을 활용한 반복 실행 구조는 간단한 게임이나 시뮬레이션에서 자주 사용되며, 비동기 실행의 개념도 자연스럽게 익힐 수 있는 좋은 예시입니다.

시각 효과와 통계 기능 확장으로 게임 몰입감 높이기

기본적인 자동 대전 시스템이 구현되었다면, 다음 단계로 시각적 효과나 기능 확장을 통해 게임의 완성도를 높일 수 있습니다. 이 과정은 단순한 구현을 넘어 사용자 경험(UX)을 고려한 설계와 프론트엔드 기술의 실전 적용을 연습하는 데 효과적입니다.

1. 이미지 전환 애니메이션

게임의 생동감을 높이기 위해 이미지 전환 시 약간의 애니메이션을 추가할 수 있습니다. 예를 들어 CSS로 scale 효과를 주거나, fade-in/out 효과를 통해 매 라운드가 시각적으로 분리되도록 구성할 수 있습니다:

#playerA-img, #playerB-img {
  transition: transform 0.2s ease;
}
.rps-container img.active {
  transform: scale(1.1);
}

document.getElementById("playerA-img").classList.add("active");
setTimeout(() => {
  document.getElementById("playerA-img").classList.remove("active");
}, 200);

2. 전적 저장 및 최고 연승 기록

게임이 진행됨에 따라 특정 컴퓨터가 몇 연승을 달성했는지, 최고 연승 기록은 얼마였는지 등의 기록을 남길 수 있습니다. 이를 위해 연속 승 수를 저장하는 변수와 최고치 비교 로직을 추가합니다:

let streakA = 0, streakB = 0, maxStreakA = 0, maxStreakB = 0;

function updateStreak(winner) {
  if (winner === "A") {
    streakA++;
    streakB = 0;
    if (streakA > maxStreakA) maxStreakA = streakA;
  } else if (winner === "B") {
    streakB++;
    streakA = 0;
    if (streakB > maxStreakB) maxStreakB = streakB;
  } else {
    streakA = 0;
    streakB = 0;
  }
}

그리고 결과 판정 후 아래처럼 적용합니다:

if (choiceA === choiceB) {
  result = "무승부입니다.";
  draw++;
  updateStreak("draw");
} else if (...) {
  result = "컴퓨터 A 승!";
  winA++;
  updateStreak("A");
} else {
  result = "컴퓨터 B 승!";
  winB++;
  updateStreak("B");
}

이처럼 확장된 통계를 통해 사용자는 게임 결과뿐 아니라 흐름과 패턴까지 파악할 수 있어, 단순 반복 게임에서 전략적 관찰 도구로 확장됩니다.

3. 라운드 제한 및 종료 처리

게임이 무한히 반복되지 않도록 50라운드, 100라운드 등으로 제한할 수도 있습니다. 이는 게임의 목표를 명확히 하고 종료 조건을 추가하는 데 의미가 있습니다:

let round = 0;
const maxRounds = 50;

function playMatch() {
  if (round >= maxRounds) {
    clearInterval(gameInterval);
    document.getElementById("match-result").innerText = "게임 종료!";
    return;
  }
  round++;
  // 기존 로직 실행
}

바위-가위-보 자동 대전기 만들기는 HTML, CSS, JavaScript의 핵심 개념을 유기적으로 실습할 수 있는 훌륭한 웹 프로젝트입니다. 랜덤 처리, 이미지 전환, 반복 실행, 통계 관리, 조건문 활용 등 다양한 기능을 통해 기초를 탄탄하게 다지고, 창의적인 확장으로 게임의 완성도도 높일 수 있습니다. 간단한 게임 구조지만 이를 통해 배울 수 있는 실전 감각은 매우 크며, 인터페이스 구성 능력과 사용자 경험을 고려한 설계력까지 함께 키울 수 있습니다. 지금 바로 자신만의 자동 대전기를 만들어보고, 다양한 기능을 더해보며 웹 개발 실력을 향상시켜보시기 바랍니다.

유라's 힐링 타임 즐기기