본문 바로가기
Develop/JavaScript & JQuery

카드게임

by jaekk 2018. 6. 3.


카드게임


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
<!DOCTYPE html>
<html lang="en">
<!--
#####################################################
#   1. 작성일자: 18.06.03 
# 2. 작성자 : 장민정
#   3. 제목    : 카드 게임 
#   4. 기능    
#        1) 보이기 : 카드 앞면 
#        2) 뒤집기 : 카드 뒷면 
#        3) 감추기 : 카드 안보이게 
#        4) 섞기   : 카드 섞기
#        5) 짝맞추기: 같은 무늬 카드 2장 맞추기
###################################################
-->
<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>
</head> 
<body>
    <button onclick=show()>보이기</button>
    <button onclick=hide()>뒤집기</button>
    <button onclick=hidden1()>감추기</button>
    <button onclick=shuffle()>섞기</button>
    <br><br>
    <!-- <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkuYf17hRaiVx0YqFcNNm0JaaXYIkI2QAR6P-g7PVWVrEl0VPh" alt="">
    <br> -->
    <div id="imgCard">
        <img src="C:\\cardImg\\1_1.png" alt="" onclick=pair(imgArray[0],0)>
        <img src="C:\\cardImg\\1_2.png" alt="" onclick=pair(imgArray[1],1)>
        <img src="C:\\cardImg\\1_3.png" alt="" onclick=pair(imgArray[2],2)>
        <img src="C:\\cardImg\\1_4.png" alt="" onclick=pair(imgArray[3],3)>
        <img src="C:\\cardImg\\1_5.png" alt="" onclick=pair(imgArray[4],4)>
        <img src="C:\\cardImg\\1_6.png" alt="" onclick=pair(imgArray[5],5)><br>
        <img src="C:\\cardImg\\1_7.png" alt="" onclick=pair(imgArray[6],6)>
        <img src="C:\\cardImg\\1_8.png" alt="" onclick=pair(imgArray[7],7)>
        <img src="C:\\cardImg\\1_9.png" alt="" onclick=pair(imgArray[8],8)>
        <img src="C:\\cardImg\\1_10.png" alt="" onclick=pair(imgArray[9],9)>
        <img src="C:\\cardImg\\1_11.png" alt="" onclick=pair(imgArray[10],10)>
        <img src="C:\\cardImg\\1_12.png" alt="" onclick=pair(imgArray[11],11)><br>
        <img src="C:\\cardImg\\1_13.png" alt="" onclick=pair(imgArray[12],12)>
        <img src="C:\\cardImg\\1_1.png" alt="" onclick=pair(imgArray[13],13)>
        <img src="C:\\cardImg\\1_2.png" alt="" onclick=pair(imgArray[14],14)>
        <img src="C:\\cardImg\\1_3.png" alt="" onclick=pair(imgArray[15],15)>
        <img src="C:\\cardImg\\1_4.png" alt="" onclick=pair(imgArray[16],16)>
        <img src="C:\\cardImg\\1_5.png" alt="" onclick=pair(imgArray[17],17)><br>
        <img src="C:\\cardImg\\1_6.png" alt="" onclick=pair(imgArray[18],18)>
        <img src="C:\\cardImg\\1_7.png" alt="" onclick=pair(imgArray[19],19)>
        <img src="C:\\cardImg\\1_8.png" alt="" onclick=pair(imgArray[20],20)>
        <img src="C:\\cardImg\\1_9.png" alt="" onclick=pair(imgArray[21],21)>
        <img src="C:\\cardImg\\1_10.png" alt="" onclick=pair(imgArray[22],22)>
        <img src="C:\\cardImg\\1_11.png" alt="" onclick=pair(imgArray[23],23)><br>
        <img src="C:\\cardImg\\1_12.png" alt="" onclick=pair(imgArray[24],24)>
        <img src="C:\\cardImg\\1_13.png" alt="" onclick=pair(imgArray[25],25)>
        
    </div>
    <!-- <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVFQUO-DXUXZEWfmkA9YwXlFNKzixlqvLlC9KgNmL7QLSu56Fj" id="backCard" alt=""> -->
    
    <script>
    window.onload = function() {
        var btns = document.querySelectorAll('button');
        var imgs = document.querySelectorAll('img');
        var back = document.getElementById('backCard');
        backImg = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVFQUO-DXUXZEWfmkA9YwXlFNKzixlqvLlC9KgNmL7QLSu56Fj";
        // 화면에서 보여질 카드 이외에 사용할 카드
        imgArray = ["C:\\cardImg\\1_1.png","C:\\cardImg\\1_2.png","C:\\cardImg\\1_3.png","C:\\cardImg\\1_4.png","C:\\cardImg\\1_5.png"
        ,"C:\\cardImg\\1_6.png","C:\\cardImg\\1_7.png","C:\\cardImg\\1_8.png","C:\\cardImg\\1_9.png","C:\\cardImg\\1_10.png"
        ,"C:\\cardImg\\1_11.png","C:\\cardImg\\1_12.png","C:\\cardImg\\1_13.png","C:\\cardImg\\1_1.png","C:\\cardImg\\1_2.png","C:\\cardImg\\1_3.png","C:\\cardImg\\1_4.png","C:\\cardImg\\1_5.png"
        ,"C:\\cardImg\\1_6.png","C:\\cardImg\\1_7.png","C:\\cardImg\\1_8.png","C:\\cardImg\\1_9.png","C:\\cardImg\\1_10.png"
        ,"C:\\cardImg\\1_11.png","C:\\cardImg\\1_12.png","C:\\cardImg\\1_13.png"
        ];
        compare = [new Array()];
        flag = 0;
        
        imgs.onclick=pair;
        for(i=0;i<imgs.length;i++) {
            imgs[i].style.width  = '75px';
            imgs[i].style.height = '100px';
        }
    //    imgs[1].style.visibility = hidden;
}
    // 보이기
    function show(){
        var imgs = document.querySelectorAll('img');
        for(var i=0;i<imgs.length;i++){
            imgs[i].hidden = false;
            imgs[i].src = imgArray[i];
        }
    }
    // 뒤집기
    function hide(){
        var imgs = document.querySelectorAll('img');
        for(var i=0;i<imgs.length;i++){
            imgs[i].hidden = false;
            imgs[i].src = backImg;
        }
    }
    // 감추기
    function hidden1(){
        var imgs = document.querySelectorAll('img');
        for(var i=0;i<imgs.length;i++){
            imgs[i].hidden = true;
        }
    }
    // 섞기 
    function shuffle(){
        var imgs = document.querySelectorAll('img');
        imgArray.sort(function(a,b){ return Math.random() - 0.5});
        if(imgs[0].src != backImg){
            for(var i=0;i<imgs.length;i++){
                imgs[i].src = imgArray[i];
            }
        }
    }
    // 짝맞추기
    function pair(src,index){
        if(flag == 2){
            flag = 0;
        }
        var imgs = document.querySelectorAll('img');
        imgs[index].src = imgArray[index];
        compare[flag]=[src,index];
        
        // alert(compare.toString());
        flag++;
        
        setTimeout(function() { 
            if(flag==2 && (compare[0][0] != compare[1][0])){
               imgs[compare[0][1]].src = backImg;
               imgs[compare[1][1]].src = backImg;
               flag=0;
            }else if(flag == 2){
                flag=0;
            } 
        }, 1000)
}
    </script>
</body>
</html>
cs


실행화면


1. 처음 화면



2. 뒤집기



3. 감추기


5. 섞기


6. 카드 맞추기




아쉬운 점

- javascript의 활용성이 낮았음

  javascript의 사용법을 몰라 프로그래밍의 기초를 가지고 하드 코딩을 하였다.

  하드코딩하지않기 위한 javascript 공부가 필요하다.

저작자표시 비영리 변경금지

'Develop > JavaScript & JQuery' 카테고리의 다른 글

jQuery 이벤트  (0) 2018.06.10
JQuery  (0) 2018.06.10
jQuery로 이벤트 다루기(1)  (0) 2018.06.07
카드게임(수정)  (0) 2018.06.04
selector  (0) 2018.06.03

관련글

댓글

티스토리툴바