[javascript] 자바스크립트로 간단한 퍼즐 게임 만들기

14 Dec 2023

javascript

이번에는 자바스크립트를 사용하여 간단한 퍼즐 게임을 만들어 보겠습니다. 이 게임은 3x3 그리드로 이루어져 있고, 각 셀에는 번호가 매겨진 타일이 있습니다. 플레이어는 타일을 이동하여 숫자를 정렬하는 것이 목표입니다.

게임 그리드 생성하기

먼저 HTML과 CSS를 사용하여 게임 보드를 만들고, 각 타일의 초기 위치와 스타일을 설정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>퍼즐 게임</title>
</head>
<body>
  <div class="container">
    <div class="grid">
      <div class="cell">1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
      <div class="cell">4</div>
      <div class="cell">5</div>
      <div class="cell">6</div>
      <div class="cell">7</div>
      <div class="cell">8</div>
      <div class="cell empty"></div>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-gap: 5px;
}

.cell {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.empty {
  visibility: hidden;
}

타일 이동하기

이제 자바스크립트를 사용하여 타일을 이동할 수 있는 기능을 추가합니다.

document.addEventListener('DOMContentLoaded', function() {
  const cells = document.querySelectorAll('.cell');
  let emptyCell = 9;

  cells.forEach((cell, index) => {
    cell.addEventListener('click', () => {
      if (isMovable(index)) {
        swapCells(index, emptyCell);
        emptyCell = index;
      }
    });
  });

  function isMovable(index) {
    // implement logic to check if the clicked tile is adjacent to the empty tile
  }

  function swapCells(index1, index2) {
    // swap the positions of the cells at index1 and index2
  }
});

승리 조건 확인하기

모든 타일이 올바른 순서로 정렬되었는지 확인하여 플레이어가 이겼는지 여부를 판단합니다.

function checkWin() {
  for (let i = 0; i < cells.length - 1; i++) {
    if (parseInt(cells[i].textContent) !== i + 1) {
      return false;
    }
  }
  return true;
}

이제 퍼즐 게임이 준비되었습니다! 이제 각 타일을 클릭하여 이동시키고, 올바른 순서로 정렬되었는지 확인할 수 있습니다.

게임 그리드 생성하기

타일 이동하기

승리 조건 확인하기

참고 자료