[javascript] 자바스크립트로 메모리 퍼즐 게임 만들기

14 Dec 2023

javascript

메모리 퍼즐 게임은 재미있고 도전적인 퍼즐 게임으로, 사용자가 일치하는 그림 쌍을 찾는 데 집중할 수 있도록 합니다. 이번 블로그에서는 순수 자바스크립트를 사용하여 간단한 메모리 퍼즐 게임을 만드는 방법을 알아보겠습니다.

프로젝트 설정

우선, 프로젝트를 시작하기 위해 HTML, CSS 및 JavaScript 파일을 생성해야 합니다. 다음은 간단한 프로젝트 구조의 예시입니다.

<!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>Memory Puzzle Game</title>
</head>
<body>
  <div class="game-container"></div>
  <script src="script.js"></script>
</body>
</html>

게임 로직 구현

게임 보드 생성

자바스크립트 파일을 사용하여 게임 보드를 생성합니다. 예를 들어, 4x4 격자 모양의 보드를 생성하는 함수는 다음과 같을 수 있습니다.

function createBoard(rows, cols) {
  const numPairs = (rows * cols) / 2;
  const symbols = ['⭐', '❤️', '🌈', '⚡', '☀️', '☁️', '☄️', '🌊']; // 그림을 나타내는 심볼들

  // 심볼 배열을 무작위로 섞음
  symbols.sort(() => Math.random() - 0.5);

  const board = [];
  for (let i = 0; i < rows; i++) {
    const row = [];
    for (let j = 0; j < cols; j++) {
      const card = { symbol: symbols.pop(), isFlipped: false };
      row.push(card);
    }
    board.push(row);
  }

  return board;
}

const gameBoard = createBoard(4, 4);

카드 클릭 및 일치 검사

이어서, 카드를 클릭했을 때의 동작과 일치하는 카드인지를 검사하는 로직을 구현합니다.

function handleCardClick(row, col) {
  const card = gameBoard[row][col];
  if (card.isFlipped) return; // 이미 뒤집힌 카드인 경우

  card.isFlipped = true; // 카드를 뒤집음
  // TODO: 뒤집은 카드를 화면에 표시

  // TODO: 일치하는 카드인지 검사
  // ...

  // TODO: 일치하지 않는 경우, 일정 시간 후 카드를 다시 뒤집음
  // ...
}

게임 완료 검사

마지막으로, 모든 카드가 맞춰졌는지를 확인하고 게임이 종료되었는지를 검사하는 함수를 구현합니다.

function isGameComplete() {
  return gameBoard.every(row => row.every(card => card.isFlipped));
}

if (isGameComplete()) {
  // TODO: 게임 종료 처리
}

이제 위와 같은 방식으로 자바스크립트를 사용하여 간단한 메모리 퍼즐 게임을 만들 수 있습니다. 사용자 경험을 향상시키기 위해 CSS를 사용하여 카드를 스타일링하고, setTimeout 또는 requestAnimationFrame을 사용하여 일치하지 않는 카드를 다시 뒤집는 시간을 지정할 수 있습니다.

기본적인 메모리 퍼즐 게임을 구현했다면, 더 많은 기능을 추가하여 게임을 발전시킬 수 있습니다.

이상으로, 자바스크립트로 메모리 퍼즐 게임을 만드는 방법에 대해 알아보았습니다. 즐겁게 코딩해보세요!