딴따라 제퍼의 개발 유랑기

퍼즐게임 (HTML, JS) 본문

Repository

퍼즐게임 (HTML, JS)

dev_zephyr 2021. 1. 27. 19:03

나는.. 포켓몬 151마리일때까지밖에 모른당..

 

script들을 파일로 나눠서 모듈화하는 법을 배웠다면

좀 더 보기 편했을 것 같은데..

풋풋하다.

 

 

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <style>
        * {
            font-family: '나눔고딕';
        }
        body {
            background-color: beige;
        }
        #puzzle {
            /* border: 1px solid black; */
            border-radius: 10px;
            width: 400px;
            height: 400px;
            margin: 0 auto;
        }
        div.cell {
            /* border: 1px solid rgb(252, 178, 42); */
            width: 100px;
            height: 100px;
            line-height: 100px;
            overflow: hidden;
            float: left;
        }
        div.cell ul {
            position: relative;
            /* border: 1px solid rgb(123, 123, 255); */
            width: 200px;
            height: 100px;
            padding: 0;
            margin: 0;
            list-style-type: none;
            left: -100px;
            transition: left .2s ease-in;
        }
        div.cell ul li {
            width: 100px;
            height: 100px;
            float: left;
            text-align: center;
            line-height: 100px;
        }
        div.cell ul li:nth-child(1) {
            background-color: rgba(255, 175, 222, 0.466);
            border-radius: 8px;
            
        }
        div.cell ul li:nth-child(2) {
            background-color: rgba(162, 255, 190, 0.637);
            color: rgba(162, 255, 190, 0.637);
            border-radius: 8px;
            
        }
        div.cell ul li img {
            width: 90%;
            height: 90%;
            border-radius: 5px;
        }
        #status {
            width: 400px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: rgba(118, 187, 187, 0.979);
            color: white;
            font-size: 20px;
            margin: 2px auto;
            border-radius: 10px;
        }
        #btn_wrap {
            text-align: center;
        }
        .button {
            display: inline-block;
            border-radius: 4px;
            background-color: #fd815b;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 20px;
            padding: 10px;
            width: 200px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }

        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        .button span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

        .button:hover span {
            padding-right: 25px;
        }

        .button:hover span:after {
            opacity: 1;
            right: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="status">Pokemon 맞추기 게임</div>
        <div id="puzzle"></div>
        <div id="btn_wrap">
            <button class="button" style="vertical-align:middle" onclick="start()"><span>시작 </span></button>
        </div>
        
        <script id="template_cell" type="template/html">
            <div class="cell">
                <ul>
                    <li><img src="poke/ball.png"></li>
                    <li>-1</li>
                </ul>
            </div>
        </script>
    </div>


    <script>
        // 변수 선언 부분
        var isPlay = false; // 게임의 시작을 알리는 변수.
        // 이미지들의 경로 배열
        var pathArr = ['poke/01.png', 'poke/02.png', 'poke/03.png', 'poke/04.png', 
            'poke/05.png', 'poke/06.png', 'poke/07.png', 'poke/08.png', 'poke/ball.png'];
        var successCount = 0;
        var statusEl = document.getElementById('status');
        var template_cell = document.getElementById("template_cell");
        var txtCell = template_cell.innerHTML;
        var puzzle = document.getElementById("puzzle");
        var txtCells = "";
        for(var i=0; i<16; i++) {
            txtCells += txtCell;
        }
        puzzle.innerHTML = txtCells;
        var cells = document.getElementsByClassName("cell");

        // 각각 셀에 0~7까지의 텍스트와 이미지를 넣는다..
        for(var i=0; i<cells.length; i++) {
            // 해당 cell의 li태그를 가져오기
            var numLabel = cells[i].getElementsByTagName("li")[1];
            numLabel.innerHTML = '<img src="' + pathArr[i % (cells.length/2)] + '">' +
                                    i % (cells.length/2);
        }

// 셀의 숫자를 섞어준다.
        for(var cnt=0; cnt<50; cnt++) {
            var i = Math.floor(Math.random()*16);
            var j = Math.floor(Math.random()*16);
            var iLabel = cells[i].getElementsByTagName("li")[1];
            var jLabel = cells[j].getElementsByTagName("li")[1];
            var tmp = iLabel.innerHTML;
            iLabel.innerHTML = jLabel.innerHTML;
            jLabel.innerHTML = tmp;
        }

        for(var i=0; i<cells.length; i++) {
            cells[i].getElementsByTagName("ul")[0].style.left = "0px";
        }

        function start() {
            intro01();
        }

        var intro01 = function intro_01() {
            // 첫번째 쑈
            var performCnt = 0;
            var interval_f1 = setInterval(function() {
                var cell_ul = cells[performCnt].getElementsByTagName("ul")[0];
                cell_ul.style.left = "-100px";
                performCnt++;
                if(performCnt == 16) {
                    intro_02();
                    statusEl.innerText = "성공하길 바래 :)"
                    clearInterval(interval_f1);
                }
            }, 100);
        }

        function intro_02() {
            // 두번째 쑈
            var performCnt = 0;
            var i = 0;
            var j = 0;
            var interval_f2 = setInterval(function() {
                var cell_ul = cells[i + j*4].getElementsByTagName("ul")[0];
                cell_ul.style.left = "0px";
                performCnt++;
                j++;
                if(j == 4) {
                    i++;
                    j = 0;
                }
                if(performCnt == 16) {
                    intro_03();
                    statusEl.innerText = "Are You Ready?"
                    clearInterval(interval_f2);
                }
            }, 100);
        }

        function intro_03() {
            var i = 15;
            var interval_f3 = setInterval(function() {
                console.log(i);
                cells[i--].getElementsByTagName("ul")[0].style.left = "-100px";
                console.log(i);
                cells[i--].getElementsByTagName("ul")[0].style.left = "-100px";
                console.log(i);
                cells[i--].getElementsByTagName("ul")[0].style.left = "-100px";
                console.log(i);
                cells[i--].getElementsByTagName("ul")[0].style.left = "-100px";
                if(i == -1) {
                    intro_04();
                    clearInterval(interval_f3);
                }
            }, 200);

        }
function intro_04() {
            // 1초에 함번씩 콜백함수 기능을 반복한다.
            var count = 4;
            var intervalRef = setInterval(function() {
                count--;
                if(count == 0) {
                    clearInterval(intervalRef);
                    statusEl.innerText = "Go!";
                    // 함수 호출 부분
                    for(var i=0; i<cells.length; i++) {
                        setEventHandler(cells[i]);
                    }
                    isPlay = true;
                    return;
                }
                statusEl.innerText = count;
            }, 1000);

            // 5초 후에 전체 감춰주기
            setTimeout(function() {
                for(var i=0; i<cells.length; i++) {
                    // $(cells[i]).trigger('click');
                    showHideLabel(cells[i]);
                }
            }, 4000);
        }
        
        
        // 각각 셀에 이벤트 등록
        // 함수 선언 부분
        function showHideLabel(cell) {
            var ulTag = cell.getElementsByTagName("ul")[0];
            if(ulTag.style.left == '0px') {
                ulTag.style.left = '-100px';
            } else {
                ulTag.style.left = '0px';
            }
        }

        var tmpCell = null;
        function setEventHandler(cell) {
            cell.addEventListener('click',  function() {
                // 규칙 유효성 check
                if(isPlay) {
                    // 처음 눌렀나? 두번째 눌렀나?
                    if(tmpCell == null) {
                        statusEl.innerText = "";
                        tmpCell = this;
                    } else {
                        if(tmpCell == this) {
                            statusEl.innerText = "같은 셀을 두번 선택했습니다."
                            return;
                        }
                        // 게임 판정 부분
                        var check_1 = tmpCell.getElementsByTagName("li")[1].innerText;
                        var check_2 = this.getElementsByTagName("li")[1].innerText;

                        // 성공했을때
                        if(check_1 == check_2) {
                            statusEl.innerText = "Great!!";
                            successCount++;
                            if(successCount == 8) {
                                finish();
                            }
                        } else { // 툴렸을때
                            statusEl.innerText = "Wrong!";
                            // 다시뒤집기
                            var cell_1 = tmpCell.getElementsByTagName("ul")[0];
                            var cell_2 = this.getElementsByTagName("ul")[0];
                            // showHideLabel(this);
                            cell_2.style.left = "-100px"; 

                            //1.5초 후에 다시 감추기 (0px)
                            setTimeout(function() {
                                cell_1.style.left = "0px"; 
                                cell_2.style.left = "0px"; 
                                clearInterval();
                                return;
                            }, 1000);
                            

                            tmpCell = null;
                            return;
                        }
                        
                        tmpCell = null;
                    }
                    showHideLabel(this);
                }
            }, true);
            $(cell).trigger('click');

        }
function finish() {
            var cnt = 0;
            var flag = true;

            var finish_evt1 = setInterval(function(){
                // 인터벌에선 for문을 못쓰기때문에 하드..
                if(flag) {
                    cells[0].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[2].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[5].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[7].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[8].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[10].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[13].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[15].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[1].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[3].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[4].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[6].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[9].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[11].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[12].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[14].getElementsByTagName("ul")[0].style.left = "-100px";
                    statusEl.innerText = "";
                    flag = false;
                    cnt++;
                } else {
                    cells[0].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[2].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[5].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[7].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[8].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[10].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[13].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[15].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[1].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[3].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[4].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[6].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[9].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[11].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[12].getElementsByTagName("ul")[0].style.left = "0px";
                    cells[14].getElementsByTagName("ul")[0].style.left = "0px";
                    statusEl.innerText = "congratulation!!!!";
                    flag = true;
                    cnt++;
                }
                if(cnt == 10) {
                    cells[1].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[3].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[4].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[6].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[9].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[11].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[12].getElementsByTagName("ul")[0].style.left = "-100px";
                    cells[14].getElementsByTagName("ul")[0].style.left = "-100px";
                    clearInterval(finish_evt1);
                    return;
                }
            }, 500);
             
        }
    </script>


</body>
</html>

 

 

 

 

 

 

저작자표시 (새창열림)

'Repository' 카테고리의 다른 글

계산기 (Java Swing)  (0) 2021.01.27
명품자바 8장 오픈챌린지 (Hangman 게임)  (0) 2021.01.27
명품자바 7장 오픈챌린지 (단어 Quiz 게임)  (0) 2021.01.27
명품자바 5장 오픈챌린지 (Bear와 Fish게임)  (0) 2021.01.27
명품자바 5장 실습문제 12번 (LinkedList)  (0) 2021.01.27
'Repository' Related Articles more
Comments