HTML로 숫자 퍼즐 게임 구현

 

숫자 퍼즐 게임을 구현하는 방법을 소개하며, Mermaid를 사용해 게임의 로직 흐름을 다이어그램으로 시각화합니다.

숫자 퍼즐 게임이란?

숫자 퍼즐 게임은 4x4 격자에 1부터 15까지의 숫자가 무작위로 배치되고, 빈칸(16번째 칸)을 이용해 숫자를 이동시켜 순서대로 정렬하는 게임입니다. 사용자는 빈칸 옆의 숫자를 클릭해 이동시키며, 최종적으로 1부터 15까지 오름차순으로 배열하면 승리합니다. 이 게임은 순수 HTML, CSS, JavaScript로 구현되며, 티스토리의 HTML 편집 모드에서 실행 가능하도록 설계됩니다.

숫자 퍼즐 게임 구현

이 코드는 게임 보드, 숫자 이동 로직, 승리 조건 확인, 그리고 반응형 스타일을 포함합니다.

숫자 퍼즐 게임

숫자를 이동해 1부터 15까지 순서대로 정렬하세요!

 

 

코드 설명

• HTML: 게임 제목, 퍼즐 보드(#puzzle), 리셋 버튼, 메시지 출력 영역을 포함.
• CSS: 4x4 격자 레이아웃을 grid로 구현하고, 타일 스타일을 정의. 모바일 친화적인 반응형 디자인을 위해 @media 쿼리 사용.
• JavaScript:
  • initBoard: 초기 보드를 생성하고 숫자를 섞음.
  • shuffleBoard: Fisher-Yates 알고리즘으로 숫자를 무작위로 섞음.
  • renderBoard: 보드를 DOM에 렌더링하고 클릭 이벤트 추가.
  • moveTile: 타일 이동 로직으로, 빈칸과 인접한 타일만 이동 가능.
  • checkWin: 보드가 정렬되었는지 확인해 승리 메시지 출력.
  • resetGame: 게임을 초기화.

Mermaid로 게임 로직 시각화

Mermaid를 사용해 숫자 퍼즐 게임의 로직 흐름을 플로우차트로 표현하면 독자들이 게임의 동작 방식을 더 쉽게 이해할 수 있습니다. 아래는 게임 로직의 플로우차트 코드입니다:

```mermaid

flowchart TD A[게임 시작] --> B[보드 초기화] B --> C[숫자 무작위 섞기] C --> D[보드 렌더링] D --> E{사용자 클릭?} E -->|예| F{유효한 이동?} F -->|예| G[타일 이동] F -->|아니오| D G --> H{승리 조건 충족?} H -->|예| I[승리 메시지 출력] H -->|아니오| D E -->|아니오| D I --> J{리셋 버튼 클릭?} J -->|예| B J -->|아니오| I

mermaid.initialize({ startOnLoad: true });```

  ```mermaid
flowchart TD
  A[게임 시작] --> B[보드 초기화]
  B --> C[숫자 무작위 섞기]
  C --> D[보드 렌더링]
  D --> E{사용자 클릭?}
  E -->|예| F{유효한 이동?}
  F -->|예| G[타일 이동]
  F -->|아니오| D
  G --> H{승리 조건 충족?}
  H -->|예| I[승리 메시지 출력]
  H -->|아니오| D
  E -->|아니오| D
  I --> J{리셋 버튼 클릭?}
  J -->|예| B
  J -->|아니오| I
```
    

Mermaid 삽입 방법

```html

flowchart TD A[게임 시작] --> B[보드 초기화]

mermaid.initialize({ startOnLoad: true });```

게임 실행 테스트 및 최적화

• 브라우저 호환성: Chrome, Firefox, Safari에서 테스트해 모든 주요 브라우저에서 정상 작동 확인.
• 모바일 최적화: CSS에서 max-width와 @media 쿼리로 모바일 화면에 맞게 조정.
• 성능: DOM 조작을 최소화하고, onclick 이벤트로 간단한 상호작용 유지.
• 보안: 외부 라이브러리 없이 순수 JavaScript로 작성해 티스토리 보안 정책 준수.

추가 개선 아이디어

• 난이도 조절: 3x3 또는 5x5 격자로 확장해 난이도를 변경.
• 타이머 추가: 게임 시작부터 완료까지의 시간을 측정.
• 이동 횟수 카운트: 사용자의 이동 횟수를 표시해 경쟁 요소 추가.
• 스타일 커스터마이징: 타일 색상이나 애니메이션 추가로 시각적 매력 강화.

마무리

HTML, CSS, JavaScript를 활용하면 숫자 퍼즐 게임과 같은 간단한 웹 게임을 쉽게 구현할 수 있습니다.

다음엔 더 복잡한 게임(예: 벽돌 깨기, 뱀 게임)이나 특정 기능을 추가해보겠습니다. 😊

참고 자료

• Mermaid 공식 문서
• W3Schools: JavaScript Game Tutorials
• MDN Web Docs: HTML5 Canvas