지뢰찾기를 만들어보자 #1 - 지뢰 찾기 게임 배경
지뢰 찾기는 단순하지만 정적인 게임이다. 이 게임은 마이크로 소프트 Windows 3.1 부터 기본 제공 게임에 포함되어 있었다. 그래픽 요소가 많은 Windows를 불편하지 않게 사용하려면 커서와 이를 움직이는 마우스를 잘 다뤄야 했는데, 이전 글자 위주의 DOS 환경에서는 마우스보다는 키보드 사용이 더 익숙했기에, 마우스를 이용한 포인터 (마우스 커서) 이동, 좌/우 클릭과 같은 동작을 주로 하는 이 지뢰찾기 게임이 Windows 환경 적응에 도움이 되었다고 한다. 이와 비슷한 것이 오델로, 카드 놀이(솔리테어) 등도 마찬가지다. DOS 시절 타자 연습 프로그램에 포함되어 있던 <산성비>게임도 비슷한 역할이라 볼 수 있다.
이야기가 길어졌는데, 한동안 Windows에 같이 포함되어 있던 지뢰 찾기는 이제 Windows에서 뿐만 아니라 휴대폰에서도 즐길 수가 있고, 심지어 구글 검색으로 지뢰찾기를 검색하면 웹앱으로 즉시 게임을 할 수 있다.
이 지뢰 찾기 웹게임을 하다보니, 한번 만들어보고 싶다는 마음이 들었다. 정성을 들여 만드는게 아니라면 그냥 한 번 만들 수 있지 않을까하는 생각이 들어, 어떤 형태로 만들고 싶은지 부터 정리해 보았다.
- 내가 만들고 싶은 지뢰 찾기 -
1. 웹브라우저로 실행
2. 난이도 조절 가능 : 보드 크기 , 지뢰 갯수
3. 시간 측정
4. mark/dig 구분
5. 모바일 지원
6. 효과음 지원
지뢰 찾기 게임은 기본 논리, 화면 그리고 사용자와의 연결로 구성 된다. 논리는 게임에 필요한 자료 구조의 정의 및 게임 진행을 위한 액션이 주요 내용이다. 지뢰의 랜덤 배치 및 숫자 힌트 정보 구성 방법이 주요 로직이 된다. 그리고, 화면 구성은 게임을 생성하고 사용자의 클릭을 인식해서 그에 맞은 액션으로 이어져야 하므로 최대한 간단한 형태가 되어야 한다.
단순한 웹앱이라 하더라도 scratch 부터 시작하에는 부담이 되어 몇 가지 game engine이 될만한것이 있는지 찾아 보았다:
https://blog.logrocket.com/top-6-javascript-and-html5-game-engines/
Top 6 JavaScript and HTML5 game engines - LogRocket Blog
In this guide, we'll explore the top six JS/HTML5 game engines, ranked by number of GitHub stars, and walk you through how to use them.
blog.logrocket.com
게임 엔진으로 찾았더니 대부분 3D를 기반으로 하는 내용이 쏟아져 나왔다. 지뢰찾기처럼 단순한 게임에 사용하기에는 너무 복잡하게 되는 것 같다는 생각이 들어서 좀 더 간단한 방법이 없을지 찾아 보았는데, 그나마 가장 간단한 방법이 HTML5의 Canvas를 이용하는 것이었다.
다음 예제는 벽돌깨기로 알려진 breakout 게임을 HTML5 Canvas를 이용해서 만든 것인데, 주기적으로 화면을 그리는 상태에서 사용자의 입력에 대한 변화 및 공의 움직임에 변경 그리고 공의 궤적 및 주요 요소에 대한 충돌 탐지 등에 대한 처리가 주된 내용이다:
https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
2D breakout game using pure JavaScript - Game development | MDN
In this step-by-step tutorial we create a simple MDN Breakout game written entirely in pure JavaScript and rendered on HTML <canvas>.
developer.mozilla.org
물론 Pure JavaScript가 아닌 Parser라는 게임 엔진을 이용한 예제도 같이 제공되고 있지만, 나중에 도전해 보기로 하고 이번 지뢰 찾기는 HTML5 Canvas를 배우는셈으로 한 번 만들어 보고자 한다.