웹 개발 메모장

[자바스크립트] 같은 그림 맞추기 게임 본문

옛날../자바스크립트

[자바스크립트] 같은 그림 맞추기 게임

도로롱주 2018. 2. 8. 14:37





같은 그림 맞추기 게임


같은 그림 찾기

ready
start 버튼을 눌러주세요




코드입니다.


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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<html>
    <head>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
        <style type="text/css">
        .width500px{width: 450px; display: inline-block;}
        .center{text-align: center;}
        #startBtn{border: none; color: white; background-color: #5AAFFF; width: 80px;padding: 5px; font-weight: bold; cursor: pointer;}
        #cardTable{border-collapse: collapse;}
        #cardTable td{border: 1px solid #5AAFFF; width: 75px; height: 121px; text-align: center; cursor: pointer;}
        #cardTable td img{max-width: 70px;}
        #cardTable td span{font-size: 25pt; font-weight: bold; color: #5AAFFF; display: none;}
        #countDown{background-color: #5AAFFF; color: white; font-size: 20pt;}
        #info{width: 450px; height: 250px; background-color: #DDDDDD; color: white; padding-top: 230px;}
 
        </style>
        <script>
            // 게임 상태
            var gameState = '';
 
            // 열린 카드 src
            var openCardId = '';
            var openCardId2 = '';
 
            // 난수 생성 함수
            function generateRandom (min, max) {
                var ranNum = Math.floor(Math.random()*(max-min+1)) + min;
                    return ranNum;
            }
 
            
            var cards; // 카드 목록
            var score = 0; // 점수
            var openedCtn = 0; // 맞춘 카드 갯수
            
            // 카드 배치
            function setTable(){
                cards = [
                '1.jpg','1.jpg', // 나옹이
                '2.jpg','2.jpg', // 파이리
                '3.PNG','3.PNG', // 꼬부기
                '4.jpg','4.jpg', // 이상해씨
                '5.png','5.png', // 어니부기
                '6.PNG','6.PNG', // 잉어킹
                '7.png','7.png', // 푸린
                '8.png','8.png', // 피카츄
                '9.png','9.png', // 별가사리
                '10.jpg','10.jpg', // 거북왕
                '11.jpg','11.jpg', // 고라파덕
                '12.png','12.png' // 리자드
                ];
                var cardTableCode = '<tr>';                
                for(var i=0;i<24;i++) {
                    if(i>0 && i%6 == 0){
                        cardTableCode += '</tr><tr>';
                    }
                    var idx = generateRandom(0,23-i);
                    var img = cards.splice(idx,1);
 
                    cardTableCode += '<td id="card'+i+'"><img src="/study/tmp/common/images/'+img+'"><span>?</span></td>';
                }
                cardTableCode += '</tr>';
                $('#cardTable').html(cardTableCode);
            }
 
            // 카드 전체 가리기
            function hiddenCards(){
                $('#cardTable td img').hide();
                $('#cardTable td span').show();
            }
 
            // 게임 시작
            function startGame() {
                var sec = 6;
                
                $('#info').hide(); // 안내 문구 가리기
                scoreInit(); // 점수 초기화
                setTable(); // 카드 배치
                
                //카운트 다운
                function setText(){
                    $('#countDown').text(--sec);
                }
 
                //카운트 다운
                var intervalID = setInterval(setText, 1000);
                setTimeout(function(){
                    clearInterval(intervalID);
                    $('#countDown').text('start');
                    hiddenCards();
                    gameState = '';
                }, 6000);
            }
 
 
            // 카드 선택 시
            $(document).on('click', '#cardTable td', function(){
                if(gameState != '') return; // 게임 카운트 다운중일 때 누른 경우 return
                if(openCardId2 != '') return; // 2개 열려있는데 또 누른 경우 return
                if($(this).hasClass('opened')) return; // 열려있는 카드를 또 누른 경우                
                $(this).addClass('opened'); // 열여있다는 것을 구분하기 위한 class 추가
 
                if(openCardId == '') {
                    $(this).find('img').show();
                    $(this).find('span').hide();
                    openCardId = this.id;
                }else {
                    if(openCardId == openCardId2) return; //같은 카드 누른 경우 return
 
                    $(this).find('img').show();
                    $(this).find('span').hide();
                    
                    var openCardSrc = $('#'+openCardId).find('img').attr('src');
                    var openCardSrc2 = $(this).find('img').attr('src');
                    openCardId2 = this.id;
                    
                    if(openCardSrc == openCardSrc2) { // 일치
                        openCardId = '';
                        openCardId2 = '';
                        scorePlus();
                        if(++openedCtn == 12){
                            alert('성공!!\n'+score+'점 입니다!');
                        }
                    }else { // 불일치
                        setTimeout(back, 1000);
                        scoreMinus();
                    }
                }
            });
 
            // 두개의 카드 다시 뒤집기
            function back() {
                $('#'+openCardId).find('img').hide();
                $('#'+openCardId).find('span').show();
                $('#'+openCardId2).find('img').hide();
                $('#'+openCardId2).find('span').show();
                $('#'+openCardId).removeClass('opened');
                $('#'+openCardId2).removeClass('opened');
                openCardId = '';
                openCardId2 = '';
            }
 
            // 점수 초기화
            function scoreInit(){
                score = 0;
                openedCtn = 0;
                $('#score').text(score);
            }
            // 점수 증가
            function scorePlus(){
                score += 10;
                $('#score').text(score);
            }
            // 점수 감소
            function scoreMinus(){
                score -= 5;
                $('#score').text(score);
            }
 
            $(document).on('click', '#startBtn', function(){
                if(gameState == '') {
                    startGame();
                    gameState = 'alreadyStart'
                }
            });
 
 
        </script>
    </head>
    <body class='center'>
        <div class='width500px'>
            <div>
                <h2>같은 그림 찾기</h2>
                <table id='menuTable'>
                    <tr>
                        <td class='alignLeft'>
                            <button id='startBtn'>start</button>
                        </td>
                        <td class='alignRight'>
                            <span>score : <span id='score'>0</span></span>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <div id='countDown'>
                    ready
                </div>
                <table id='cardTable'>
                </table>
                <div id='info'>
                    start 버튼을 눌러주세요<br>
                </div>
            </div>
        </div>
    </body>
</html>
cs







저작자표시

'옛날.. > 자바스크립트' 카테고리의 다른 글

[자바스크립트] Date() 기본 사용 방법  (3) 2018.05.17
[자바스크립트] 간단한 토글(toggle) 버튼 만들기  (2) 2018.02.22
[자바스크립트] snake game (꼬리물기 게임 / 뱀 게임)  (4) 2018.02.05
[JQuery] AJAX 기본 구문 및 예제  (2) 2018.01.16
[자바스크립트] AJAX 란?  (0) 2018.01.15
공유하기 링크
'옛날../자바스크립트' Related Articles more
Comments