자바스크립트 fetch API를 사용한 웹 게임 개발

10 Sep 2023

javascript

웹 개발에는 다양한 방법이 있지만, 최근에는 fetch API를 사용하여 데이터를 가져오고 전송하는 것이 인기를 얻고 있습니다.

이번 게시물에서는 자바스크립트 fetch API를 활용하여 간단한 웹 게임을 개발해보겠습니다.

게임 개요

우리가 만들 게임은 간단한 숫자 맞추기 게임입니다. 게임은 다음과 같은 동작으로 진행됩니다:

정답이 되는 1부터 100 사이의 랜덤 숫자가 생성됩니다.
사용자는 입력 필드에 자신이 추측하는 숫자를 입력합니다.
사용자가 입력한 숫자와 정답을 비교하여 “정답”, “더 작은 숫자를 추측해보세요”, “더 큰 숫자를 추측해보세요”와 같은 힌트를 제공합니다.
게임은 정답을 맞출 때까지 반복됩니다.

HTML 마크업

게임을 만들기 위해 먼저 HTML 마크업을 작성해야 합니다. 다음은 게임을 구현하기 위한 기본 HTML 구조입니다:

<!DOCTYPE html>
<html>
<head>
  <title>숫자 맞추기 게임</title>
</head>
<body>
  <h1>숫자 맞추기 게임</h1>
  
  <p id="hint"></p>
  
  <input type="text" id="guess" />
  <button id="submit">제출</button>

  <script src="game.js"></script>
</body>
</html>

자바스크립트 코드

const randomNumber = Math.floor(Math.random() * 100) + 1;

const hintElement = document.getElementById('hint');
const guessElement = document.getElementById('guess');
const submitElement = document.getElementById('submit');

submitElement.addEventListener('click', () => {
  const userGuess = parseInt(guessElement.value);
  
  if (isNaN(userGuess)) {
    hintElement.textContent = '숫자를 입력하세요!';
  } else if (userGuess === randomNumber) {
    hintElement.textContent = '정답입니다!';
  } else if (userGuess < randomNumber) {
    hintElement.textContent = '더 큰 숫자를 추측해보세요.';
  } else {
    hintElement.textContent = '더 작은 숫자를 추측해보세요.';
  }
});

위의 코드에서 randomNumber는 1부터 100 사이의 랜덤 숫자를 생성합니다.

hintElement, guessElement, submitElement는 각각 힌트를 표시할 요소, 사용자의 추측을 입력받을 입력 필드, 제출 버튼을 나타냅니다.

submitElement에 대한 ‘클릭’ 이벤트 리스너를 추가하여 사용자가 제출 버튼을 클릭했을 때 게임이 진행되도록 합니다. 사용자의 추측은 guessElement.value를 통해 가져옵니다.

추측과 정답을 비교하여 적절한 힌트를 hintElement.textContent에 표시합니다.

게임 실행

게임을 실행하기 위해 위의 코드를 game.js 파일에 저장하고 HTML 파일에 스크립트를 추가합니다:

<script src="game.js"></script>

웹 브라우저에서 HTML 파일을 열고 게임을 플레이해보세요! 숫자를 추측할 때마다 힌트가 제공되며, 정답을 맞추면 ‘정답입니다!’라는 메시지가 표시됩니다.

이제 자바스크립트 fetch API를 사용하여 서버와 통신하거나 게임에 그래픽과 사운드를 추가하여 게임을 발전시킬 수 있습니다.

이번 글에서는 자바스크립트 fetch API를 사용하여 간단한 웹 게임을 개발하는 방법에 대해 알아보았습니다. fetch API를 사용하면 데이터를 쉽게 가져올 수 있으므로, 더욱 다양한 기능을 추가하여 멋진 웹 게임을 만들 수 있습니다.

Happy coding!