카드게임(수정)

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{
            width:110px;
            height:160px;
        }
    </style>
</head>
<body>
    <button>보이기</button>
    <button>뒤집기</button>
    <button>감추기</button>
    <button>섞기</button>
    <button>초기화</button>
    <br><br>
    <div id="cards">
        
    </div>
 
    <script>
        // 전역 변수 선언 - 값 확인이 쉬움
        // 
        var arr=[];
        var compare=null;   
        var isShuffleClick = false;
        var beforeIndex = 0;
        backImg = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVFQUO-DXUXZEWfmkA9YwXlFNKzixlqvLlC9KgNmL7QLSu56Fj";
        window.onload=function(){
            var tmp='';
 
            for(var j=1;j<=4;j++)
                for(var i=1;i<=13;i++)
                    tmp+='<img src="cardImg/'+j+'_'+i+'.png" onclick=pair('+(j-1)+','+(i-1)+') alt="">&nbsp;';
            
 
            
            var divTag=document.getElementById('cards');
            divTag.innerHTML=tmp;
 
            addEventBtns();
 
            var imgs = document.getElementsByTagName('img');
            // for(var i=0;imgs.length;i++){
            //     imgs[i] = cardOnclick();
            // }
            
            
        }
 
        function show(){
            if(arr.length == 0){
                arrSetting();
            }
            
            var imgs = document.getElementsByTagName('img');
 
            for(var i=0;i<imgs.length;i++){
                imgs[i].src = arr[i];
                imgs[i].style.visibility ="visible";
                
            }
        }
        
        function hide(){
            var imgs = document.getElementsByTagName('img');
            for(var i=0;i<imgs.length;i++){
                imgs[i].src=backImg;
            }
        }
 
        function hidden(){
            var imgs = document.getElementsByTagName('img');
            for(var i=0;i<imgs.length;i++){
                imgs[i].style.visibility ="hidden";
            }
        }
 
        function shuffle(){
            // 1. 섞을 수 있도록 isShuffleClick값 true로 설정
            isShuffleClick = true;
            // 2. 섞은 카드를 저장하는 배열 설정
            arrSetting();
            // 4. img의 src를 배열의 내용으로 구성한다.
            
 
    }
    
    // 배열 초기 설정
    function arrSetting(){
        imgTags = document.getElementsByTagName('img');
            // 1. 배열을 생성한다.
            var path = 'cardImg/';
            var k=0;
            // 2. 배열을 초기화 한다.
            for(i=0;i<4;i++)
                for(j=0;j<13;j++){
                    arr[k++] = path+(i+1)+'_'+(j+1)+'.png';
                }
            
            // 3. 섞기 버튼을 누르면 배열을 섞는다.
            if(isShuffleClick){
                arr.sort((a,b)=> Math.random()-0.5);
            }
 
            // 4. 카드 앞면이 보일 때만 섞인 카드를 보여준다.
            if(imgTags[0].src != backImg){
                for(i=0;i<imgTags.length;i++){
                    imgTags[i].src = arr[i];
                }
            }
    }
 
    // 카드 onclick
    function pair(j,i){
        // 1. 받은 카드 위치를 저장한다.
        var index = (j*13)+i;
        // 1-1. 카드의 값을 저장해놓은 배열을 가져온다.
        if(arr.length==0){
            arrSetting();
        }
        // 2. 클릭한 카드의 앞면을 보여준다.
        imgTags[index].src = arr[index];
        // 3. 비교할 카드가 있으면
        if(compare != null){
            if(compare != i) {
                imgTags[beforeIndex].src = backImg;
                imgTags[index].src = backImg;
            }
            compare = null;
        }else{
            compare = i;
            beforeIndex = (j*13)+i;
        }
 
 
    }
 
    function initialize(){
        isShuffleClick = false;
        arrSetting();
 
    }
    //  버튼에 onclick 기능 추가
    function addEventBtns(){
        // 1. 버튼을 찾는다. - querySelectorAll
        var btns = document.querySelectorAll('button');
 
        // 2. 버튼에 onclick 기능을 추가한다.
        btns[0].onclick=show;
        btns[1].onclick=hide;
        btns[2].onclick=hidden;
        btns[3].onclick=shuffle;
        btns[4].onclick=initialize;
    }
 
 
    </script>
</body>
</html>
 
Colored by Color Scripter
cs