카드 맞추기 게임

카드 맞추기 게임
2020. 1. 30. 23:24ㆍ개발노트
<!DOCTYPE html>
<html>

<head>
    <button type="button" onclick="button1_click()">게임시작</button>
</head>

<body>

    <h2>카드맞추기게임</h2>
    <table border>
        <tr>
            <td><img src="http://image.sportsseoul.com/2017/12/07/news/20171207013514_2.jpg" width=100 height=100></td>
            <script>
                var arrsame = new Array();
                var arrId = new Array();
                var k = 0;
                var point = 0;
                var arrNum = new Array();
                arrNum[0] = "http://image.sportsseoul.com/2017/12/07/news/20171207013514_2.jpg";
                arrNum[1] = "http://www.city.kr/./files/attach/images/238/055/295/015/2b50e7ce0e7308694eba7d937628579e.jpg";
                arrNum[2] = "https://img.insight.co.kr/static/2017/10/10/700/3qq998d5x3ire7qynj72.jpg";
                arrNum[3] = "http://radiokorea.com/images/news/2018/07/17/293172/1.jpg";
                arrNum[4] = "http://papers.co/wallpaper/papers.co-hq31-iu-girl-pink-kpop-singer-asian-celebrity-music-6-wallpaper.jpg";
                arrNum[5] = "http://img.sbs.co.kr/newsnet/etv/upload/2018/09/12/30000612826_700.jpg";
                arrNum[6] = "https://dispatch.cdnser.be/wp-content/uploads/2017/12/20171227221249_1.png";
                arrNum[7] = "https://t1.daumcdn.net/cfile/tistory/995499415BA82B591F";
                arrNum[8] = "http://image.sportsseoul.com/2017/12/07/news/20171207013514_2.jpg";
                arrNum[9] = "http://www.city.kr/./files/attach/images/238/055/295/015/2b50e7ce0e7308694eba7d937628579e.jpg";
                arrNum[10] = "https://img.insight.co.kr/static/2017/10/10/700/3qq998d5x3ire7qynj72.jpg";
                arrNum[11] = "http://radiokorea.com/images/news/2018/07/17/293172/1.jpg";
                arrNum[12] = "http://papers.co/wallpaper/papers.co-hq31-iu-girl-pink-kpop-singer-asian-celebrity-music-6-wallpaper.jpg";
                arrNum[13] = "http://img.sbs.co.kr/newsnet/etv/upload/2018/09/12/30000612826_700.jpg";
                arrNum[14] = "https://dispatch.cdnser.be/wp-content/uploads/2017/12/20171227221249_1.png";
                arrNum[15] = "https://t1.daumcdn.net/cfile/tistory/995499415BA82B591F";
                function button1_click() {
                    arrNum.sort(() => Math.random() - 0.5);
                    //var intRandom=Math.round(Math.random()*1);
                    var _a = 0;
                    var b = 0;
                    _imgNum = _a;

                    img = "https://i1.wp.com/review.wti.or.kr/wp-content/uploads/2015/07/%EB%AC%BC%EC%9D%8C%ED%91%9C.jpg?resize=200%2C252";
                    document.write("<table border>");
                    for (i = 0; i < 4; i++) {
                        document.write("<tr>");
                        for (j = 0; j < 4; j++) {

                            document.write("<td><img id=" + _imgNum + " onclick=\"image_onclick(" + b + ")\" src=" + img + " width=100 height=100></td>");
                            _imgNum++;
                            b++;
                        }
                        document.write("</tr>");
                    }
                    document.write("</table>");
                }
                function image_onclick(Num) {
                    //var arrsame = new Array();
                    //var arrId = new Array();
                    //var k =0;
                    document.getElementById(Num).src = arrNum[Num];
                    arrsame[k] = arrNum[Num];
                    arrId[k] = Num;
                    console.log(k);
                    if (k == 0) {
                        k++;
                    }
                    else {
                        k = 0;
                    }
                    //arrsame.push(arrNum[Num]);
                    //arrId.push(Num);


                    console.log(arrId[0]);
                    console.log(arrId[1]);
                    console.log(arrsame.length);
                    if (arrsame.length == 2) {

                        if (arrsame[0] == arrsame[1]) {

                            point++
                            //arrsame=[];
                            arrsame.length = 0;
                        }
                        else {

                            setTimeout(function () {

                                document.getElementById(arrId[0]).src = "https://i1.wp.com/review.wti.or.kr/wp-content/uploads/2015/07/%EB%AC%BC%EC%9D%8C%ED%91%9C.jpg?resize=200%2C252";
                                document.getElementById(arrId[1]).src = "https://i1.wp.com/review.wti.or.kr/wp-content/uploads/2015/07/%EB%AC%BC%EC%9D%8C%ED%91%9C.jpg?resize=200%2C252";
                            }, 300); //1초 너무느려서 0.3초로..
                            arrsame.length = 0;
                        }
                    }
                    if (point == 8) {
                        alert('모든 짝이 맞춰졌습니다.');
                        window.location.reload();
                    }
                }


            </script>


</body>

</html>