[지뢰찾기 게임만들기] javascript로 구현한 지뢰찾기 게임

개발환경 : window10

사용언어 : html, css, javascript

 

필요에 의해서 간단히 웹으로 간단한 지뢰찾기 게임을 구현해보았습니다.

기존 클래식 지뢰찾기는 마우스 좌우를 동시에 클릭하면 해당 주변의 셀이 지뢰인지 아닌지에따라 셀이 클릭되는 효과가 있었는데 그부분을 제외하고는 클래식 지뢰찾기와 거의 같이 구현하려고 노력했습니다.

 

어려운점은 2가지가 있었습니다.

 

1. 클릭했을때 주변의 셀에 지뢰가 몇개가 있는지 표시하는 로직

2. 현재 클릭한 셀이 주변 지뢰개수가 0이고 주변에 지뢰개수가 0인 셀이 연속적으로 눌러져서 주변에 지뢰가 있는 셀까지 퍼져가는 클릭효과 구현하기.

 

첫번째는 script태그 맨 위부분에 randomArr라는 지뢰들의 셀 id값을 저장하고 있는 배열입니다. 이 배열안에 있는 id를 가진 셀은 지뢰이며 주변 셀들을 파악하여 data-mine이라는 속성이 true인 셀의 갯수를 표시해주었습니다.
그 때 사용한 로직이 클릭한셀의 윗줄 3개의 시작번호는 내 id 번호보다 -11 차이가 나게됩니다. 이는 음수일 경우(1의자리수 클릭) 주변셀에서 제외를 해주어야하고, 나보다 10의자리가 -1 차이나야합니다. (1번대 클릭한 경우 제외 해주기위해)
클릭한 셀의 줄 중에서 내가 클릭한 셀을 제외하고 가져오면 됩니다. 1번대를 클릭했을 때처럼 벗어나는 부분은 
var isMeLastCondition = (Math.floor(me/10) - Math.floor(meLineNum/10) == 0); 다음과 같이 10의 자리수가 같은지 체크합니다. 또한 var isNotMe = (meLineNum !=me); 셀의 id값이 클릭한 셀이어선 안됩니다.
아래줄도 비슷한 방식으로 아랫줄은 100이상이면 주변 셀에서 제외하고, 10의 자리가 하나 커야합니다. 또한 아랫줄 3개의 시작번호는 내 번호보다 +9 차이가나게 됩니다.
위의 조건들을 모두 만족하는 주변셀의 개수를 세어 반환하는 메소드를 만들었습니다.(returnMineNum)
if(nowMeBlock.getAttribute("data-mine")=="true"){
result++;
}
두번째는 위의 조건문을 처리하고 나서 새로운 조건문을 두었습니다.

//flag는 맨처음 div태그에 데이터를 초기화할때 flag타는 부분은 실행 안되게 하기 위함. -> 이부분은 초기화할때 실행안하기 위해.
if(flag && (nowMeBlock.getAttribute("data-minenum") == "0" || nowMeBlock.getAttribute("data-mine") =="false")){
              var customEvent = document.createEvent('Event');
              customEvent.initEvent('mousedown',false,true);
              nowMeBlock.dispatchEvent(customEvent);
}
mousedown이 일어나서 해당 로직이 실행된 경우는 flag는 true로 들어오게 됩니다. 현재 블럭이 0이거나 마인이 아니면 현재 블럭의 주변 블럭(조건에 해당하는) mousedown이벤트를 발생시켜 클릭한 효과를 내어 주변 지뢰갯수가 0이 아닌 셀이 등장할 때까지 셀이 클릭되게 됩니다.
결국에는 주변 마인이 있는 셀을 만나게 되어 모든 stack 구조로 실행된 메소드들은 종료하게 되고 주변 마인이 0개인 셀을 영역으로하는 클릭효과가 나타나게 됩니다.

 

소스를 직접 보고싶으신 분은 깃허브주소 남기니 확인해주시면 감사드립니다.

 

관련 깃허브 : https://github.com/WooSungHwan/Mineweaver

WooSungHwan/Mineweaver