클릭하면 점수 올라가는 리액션 게임 (HTML 인터페이스, JS 점수 로직, 타이머·레벨 확장)

‘클릭하면 점수 올라가는 리액션 게임’은 단순한 구조 속에서도 사용자 반응 속도와 집중력을 테스트할 수 있는 재미있는 프로젝트입니다. 이 게임은 웹 개발 입문자에게 이벤트 처리, 점수 시스템, 타이머 구현 등 핵심 개념을 익히기에 적합하며, 동시에 게임적 요소까지 경험할 수 있어 학습 효과가 뛰어납니다. 본 글에서는 HTML로 게임 UI를 구성하는 법, JavaScript로 점수 로직을 설계하는 법, 그리고 타이머나 레벨업 같은 기능 확장을 통해 게임을 더욱 흥미롭게 만드는 방법까지 단계적으로 설명드리겠습니다.

HTML 인터페이스: 사용자 반응을 유도하는 구조 설계

리액션 게임의 핵심은 얼마나 빠르게 사용자가 클릭을 하느냐에 따라 점수가 누적되는 구조입니다. 따라서 HTML 인터페이스는 간단하면서도 클릭 요소가 눈에 잘 띄고 반응 속도가 빠르게 느껴지도록 구성해야 합니다. 일반적으로는 점수판, 클릭 대상 영역, 그리고 시작 버튼이나 타이머 표시 영역이 필요합니다.

HTML 기본 구조 예시는 다음과 같습니다:

<div class="reaction-container">
  <h1>리액션 점수 게임</h1>
  <p id="score-display">점수: 0</p>
  <div id="click-area">클릭!</div>
  <p id="timer-display">남은 시간: 30초</p>
  <button id="start-button">게임 시작</button>
</div>

각 요소의 역할은 다음과 같습니다.

#score-display: 현재까지 누적된 점수를 실시간으로 보여주는 공간
#click-area: 사용자가 클릭할 대상이며, 반응 요소가 이곳에만 국한됩니다
#timer-display: 제한 시간 또는 남은 시간을 실시간으로 보여주는 공간
#start-button: 게임을 시작하거나 다시 시작할 수 있도록 하는 컨트롤

HTML 구조에서는 불필요한 복잡함보다는 클릭을 유도할 수 있는 간결함과 시각적 강조 요소를 중심으로 배치하는 것이 핵심입니다. CSS로 클릭 영역의 크기와 색상 등을 조정하면 접근성과 시인성이 향상되며, 이와 같은 구조는 모바일 환경에서도 충분히 활용 가능합니다.

JS 점수 로직: 클릭 이벤트와 타이밍 연동 구현

HTML 구조가 완성되었다면, JavaScript를 통해 실제 동작을 제어하는 로직을 작성해야 합니다. 리액션 게임의 핵심 로직은 사용자가 특정 요소를 클릭할 때마다 점수가 증가하고, 정해진 시간 안에 최대한 많은 점수를 획득하는 것입니다. 이를 위해 다음과 같은 기능들이 필요합니다:

점수 변수 선언 및 갱신
타이머 설정 및 종료 조건 처리
클릭 이벤트 연결
게임 시작/재시작 기능

let score = 0;
let timeLeft = 30;
let timerInterval;
let gameRunning = false;

document.getElementById("start-button").addEventListener("click", startGame);
document.getElementById("click-area").addEventListener("click", addPoint);

function startGame() {
  if (gameRunning) return;
  gameRunning = true;
  score = 0;
  timeLeft = 30;
  document.getElementById("score-display").innerText = `점수: ${score}`;
  document.getElementById("timer-display").innerText = `남은 시간: ${timeLeft}초`;

  timerInterval = setInterval(() => {
    timeLeft--;
    document.getElementById("timer-display").innerText = `남은 시간: ${timeLeft}초`;

    if (timeLeft <= 0) {
      clearInterval(timerInterval);
      gameRunning = false;
      document.getElementById("click-area").innerText = "게임 종료!";
    }
  }, 1000);
}

function addPoint() {
  if (!gameRunning) return;
  score++;
  document.getElementById("score-display").innerText = `점수: ${score}`;
}

이 로직의 흐름은 매우 직관적입니다. 게임 시작 버튼이 눌리면 타이머가 작동하며, 사용자는 제한된 시간 내에 클릭을 반복하여 점수를 올립니다. 타이머가 0에 도달하면 clearInterval을 통해 게임을 종료하고 더 이상 점수가 오르지 않도록 막습니다.

타이머·레벨 확장: 반응 속도 테스트형 게임으로 발전시키기

기본적인 점수 시스템이 구현되었다면, 이를 더 흥미롭게 만들기 위한 기능 확장을 고려할 수 있습니다. 가장 대표적인 확장 방법은 타이머 방식 조절, 난이도 증가(레벨업), 시각 효과 추가 등이 있으며, 이를 통해 단순 클릭 게임에서 리액션 테스트형 게임으로 발전시킬 수 있습니다.

1. 난이도 조절 기능

function moveTargetRandomly() {
  const clickArea = document.getElementById("click-area");
  const x = Math.random() * 80;
  const y = Math.random() * 80;
  clickArea.style.position = "absolute";
  clickArea.style.left = `${x}%`;
  clickArea.style.top = `${y}%`;
}

if (score % 10 === 0) {
  moveTargetRandomly();
}

2. 애니메이션 및 반응 피드백

/* CSS */
#click-area.clicked {
  animation: pop 0.2s;
}
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* JavaScript */
clickArea.classList.add("clicked");
setTimeout(() => clickArea.classList.remove("clicked"), 200);

3. 점수 랭킹 저장

const highScore = localStorage.getItem("highScore") || 0;
if (score > highScore) {
  localStorage.setItem("highScore", score);
}

4. 반응 시간 테스트 모드

Date.now()를 사용해 클릭 간 시간 차이를 저장하고 평균을 계산하면 실제 반응 속도 측정도 가능합니다. 이 기능은 고급 확장 요소로서 분석형 게임이나 데이터 기반 게임 설계에도 활용됩니다.

클릭하면 점수가 올라가는 리액션 게임은 간단한 구성 속에서도 웹 개발의 주요 개념을 연습할 수 있는 효과적인 프로젝트입니다. HTML로 인터페이스를 구성하고, JavaScript로 점수 처리 및 타이머 기능을 구현하며, 다양한 확장 요소를 통해 재미와 기능성을 동시에 향상시킬 수 있습니다. 특히 이벤트 처리, DOM 조작, 상태 관리, 애니메이션 등 실무에서 많이 쓰이는 기술을 자연스럽게 익힐 수 있는 기회이기도 합니다. 지금 바로 나만의 리액션 게임을 만들어보며 개발 실력을 키워보시기 바랍니다.

유라's 힐링 타임 즐기기