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

10 Sep 2023

javascript

자바스크립트(fetch API)를 사용하여 웹에서 게임을 개발하고 싶으신가요? 이 글에서는 fetch API를 활용하여 간단한 클릭 게임을 만드는 방법을 알려드릴 것입니다.

fetch API란?

fetch API는 JavaScript의 내장 API로, 네트워크 요청을 처리하는 기능을 제공합니다. 서버로부터 데이터를 가져오거나 서버에 데이터를 보내는 등의 작업을 쉽게 처리할 수 있습니다.

웹 게임 개발하기

간단한 클릭 게임을 만들어보겠습니다. 게임의 목표는 10초 동안으로 마우스로 클릭할 수 있는 최대 클릭 수를 달성하는 것입니다. 게임이 시작되면 10초를 카운트하며, 클릭 버튼을 누를 때마다 클릭 수가 증가합니다.

이 게임을 개발하기 위해 다음과 같은 HTML과 JavaScript 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Click Game</title>
  <style>
    .container {
      text-align: center;
      padding-top: 100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Click Game</h1>
    <p>Click as many times as possible in 10 seconds!</p>
    <button id="clickBtn">Click Me!</button>
    <p id="score">0</p>
  </div>
  
  <script>
    const clickBtn = document.getElementById('clickBtn');
    const score = document.getElementById('score');
    
    let count = 0;
    
    clickBtn.addEventListener('click', () => {
      count++;
      score.textContent = count;
    });
    
    setTimeout(() => {
      clickBtn.disabled = true;
    }, 10000);
  </script>
</body>
</html>

위의 코드를 HTML 파일에 복사하여 실행해보세요. 10초 동안 클릭 버튼을 눌러 최대한 많은 클릭 수를 달성할 수 있습니다.

fetch API를 활용한 데이터 통신

때로는 게임에서 서버와 데이터를 통신해야하는 경우가 있습니다. 예를 들어, 게임에서 사용자의 점수를 서버에 저장하고 랭킹을 표시하려는 경우입니다.

fetch API를 사용하여 서버로 데이터를 보내거나 가져오는 것은 매우 간단합니다. 예를 들어, 게임이 종료될 때 사용자의 점수를 서버에 보내는 코드는 다음과 같이 작성할 수 있습니다.

const score = 100; // 예시 점수

fetch('/api/scores', {
  method: 'POST',
  body: JSON.stringify({ score }),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    console.log('Score saved:', data);
  })
  .catch(error => {
    console.error('Error saving score:', error);
  });

위의 코드에서는 ‘/api/scores’ 엔드포인트로 POST 요청을 보내고, 사용자의 점수를 JSON 형식으로 전송합니다. 응답 데이터를 받아와 저장 결과를 확인합니다. 이 코드를 적절한 위치에 추가하여 사용자의 점수를 서버에 저장할 수 있습니다.

결론

이 글에서는 자바스크립트 fetch API를 사용하여 웹 게임을 개발하는 방법을 알아보았습니다. 간단한 클릭 게임을 만드는 예제와 fetch API를 활용한 데이터 통신 예제를 살펴보았습니다. 이러한 기술을 응용하여 더 다양하고 흥미로운 웹 게임을 개발해보세요!