개발자의 끄적끄적

[javascript/jquery] 자바스크립트 카드 짝맞추기 게임 소스 본문

개발/javascript & jquery

[javascript/jquery] 자바스크립트 카드 짝맞추기 게임 소스

효벨 2023. 3. 28. 12:23
728x90
반응형

[javascript/jquery] 자바스크립트 카드 짝맞추기 게임 소스

 

 

자바스크립트로 재미삼아 만들어본 

 

카드 뒤집기 게임입니다!

 

메모리 게임은 아니고, 짝맞추기 게임 스크립트 소스이니

 

출처만 표기해주시고,

 

활용하실 분들은 활용하세요!

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- [if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
<script>
    var startTime;
    var endTime;
    var my_timer;

    var src_arr = new Array(
        "https://blog.kakaocdn.net/dna/bQ6kXN/btqytUfMaxI/AAAAAAAAAAAAAAAAAAAAAKAHE3doxWX9227B3dLRDJhZLaAjSqLLLDhfi2bZ4GRL/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=yo8aCB1uc5LqoCDLEivkCYKQC2E%3D",    //1
        "https://blog.kakaocdn.net/dna/bQ6kXN/btqytUfMaxI/AAAAAAAAAAAAAAAAAAAAAKAHE3doxWX9227B3dLRDJhZLaAjSqLLLDhfi2bZ4GRL/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=yo8aCB1uc5LqoCDLEivkCYKQC2E%3D",    //1
        "https://blog.kakaocdn.net/dna/b08PZJ/btqyuFJcLkb/AAAAAAAAAAAAAAAAAAAAAKI4euDlLNgwtN_Q33IHPKShaL2w5kIPZSaW8VtTsqWs/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=LUsXZAvvYxvzTUysldxH3G%2B4udQ%3D",    //2
        "https://blog.kakaocdn.net/dna/b08PZJ/btqyuFJcLkb/AAAAAAAAAAAAAAAAAAAAAKI4euDlLNgwtN_Q33IHPKShaL2w5kIPZSaW8VtTsqWs/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=LUsXZAvvYxvzTUysldxH3G%2B4udQ%3D",    //2
        "https://blog.kakaocdn.net/dna/qO3kX/btqyseffPv5/AAAAAAAAAAAAAAAAAAAAAOXW7TBziOlGO-WvTQbpahpovAy1APf96mvzqZJRTJ4-/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=TX%2B4mTaBbV%2FkSxOXIRfl4fUelXM%3D",    //3
        "https://blog.kakaocdn.net/dna/qO3kX/btqyseffPv5/AAAAAAAAAAAAAAAAAAAAAOXW7TBziOlGO-WvTQbpahpovAy1APf96mvzqZJRTJ4-/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=TX%2B4mTaBbV%2FkSxOXIRfl4fUelXM%3D",    //3
        "https://blog.kakaocdn.net/dna/SzEWV/btqystwpQZv/AAAAAAAAAAAAAAAAAAAAAB6hxuuwzNR9Y2F79Tcf9P0yCICNXPnFINJXCcQ9i4aN/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=HreALsytHzzBMv5wpe9e%2BLYjwTE%3D",    //4
        "https://blog.kakaocdn.net/dna/SzEWV/btqystwpQZv/AAAAAAAAAAAAAAAAAAAAAB6hxuuwzNR9Y2F79Tcf9P0yCICNXPnFINJXCcQ9i4aN/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=HreALsytHzzBMv5wpe9e%2BLYjwTE%3D",    //4
        "https://blog.kakaocdn.net/dna/b1FBNs/btqyse7j4Ti/AAAAAAAAAAAAAAAAAAAAABY-sagkejFPuWkS6MrYPs9oRPCmJRtLwx69_JucEMAI/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=udONc4CMuZrx7wb2aqDSDOxak6U%3D",    //5
        "https://blog.kakaocdn.net/dna/b1FBNs/btqyse7j4Ti/AAAAAAAAAAAAAAAAAAAAABY-sagkejFPuWkS6MrYPs9oRPCmJRtLwx69_JucEMAI/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=udONc4CMuZrx7wb2aqDSDOxak6U%3D",    //5
        "https://blog.kakaocdn.net/dna/D6vnM/btqysMidIzs/AAAAAAAAAAAAAAAAAAAAACCJ5OTsgBP-cH6A6TYPcsJexv4bg0SWt4DBWZJI7xVN/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=9FrNP%2BmF%2Bwp5n8g6TPIgMPITJaM%3D",    //6
        "https://blog.kakaocdn.net/dna/D6vnM/btqysMidIzs/AAAAAAAAAAAAAAAAAAAAACCJ5OTsgBP-cH6A6TYPcsJexv4bg0SWt4DBWZJI7xVN/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=9FrNP%2BmF%2Bwp5n8g6TPIgMPITJaM%3D",    //6
        "https://blog.kakaocdn.net/dna/cKoyzY/btqyuFJcRtb/AAAAAAAAAAAAAAAAAAAAAJbalJE0hL67Q7OttBi6ur0Of0j4XwswrJH3m7UPAoRD/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=6%2Bu6jJGI15g59wQzBVv89qFBNqA%3D",    //7
        "https://blog.kakaocdn.net/dna/cKoyzY/btqyuFJcRtb/AAAAAAAAAAAAAAAAAAAAAJbalJE0hL67Q7OttBi6ur0Of0j4XwswrJH3m7UPAoRD/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=6%2Bu6jJGI15g59wQzBVv89qFBNqA%3D",    //7
        "https://blog.kakaocdn.net/dna/yIy69/btqyu9J3Zuj/AAAAAAAAAAAAAAAAAAAAAIfrD07SeUKkl-rb605T9pBMc2fsz7pDJFued4Y54ziC/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=WODbJHdiIvRmQGsou60nvK99nhw%3D",    //8
        "https://blog.kakaocdn.net/dna/yIy69/btqyu9J3Zuj/AAAAAAAAAAAAAAAAAAAAAIfrD07SeUKkl-rb605T9pBMc2fsz7pDJFued4Y54ziC/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=WODbJHdiIvRmQGsou60nvK99nhw%3D"    //8
    );

    var start_chk = 0;        // 시작여부 체크
    var click_val = 0;        // 클릭 값 체크
    var last_src = "";        // 직전 src 경로 체크
    var last_val = 0;        // 직전 클릭 값 체크
    var find_cnt = 0;        // 찾은 카운트
    var ing_chk = 0;
    var timer_flag = false;
    var find_timer;

    function start_timer() {
        startTime = new Date().getTime();
        find_timer = setInterval("calc_time()",1);
    }

    function calc_time() {
        if( !timer_flag ) {
            var now_time = new Date().getTime();
            var gap_time = now_time - startTime;
            jQuery("#ing_time").html(gap_time/1000);
        }
    }

    function chk_num(val) {
        if( click_val == 0 ) {
            //startTime = new Date().getTime();
            start_timer();
        }

        if( ing_chk == 1 ) {
            return;
        }

        click_val++;
        jQuery("#image_" + val).attr("src",src_arr[val-1]);
        chk_result(val);
        //setTimeout("chk_result("+val+")", 500);
    }

    // 카드 복원 함수 restore_card(입력값, 직전입력값)
    function restore_card(val, oldval) {
        jQuery("#image_" + oldval).attr("src","https://blog.kakaocdn.net/dna/bmXmvw/btqywbVaFjk/AAAAAAAAAAAAAAAAAAAAAMKrr3FlzyyK4FxcHy9pe_mytcMnyizQFYFgoKOjKJKz/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=IigimC%2Fu5ear4DhU%2BQB6OCNU9cU%3D");
        jQuery("#image_" + val).attr("src","https://blog.kakaocdn.net/dna/bmXmvw/btqywbVaFjk/AAAAAAAAAAAAAAAAAAAAAMKrr3FlzyyK4FxcHy9pe_mytcMnyizQFYFgoKOjKJKz/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=IigimC%2Fu5ear4DhU%2BQB6OCNU9cU%3D");
        ing_chk = 0;
    }

    function chk_result(val) {

        // 지금 클릭한 값과 직전 값 비교하기
        if( last_src == "" ) {
            last_src = src_arr[val-1];
            last_val = val;
            return;
        }else{
            ing_chk = 1;
            if( last_src != src_arr[val-1] ) {
                // 직전값과 일치하지않으면 원상복구
                jQuery("#image_" + val).attr("src",src_arr[val-1]);

                setTimeout("restore_card("+val+","+last_val+")", 300);
                last_src = "";
                last_val = 0;
                //alert("꽝!! 다시 뒤집을꼐요~");
            }else{
                last_src = "";
                last_val = 0;
                find_cnt++;
                ing_chk = 0;
            }
        }

        if( find_cnt >= 8 ) {
            endTime = new Date().getTime();
            var calc_time = (endTime - startTime)/1000;
            clearInterval(find_timer);
            timer_flag = true;
            jQuery("#result_time").html(calc_time + " 초 만에 성공!!!");
            jQuery("#result_time").show();
            jQuery("#ing_time").hide();
            return;
        }
    }

    function shuffle(a) {
        var j, x, i;
        for (i = a.length; i; i -= 1) {
            j = Math.floor(Math.random() * i);
            x = a[i - 1];
            a[i - 1] = a[j];
            a[j] = x;
        }
    }

    function start_game() {
        if( start_chk == 1 ) {
            window.location.reload();
            return;
        }
        start_chk = 1;
        shuffle(src_arr);
        var num_html_1 = "";
        var num_html_2 = "";
        var num_html_3 = "";
        var num_html_4 = "";
        for(var i = 1; i < 17; i++) {
            if( i < 5 ) {
                num_html_1 += "<td><img src='https://blog.kakaocdn.net/dna/bmXmvw/btqywbVaFjk/AAAAAAAAAAAAAAAAAAAAAMKrr3FlzyyK4FxcHy9pe_mytcMnyizQFYFgoKOjKJKz/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=IigimC%2Fu5ear4DhU%2BQB6OCNU9cU%3D' id='image_" + i + "' onclick='chk_num(" + i + ")'></td>";
            }else if( i < 9 ) {
                num_html_2 += "<td><img src='https://blog.kakaocdn.net/dna/bmXmvw/btqywbVaFjk/AAAAAAAAAAAAAAAAAAAAAMKrr3FlzyyK4FxcHy9pe_mytcMnyizQFYFgoKOjKJKz/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=IigimC%2Fu5ear4DhU%2BQB6OCNU9cU%3D' id='image_" + i + "' onclick='chk_num(" + i + ")'></td>";
            }else if( i < 13 ) {
                num_html_3 += "<td><img src='https://blog.kakaocdn.net/dna/bmXmvw/btqywbVaFjk/AAAAAAAAAAAAAAAAAAAAAMKrr3FlzyyK4FxcHy9pe_mytcMnyizQFYFgoKOjKJKz/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=IigimC%2Fu5ear4DhU%2BQB6OCNU9cU%3D' id='image_" + i + "' onclick='chk_num(" + i + ")'></td>";
            }else{
                num_html_4 += "<td><img src='https://blog.kakaocdn.net/dna/bmXmvw/btqywbVaFjk/AAAAAAAAAAAAAAAAAAAAAMKrr3FlzyyK4FxcHy9pe_mytcMnyizQFYFgoKOjKJKz/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=IigimC%2Fu5ear4DhU%2BQB6OCNU9cU%3D' id='image_" + i + "' onclick='chk_num(" + i + ")'></td>";
            }
        }
        jQuery("#tr_1").html(num_html_1);
        jQuery("#tr_2").html(num_html_2);
        jQuery("#tr_3").html(num_html_3);
        jQuery("#tr_4").html(num_html_4);

        var img_arr = jQuery("img");
        var length = img_arr.length;
        for (var i = 0; i < length; i++) {
            var img = img_arr.eq(i);
            var x = 100 + ((i % 3) * 200);
            var y = 100 + (parseInt(i / 3) * 200);
            img_arr.eq(i).css({
                left : x,
                top : y
            });
        }

        jQuery("#img_tbl").show();
    }

    function init_game() {
        window.location.reload();
        //$("#result_time").html("0.000");
        //$("#img_tbl").hide();
    }

</script>
<div style="font-size: 20px;"><input id="btnStart" type="button" value="게임시작" /> <input id="btnStart" type="button" value="초기화" /> <span>0.000</span> <span>0.000</span></div>
<table id="img_tbl" style="display: none;" data-ke-align="alignLeft"></table>

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'개발 > javascript & jquery' 카테고리의 다른 글

[javascript/jquery] XMLHttpRequest readyState 결과표  (0) 2023.04.02
[javascript/jquery] jquery swiper library cdn url 참고 사이트 [링크]  (0) 2023.04.01
[javascript/jquery] 자바스크립트 배열 중복값 개수 구하는 방법 / javascript array duplicate value count  (0) 2023.03.26
[javascript/jquery] javascript 정규식으로 태그 제거하는 방법  (0) 2023.02.26
[javascript/jquery] Identifier 'swiper' has already been declared 오류 해결법  (0) 2023.02.24
'개발/javascript & jquery' Related Articles more
Comments