Colin's Blog
[javascript] Phaser를 이용하여 퍼즐 게임 만들기

이번 포스트에서는 JavaScript 게임 개발 프레임워크인 Phaser를 이용하여 퍼즐 게임을 만드는 방법에 대해 알아보겠습니다.

Phaser란?

Phaser는 HTML5 기반 게임 개발을 위한 오픈 소스 자바스크립트 프레임워크입니다. Phaser를 이용하면 브라우저에서 동작하는 멋진 게임을 만들 수 있습니다. 다양한 기능과 편리한 API를 제공하여 게임 개발 과정을 간소화해 줍니다.

퍼즐 게임 기본 구조

퍼즐 게임은 주어진 조각들을 조합하여 올바른 형태로 완성하는 게임입니다. 퍼즐 게임을 만들기 위해 필요한 요소는 다음과 같습니다.

  1. 게임 보드: 조각들을 담을 수 있는 격자 형태의 보드
  2. 퍼즐 조각: 보드 위에 배치될 수 있는 퍼즐 조각
  3. 조작 방법: 조각을 드래그하거나 터치하여 이동시킬 수 있어야 함
  4. 정답 확인: 퍼즐이 올바르게 조합되었는지 확인해야 함

Phaser로 퍼즐 게임 만들기

1. 게임 보드 생성하기

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    create: create,
  }
};

const game = new Phaser.Game(config);

function create() {
  // 게임 보드 생성 코드 작성
}

2. 퍼즐 조각 생성하기

function create() {
  const boardWidth = 6;
  const boardHeight = 6;
  const tileSize = 100;
  
  const board = [];

  for (let y = 0; y < boardHeight; y++) {
    const row = [];

    for (let x = 0; x < boardWidth; x++) {
      const tile = this.add.rectangle(
        x * tileSize,
        y * tileSize,
        tileSize,
        tileSize,
        0xffffff
      );

      tile.setInteractive();
      tile.setData('x', x);
      tile.setData('y', y);

      row.push(tile);
    }

    board.push(row);
  }
}

3. 조작 방법 추가하기

function create() {
  // 생략...

  let selectedTile = null;

  this.input.on('pointerdown', function(pointer) {
    const { x, y } = pointer;
    const tileX = Math.floor(x / tileSize);
    const tileY = Math.floor(y / tileSize);

    selectedTile = board[tileY][tileX];
  });

  this.input.on('pointerup', function(pointer) {
    if (selectedTile !== null) {
      const { x, y } = pointer;
      const tileX = Math.floor(x / tileSize);
      const tileY = Math.floor(y / tileSize);

      if (isValidMove(selectedTile, tileX, tileY)) {
        moveTile(selectedTile, tileX, tileY);
      }
      
      selectedTile = null;
    }
  });

  function isValidMove(tile, x, y) {
    // 유효한 이동인지 체크하는 로직 작성
  }

  function moveTile(tile, x, y) {
    // 조각 이동 로직 작성
  }
}

4. 정답 확인하기

function create() {
  // 생략...

  const solvedBoard = [
    [1, 2, 3, 4, 5, 6],
    [7, 8, 9, 10, 11, 12],
    [13, 14, 15, 16, 17, 18],
    [19, 20, 21, 22, 23, 24],
    [25, 26, 27, 28, 29, 30],
    [31, 32, 33, 34, 35, null],
  ];

  function checkSolution() {
    for (let y = 0; y < boardHeight; y++) {
      for (let x = 0; x < boardWidth; x++) {
        if (board[y][x] !== null) {
          const tileX = board[y][x].getData('x');
          const tileY = board[y][x].getData('y');

          if (tileX !== x || tileY !== y) {
            return false;
          }
        } else {
          if (x !== boardWidth - 1 || y !== boardHeight - 1) {
            return false;
          }
        }
      }
    }

    return true;
  }

  function moveTile(tile, x, y) {
    // 생략...

    if (checkSolution()) {
      // 퍼즐이 완성되었을 때 실행되는 코드 작성
    }
  }
}

위의 코드는 Phaser를 이용하여 퍼즐 게임을 만드는 기본적인 예시입니다. Phaser에서 제공하는 다양한 기능을 활용하면 더욱 복잡하고 흥미로운 퍼즐 게임을 개발할 수 있습니다.

참고자료:

© 2018 Colin. All rights reserved.