[javascript] 자바스크립트로 랜덤 맵 생성하는 게임 개발하기

14 Dec 2023

javascript

이번에는 자바스크립트로 랜덤 맵을 생성하고 그 위에 게임을 개발하는 방법에 대해 알아보겠습니다.

1. 맵 생성하기

첫 번째 단계는 랜덤한 맵을 생성하는 것입니다. 이를 위해 2차원 배열을 사용하여 맵을 표현할 수 있습니다. 예를 들어, 다음과 같이 함수를 사용하여 맵을 생성할 수 있습니다:

// 맵 생성 함수
function createMap(width, height) {
  let map = [];
  for (let i = 0; i < height; i++) {
    let row = [];
    for (let j = 0; j < width; j++) {
      // 랜덤한 값을 넣어 맵을 생성
      row.push(Math.random() > 0.7 ? 'wall' : 'empty');
    }
    map.push(row);
  }
  return map;
}

위의 코드에서 createMap 함수는 너비와 높이를 매개변수로 받아들이고, 랜덤한 벽과 빈 공간을 가진 맵을 생성하여 반환합니다.

2. 게임 로직 추가하기

다음으로는 생성된 랜덤 맵 위에 게임 로직을 추가할 차례입니다. 예를 들어, 플레이어를 생성하고 이동시키는 방법과 벽과의 충돌을 처리하는 방법을 구현할 수 있습니다.

// 플레이어 클래스
class Player {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  move(dx, dy) {
    // 이동한 위치가 빈 공간인지 확인
    if (map[this.y + dy][this.x + dx] === 'empty') {
      this.x += dx;
      this.y += dy;
    }
  }
}

위의 코드에서 Player 클래스는 플레이어의 초기 위치를 받아들이고, move 메서드를 사용하여 플레이어를 이동시킬 수 있습니다. 이동할 위치가 빈 공간인지를 확인하여 충돌을 방지합니다.

3. 게임 실행하기

마지막으로, 위에서 생성한 맵과 게임 로직을 결합하여 게임을 실행할 수 있습니다. 이를 위해 캔버스나 HTML 요소 등을 사용하여 그래픽을 추가하고, 사용자 입력에 반응하도록 게임을 구현할 수 있습니다.

// 게임 실행 함수
function startGame() {
  let map = createMap(10, 10);
  let player = new Player(0, 0);

  // 게임 루프
  function gameLoop() {
    // 게임 상태 업데이트 및 렌더링
  }

  // 사용자 입력 처리
  document.addEventListener('keydown', (event) => {
    // 플레이어 이동 처리
  });

  // 게임 루프 시작
  setInterval(gameLoop, 1000 / 60);
}

위의 코드에서 startGame 함수는 맵과 플레이어를 설정하고, 게임 루프를 실행하는 방법을 보여줍니다.

이제 위의 단계를 따라가면 랜덤 맵을 생성하고 게임을 만들 수 있습니다. 만약 자세한 내용을 더 알고 싶다면, MDN 웹 문서에서 해당 내용을 더 찾아볼 수 있습니다.