지뢰찾기 맵을 그렸으니 이제는 맵을 클릭했을 때 이뤄지는 로직을 추가하자.


첫번째 마우스 우측 버튼을 클릭한 경우, 깃발 꽂아 보자.


현재 HTML에서 개발되고 있어서 브라우저에서 실행되기 때문에


마우스 우측 버튼 클릭 시, 화면에 뜨는 팝업 메뉴를 안 뜨도록 처리하자.


1
2
3
4
    </script>
    <body onload="initMineArr();" oncontextmenu="return false;">
    <table id="mineMapTable"></table>
    </body>
cs


body에 oncontextmenu 속성에 return false를 주면 


마우스 우측 버튼 클릭시 팝업 메뉴를 제거할 수 있다.



지뢰찾기 지도 그리는 함수에 


마우스 좌측 클릭 이벤트가 발생하는 경우, 


맵에 가려진 힌트나 지뢰를 보여주는 함수를 호출하도록 처리한다.


마우스 우측 클릭 이벤트가 발생하는 경우, 깃발을 꽂거나 제거하는 함수를 호출 하도록 처리한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    //지뢰찾기 지도 그리기
    function drawMineMap(N){    
        var htmlTag = "";
        var tdId = "";
        var pos = 1;
        for(var i = 0; i < N; i++){
            htmlTag += "<tr>"
            for(var j = 0; j < N; j++){
                tdId = i + "" + j
                htmlTag += "<td><img id='img" + pos 
                         + "' src='mapTile.PNG' " + 
                         + "onclick='stepMine(" + pos + "," + N + ");'" 
                         + "oncontextmenu='putFlag(" + pos + ")'></td>";
                pos++;
            }
            htmlTag +="</tr>";
        }
        document.getElementById("mineMapTable").innerHTML = htmlTag;        
    }
cs

 

깃발을 꽂는 함수는 두번째 클릭한 경우, 다시 깃발을 해제하도록 아래와 같이 처리한다.


1
2
3
4
5
6
7
8
    function putFlag(pos){
        var imgName = document.getElementById("img" + pos).src;
        if(imgName.indexOf("flag.PNG"> -1){
            document.getElementById("img" + pos).src="mapTile.PNG";
        }else{
            document.getElementById("img" + pos).src="flag.PNG";
        }
    }
cs


힌트나 지뢰를 보여주는 함수의 경우, 총 3가지의 경우를 고려해야 하는데


1. 현재 클릭한 지점에 지뢰와 힌트 둘다 없는 경우

2.현재 클릭한 지점에 힌트가 있는 경우

3.현재 클릭한 지점에 지뢰가 있는 경우


위와 같은 3가지가 발생할 수 있겠다.


1번의 경우, 많은 것을 생각해야 한다. 지뢰나 힌트가 없기 때문에 


그 주위의 힌트가 나올때까지 맵을 모두 해제해야 하기 때문이다.


우선 간단하게 클릭한 경우, 숨겨진 힌트나 지뢰 정보를 표시하는 것까지만 구현해 보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
    function stepMine(pos, N){
        var posy = Math.floor((pos - 1/ N);
        var posx = Math.floor((pos - 1) % N);
        var tileId = mineArr[posy][posx];
        
        //현재 클릭한 지점에 지뢰와 힌트 둘다 없는 경우
        
        //현재 클릭한 지점에 힌트가 있는 경우
        
        //현재 클릭한 지점에 힌트가 있는 경우
        
        document.getElementById("img" + pos).src=getImgName(tileId);
    }
    
    function getImgName(tileId){
        var imgName = "";
        switch(tileId)
        {            
            case 'A'
                imgName="mine.PNG";
                break;
            case '0':
                imgName="empty.PNG";
                break;
            case '1':
                imgName="hint1.PNG";
                break;
            case '2':
                imgName="hint2.PNG";
                break;
            case '3':
                imgName="hint3.PNG";
                break;
            case '4':
                imgName="hint4.PNG";
                break;
            case '5':
                imgName="hint5.PNG";
                break;
            case '6':
                imgName="hint6.PNG";
                break;
            case '7':
                imgName="hint7.PNG";
                break;
            case '8':
                imgName="hint8.PNG";
                break;
        }
        return imgName;
    }
cs



블로그 이미지

스푸79

댓글을 달아 주세요