자바스크립트와 React.js를 사용한 지뢰 찾기 게임 만들기

09 Nov 2023

reactjs

지뢰 찾기는 많은 사람들이 즐겨하는 클래식 게임 중 하나로, 여러분도 한 번쯤은 플레이해보았을 것입니다. 이번 글에서는 자바스크립트와 React.js를 사용하여 간단한 지뢰 찾기 게임을 만들어보도록 하겠습니다.

게임 엔진 만들기

먼저, 게임을 플레이할 수 있는 게임 엔진을 만들어야 합니다. 이 게임 엔진은 2차원 배열을 사용하여 게임 보드를 표현하며, 각 셀은 지뢰가 있는지 여부와 인접한 지뢰의 개수를 저장하는 속성을 가지고 있어야 합니다.

class GameEngine {
  constructor(rows, cols, numMines) {
    this.rows = rows;
    this.cols = cols;
    this.numMines = numMines;
    this.board = this.initializeBoard(rows, cols);
  }

  initializeBoard(rows, cols) {
    const board = [];
    for (let i = 0; i < rows; i++) {
      const row = [];
      for (let j = 0; j < cols; j++) {
        row.push({
          hasMine: false,
          numAdjacentMines: 0,
          isRevealed: false,
        });
      }
      board.push(row);
    }
    return board;
  }

  // ...
}

위의 코드는 게임 엔진의 일부분으로, initializeBoard 메서드를 통해 게임 보드를 초기화하는 기능을 제공합니다. 이제 게임 보드의 일부 셀에 지뢰를 추가하는 기능을 구현해보겠습니다.

class GameEngine {
  // ...

  placeMines() {
    let numMinesPlaced = 0;
    while (numMinesPlaced < this.numMines) {
      const randRow = Math.floor(Math.random() * this.rows);
      const randCol = Math.floor(Math.random() * this.cols);
      const cell = this.board[randRow][randCol];
      if (!cell.hasMine) {
        cell.hasMine = true;
        numMinesPlaced++;
      }
    }
  }

  // ...
}

위의 코드에서 placeMines 메서드는 numMines 개수만큼의 지뢰를 무작위로 게임 보드에 추가하는 기능을 제공합니다.

React.js를 활용한 UI 구현

이제 게임 엔진이 준비되었으니, 이를 기반으로 React.js를 사용하여 게임의 UI를 구현해보겠습니다. 먼저, 게임 보드를 렌더링하는 컴포넌트를 만들어보겠습니다.

class GameBoard extends React.Component {
  render() {
    const { board } = this.props;

    return (
      <div className="board">
        {board.map((row, rowIndex) => (
          <div className="row" key={rowIndex}>
            {row.map((cell, colIndex) => (
              <div className="cell" key={colIndex}>
                {/* 셀 컨텐츠 */}
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }
}

위의 코드에서 board 프로퍼티를 통해 게임 엔진이 생성한 보드를 전달받습니다. 이제 각 셀의 내용을 표시하는 로직을 추가하면 됩니다.

class GameBoard extends React.Component {
  renderCellContent(cell) {
    if (cell.isRevealed) {
      if (cell.hasMine) {
        return <span className="mine">X</span>;
      } else {
        return <span className="adjacent-mines">{cell.numAdjacentMines}</span>;
      }
    } else {
      return null;
    }
  }

  render() {
    const { board } = this.props;

    return (
      <div className="board">
        {board.map((row, rowIndex) => (
          <div className="row" key={rowIndex}>
            {row.map((cell, colIndex) => (
              <div className="cell" key={colIndex}>
                {this.renderCellContent(cell)}
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }
}

위의 코드에서 renderCellContent 메서드는 셀의 내용을 렌더링하는 로직을 구현합니다. 셀이 탐지된 경우 지뢰인지 아니면 인접한 지뢰의 개수를 표시합니다.

게임 실행

이제 게임을 실행하는 컴포넌트를 만들어보겠습니다.

class MinesweeperGame extends React.Component {
  constructor() {
    super();
    this.gameEngine = new GameEngine(8, 8, 10);
    this.state = {
      board: this.gameEngine.board,
    };
  }

  handleCellClick(row, col) {
    const cell = this.gameEngine.board[row][col];
    if (!cell.isRevealed) {
      cell.isRevealed = true;
      this.setState({ board: this.gameEngine.board });
    }
  }

  render() {
    const { board } = this.state;

    return (
      <div className="game">
        <h1>Minesweeper</h1>
        <GameBoard board={board} />
      </div>
    );
  }
}

위의 코드에서 MinesweeperGame 컴포넌트는 게임 엔진을 초기화하고, 셀을 클릭할 때마다 해당 셀을 탐지하도록 구현합니다. 이제 ReactDOM.render 함수를 사용하여 게임을 렌더링하면, 자바스크립트와 React.js를 사용하여 간단한 지뢰 찾기 게임을 만들 수 있습니다.

ReactDOM.render(<MinesweeperGame />, document.getElementById("root"));

이제 여러분은 자바스크립트와 React.js를 활용하여 지뢰 찾기 게임을 만들 수 있습니다. 이 코드를 시작으로 게임에 다양한 기능을 추가해보세요. Happy coding!

[#javascript #reactjs]