자바스크립트에서 JSON 데이터를 이용하여 지뢰찾기 게임 생성하기

15 Sep 2023

vuejs

지뢰찾기는 많은 사람들이 즐기는 클래식한 게임입니다. 이 게임은 주어진 그리드에서 지뢰가 있는 칸을 피해 숨겨진 모든 빈 칸을 찾는 것을 목표로 합니다. 이번에는 자바스크립트에서 JSON 데이터를 이용하여 지뢰찾기 게임을 생성하는 방법을 알아보겠습니다.

JSON 데이터 구조

먼저, JSON 데이터의 구조를 설계해야 합니다. 이 데이터는 게임 보드의 크기, 지뢰의 위치 및 주변 지뢰의 개수 등을 포함해야 합니다. 다음은 예시로 사용될 JSON 데이터의 구조입니다.

{
  "boardSize": [5, 5],
  "mineCount": 5,
  "mines": [
    [0, 1],
    [1, 3],
    [3, 2],
    [4, 0],
    [4, 4]
  ]
}

boardSize: 게임 보드의 가로와 세로 크기를 나타내는 배열입니다.
mineCount: 게임에서 생성할 지뢰의 개수를 나타냅니다.
mines: 지뢰가 위치한 칸의 좌표를 나타내는 배열의 배열입니다.

자바스크립트 코드

이제 위에서 설계한 JSON 데이터를 이용하여 지뢰찾기 게임을 생성하는 자바스크립트 코드를 작성해보겠습니다.

const json = `{
  "boardSize": [5, 5],
  "mineCount": 5,
  "mines": [
    [0, 1],
    [1, 3],
    [3, 2],
    [4, 0],
    [4, 4]
  ]
}`;

const gameData = JSON.parse(json);

const gameBoard = [];

// 게임 보드 초기화
for (let i = 0; i < gameData.boardSize[0]; i++) {
  const row = [];
  for (let j = 0; j < gameData.boardSize[1]; j++) {
    row.push({
      revealed: false,
      hasMine: false,
      neighborMines: 0
    });
  }
  gameBoard.push(row);
}

// 지뢰 위치 설정
for (const mine of gameData.mines) {
  const [x, y] = mine;
  gameBoard[y][x].hasMine = true;
}

// 주변 지뢰 개수 계산
for (let i = 0; i < gameData.boardSize[0]; i++) {
  for (let j = 0; j < gameData.boardSize[1]; j++) {
    if (!gameBoard[j][i].hasMine) {
      let count = 0;
      for (let dx = -1; dx <= 1; dx++) {
        for (let dy = -1; dy <= 1; dy++) {
          const nx = i + dx;
          const ny = j + dy;
          if (nx >= 0 && nx < gameData.boardSize[0] && ny >= 0 && ny < gameData.boardSize[1] && gameBoard[ny][nx].hasMine) {
            count++;
          }
        }
      }
      gameBoard[j][i].neighborMines = count;
    }
  }
}

console.log(gameBoard);

위 코드에서는 JSON 문자열을 JSON.parse() 함수를 이용하여 파싱하여 gameData 객체로 변환합니다. 그리고 gameBoard 배열을 초기화하고, 지뢰의 위치를 설정한 후 주변 지뢰 개수를 계산합니다.

이제 gameBoard 배열을 살펴보면, 2차원 배열 형태로 게임 보드가 생성된 것을 확인할 수 있습니다.

지뢰찾기 게임을 완성하려면 사용자 상호작용, 지뢰 폭발 등 추가로 처리해야 할 사항들이 있습니다. 하지만 이 튜토리얼에서는 JSON 데이터를 이용하여 게임 보드를 생성하는 기능에 초점을 맞추었습니다.

#지뢰찾기 #자바스크립트