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

[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://k.kakaocdn.net/dn/bQ6kXN/btqytUfMaxI/HTk491pt1SwqY1af6JzuMk/img.png",    //1
        "https://k.kakaocdn.net/dn/bQ6kXN/btqytUfMaxI/HTk491pt1SwqY1af6JzuMk/img.png",    //1
        "https://k.kakaocdn.net/dn/b08PZJ/btqyuFJcLkb/XEpkn30xP0AYPy6rIBkWA1/img.png",    //2
        "https://k.kakaocdn.net/dn/b08PZJ/btqyuFJcLkb/XEpkn30xP0AYPy6rIBkWA1/img.png",    //2
        "https://k.kakaocdn.net/dn/qO3kX/btqyseffPv5/i7OmaF3luaUn10q2JoS1jk/img.png",    //3
        "https://k.kakaocdn.net/dn/qO3kX/btqyseffPv5/i7OmaF3luaUn10q2JoS1jk/img.png",    //3
        "https://k.kakaocdn.net/dn/SzEWV/btqystwpQZv/JHt2IXe8nBbv6va8bxDUG1/img.png",    //4
        "https://k.kakaocdn.net/dn/SzEWV/btqystwpQZv/JHt2IXe8nBbv6va8bxDUG1/img.png",    //4
        "https://k.kakaocdn.net/dn/b1FBNs/btqyse7j4Ti/Du5SslS2t3y5MJ5QsIzG91/img.png",    //5
        "https://k.kakaocdn.net/dn/b1FBNs/btqyse7j4Ti/Du5SslS2t3y5MJ5QsIzG91/img.png",    //5
        "https://k.kakaocdn.net/dn/D6vnM/btqysMidIzs/FKE6fbKTGUdJZ82OGIkL21/img.png",    //6
        "https://k.kakaocdn.net/dn/D6vnM/btqysMidIzs/FKE6fbKTGUdJZ82OGIkL21/img.png",    //6
        "https://k.kakaocdn.net/dn/cKoyzY/btqyuFJcRtb/piDiU8LwnUrlACkVJctLJ1/img.png",    //7
        "https://k.kakaocdn.net/dn/cKoyzY/btqyuFJcRtb/piDiU8LwnUrlACkVJctLJ1/img.png",    //7
        "https://k.kakaocdn.net/dn/yIy69/btqyu9J3Zuj/8IrrtQKtWTat9aUClmRl4k/img.png",    //8
        "https://k.kakaocdn.net/dn/yIy69/btqyu9J3Zuj/8IrrtQKtWTat9aUClmRl4k/img.png"    //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://k.kakaocdn.net/dn/bmXmvw/btqywbVaFjk/df2UZef42dTGq1EpEuwQ2k/img.png");
        jQuery("#image_" + val).attr("src","https://k.kakaocdn.net/dn/bmXmvw/btqywbVaFjk/df2UZef42dTGq1EpEuwQ2k/img.png");
        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://k.kakaocdn.net/dn/bmXmvw/btqywbVaFjk/df2UZef42dTGq1EpEuwQ2k/img.png' id='image_" + i + "' onclick='chk_num(" + i + ")'></td>";
            }else if( i < 9 ) {
                num_html_2 += "<td><img src='https://k.kakaocdn.net/dn/bmXmvw/btqywbVaFjk/df2UZef42dTGq1EpEuwQ2k/img.png' id='image_" + i + "' onclick='chk_num(" + i + ")'></td>";
            }else if( i < 13 ) {
                num_html_3 += "<td><img src='https://k.kakaocdn.net/dn/bmXmvw/btqywbVaFjk/df2UZef42dTGq1EpEuwQ2k/img.png' id='image_" + i + "' onclick='chk_num(" + i + ")'></td>";
            }else{
                num_html_4 += "<td><img src='https://k.kakaocdn.net/dn/bmXmvw/btqywbVaFjk/df2UZef42dTGq1EpEuwQ2k/img.png' 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>