본문 바로가기

WEB/내맘대로 코딩

틀린그림찾기

지난주 휴가중에 방에서 뒹굴대다가 19금 썸네일에 낚여 틀린그림찾기 겜을 플레이하게 되었는데

어찌된 일이람.. 판이 거듭될수록 19금 이미지가 나오지 않는 것이었다.ㅋㄷ

근데, 시간제한없고 생명감퇴도 없이 넉넉한 시간을 가지고 게임을 즐길 수 있는 그 점 하나만은 대만족!

그래서 19금으로 똑같이 만들어보고 싶은 욕구가 동해 비스무리하게 만들어보았으나 19금 대신 건전하게 채수빈 사진으로 대체 어디가 틀린 부분인지 찾아보시라~ 훗^_^

 

See the Pen ExVVLWV by rainydaymusickr (@rainydaymusickr) on CodePen.

<div class="frame">
    <div class="img">
        <img src="https://lh5.googleusercontent.com/Ry7JUU0qU3-uA4ohX9mkyND4AG3guNAbQsWOv2r3iMjfXmgMJrrNvDIULoJfPBMe6YaAOlDQoxfG07jMUC2R=w1858-h977" alt="">
        <table class="table type1">
            <tbody>
                <tr>
                    <td><button type="button" data-index="1"></button></td>
                    <td><button type="button" data-index="2"></button></td>
                    <td><button type="button" data-index="3"></button></td>
                    <td><button type="button" data-index="4"></button></td>
                    <td><button type="button" data-index="5"></button></td>
                    <td><button type="button" data-index="6"></button></td>
                    <td><button type="button" data-index="7"></button></td>
                    <td><button type="button" data-index="8"></button></td>
                    <td><button type="button" data-index="9"></button></td>
                    <td><button type="button" data-index="10"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="11"></button></td>
                    <td><button type="button" data-index="12"></button></td>
                    <td><button type="button" data-index="13"></button></td>
                    <td><button type="button" data-index="14"></button></td>
                    <td><button type="button" data-index="15"></button></td>
                    <td><button type="button" data-index="16"></button></td>
                    <td><button type="button" data-index="17"></button></td>
                    <td><button type="button" data-index="18"></button></td>
                    <td><button type="button" data-index="19"></button></td>
                    <td><button type="button" data-index="20"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="21"></button></td>
                    <td><button type="button" data-index="22"></button></td>
                    <td><button type="button" data-index="23"></button></td>
                    <td><button type="button" data-index="24"></button></td>
                    <td><button type="button" data-index="25"></button></td>
                    <td><button type="button" data-index="26"></button></td>
                    <td><button type="button" data-index="27"></button></td>
                    <td><button type="button" data-index="28"></button></td>
                    <td><button type="button" data-index="29"></button></td>
                    <td><button type="button" data-index="30"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="31"></button></td>
                    <td><button type="button" data-index="32" data-bool="false"></button></td>
                    <td><button type="button" data-index="33"></button></td>
                    <td><button type="button" data-index="34"></button></td>
                    <td><button type="button" data-index="35"></button></td>
                    <td><button type="button" data-index="36"></button></td>
                    <td><button type="button" data-index="37"></button></td>
                    <td><button type="button" data-index="38"></button></td>
                    <td><button type="button" data-index="39" data-bool="false"></button></td>
                    <td><button type="button" data-index="40"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="41"></button></td>
                    <td><button type="button" data-index="42"></button></td>
                    <td><button type="button" data-index="43"></button></td>
                    <td><button type="button" data-index="44"></button></td>
                    <td><button type="button" data-index="45"></button></td>
                    <td><button type="button" data-index="46"></button></td>
                    <td><button type="button" data-index="47"></button></td>
                    <td><button type="button" data-index="48"></button></td>
                    <td><button type="button" data-index="49"></button></td>
                    <td><button type="button" data-index="50"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="51"></button></td>
                    <td><button type="button" data-index="52"></button></td>
                    <td><button type="button" data-index="53"></button></td>
                    <td><button type="button" data-index="54"></button></td>
                    <td><button type="button" data-index="55"></button></td>
                    <td><button type="button" data-index="56"></button></td>
                    <td><button type="button" data-index="57" data-bool="false"></button></td>
                    <td><button type="button" data-index="58"></button></td>
                    <td><button type="button" data-index="59"></button></td>
                    <td><button type="button" data-index="60"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="61"></button></td>
                    <td><button type="button" data-index="62" data-bool="false"></button></td>
                    <td><button type="button" data-index="63"></button></td>
                    <td><button type="button" data-index="64"></button></td>
                    <td><button type="button" data-index="65"></button></td>
                    <td><button type="button" data-index="66" data-bool="false"></button></td>
                    <td><button type="button" data-index="67"></button></td>
                    <td><button type="button" data-index="68"></button></td>
                    <td><button type="button" data-index="69"></button></td>
                    <td><button type="button" data-index="70"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="71"></button></td>
                    <td><button type="button" data-index="72"></button></td>
                    <td><button type="button" data-index="73"></button></td>
                    <td><button type="button" data-index="74"></button></td>
                    <td><button type="button" data-index="75"></button></td>
                    <td><button type="button" data-index="76"></button></td>
                    <td><button type="button" data-index="77"></button></td>
                    <td><button type="button" data-index="78"></button></td>
                    <td><button type="button" data-index="79"></button></td>
                    <td><button type="button" data-index="80"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="81"></button></td>
                    <td><button type="button" data-index="82"></button></td>
                    <td><button type="button" data-index="83"></button></td>
                    <td><button type="button" data-index="84"></button></td>
                    <td><button type="button" data-index="85"></button></td>
                    <td><button type="button" data-index="86"></button></td>
                    <td><button type="button" data-index="87"></button></td>
                    <td><button type="button" data-index="88"></button></td>
                    <td><button type="button" data-index="89"></button></td>
                    <td><button type="button" data-index="90"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="91"></button></td>
                    <td><button type="button" data-index="92"></button></td>
                    <td><button type="button" data-index="93"></button></td>
                    <td><button type="button" data-index="94"></button></td>
                    <td><button type="button" data-index="95"></button></td>
                    <td><button type="button" data-index="96"></button></td>
                    <td><button type="button" data-index="97"></button></td>
                    <td><button type="button" data-index="98"></button></td>
                    <td><button type="button" data-index="99"></button></td>
                    <td><button type="button" data-index="100"></button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="img">
        <img src="https://lh4.googleusercontent.com/VUQ-K6xnlU2DcuUWN4Xt7wSLibk3oMuvnkEWOzkFxiDGexWfoijU54V1YvrSqWBeJ2j2JVtAEEX0er0_p4Sc=w1417-h977" alt="">
        <table class="table type2">
            <tbody>
                <tr>
                    <td><button type="button" data-index="1"></button></td>
                    <td><button type="button" data-index="2"></button></td>
                    <td><button type="button" data-index="3"></button></td>
                    <td><button type="button" data-index="4"></button></td>
                    <td><button type="button" data-index="5"></button></td>
                    <td><button type="button" data-index="6"></button></td>
                    <td><button type="button" data-index="7"></button></td>
                    <td><button type="button" data-index="8"></button></td>
                    <td><button type="button" data-index="9"></button></td>
                    <td><button type="button" data-index="10"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="11"></button></td>
                    <td><button type="button" data-index="12"></button></td>
                    <td><button type="button" data-index="13"></button></td>
                    <td><button type="button" data-index="14"></button></td>
                    <td><button type="button" data-index="15"></button></td>
                    <td><button type="button" data-index="16"></button></td>
                    <td><button type="button" data-index="17"></button></td>
                    <td><button type="button" data-index="18"></button></td>
                    <td><button type="button" data-index="19"></button></td>
                    <td><button type="button" data-index="20"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="21"></button></td>
                    <td><button type="button" data-index="22"></button></td>
                    <td><button type="button" data-index="23"></button></td>
                    <td><button type="button" data-index="24"></button></td>
                    <td><button type="button" data-index="25"></button></td>
                    <td><button type="button" data-index="26"></button></td>
                    <td><button type="button" data-index="27"></button></td>
                    <td><button type="button" data-index="28"></button></td>
                    <td><button type="button" data-index="29"></button></td>
                    <td><button type="button" data-index="30"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="31"></button></td>
                    <td><button type="button" data-index="32" data-bool="false"></button></td>
                    <td><button type="button" data-index="33"></button></td>
                    <td><button type="button" data-index="34"></button></td>
                    <td><button type="button" data-index="35"></button></td>
                    <td><button type="button" data-index="36"></button></td>
                    <td><button type="button" data-index="37"></button></td>
                    <td><button type="button" data-index="38"></button></td>
                    <td><button type="button" data-index="39" data-bool="false"></button></td>
                    <td><button type="button" data-index="40"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="41"></button></td>
                    <td><button type="button" data-index="42"></button></td>
                    <td><button type="button" data-index="43"></button></td>
                    <td><button type="button" data-index="44"></button></td>
                    <td><button type="button" data-index="45"></button></td>
                    <td><button type="button" data-index="46"></button></td>
                    <td><button type="button" data-index="47"></button></td>
                    <td><button type="button" data-index="48"></button></td>
                    <td><button type="button" data-index="49"></button></td>
                    <td><button type="button" data-index="50"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="51"></button></td>
                    <td><button type="button" data-index="52"></button></td>
                    <td><button type="button" data-index="53"></button></td>
                    <td><button type="button" data-index="54"></button></td>
                    <td><button type="button" data-index="55"></button></td>
                    <td><button type="button" data-index="56"></button></td>
                    <td><button type="button" data-index="57" data-bool="false"></button></td>
                    <td><button type="button" data-index="58"></button></td>
                    <td><button type="button" data-index="59"></button></td>
                    <td><button type="button" data-index="60"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="61"></button></td>
                    <td><button type="button" data-index="62" data-bool="false"></button></td>
                    <td><button type="button" data-index="63"></button></td>
                    <td><button type="button" data-index="64"></button></td>
                    <td><button type="button" data-index="65"></button></td>
                    <td><button type="button" data-index="66" data-bool="false"></button></td>
                    <td><button type="button" data-index="67"></button></td>
                    <td><button type="button" data-index="68"></button></td>
                    <td><button type="button" data-index="69"></button></td>
                    <td><button type="button" data-index="70"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="71"></button></td>
                    <td><button type="button" data-index="72"></button></td>
                    <td><button type="button" data-index="73"></button></td>
                    <td><button type="button" data-index="74"></button></td>
                    <td><button type="button" data-index="75"></button></td>
                    <td><button type="button" data-index="76"></button></td>
                    <td><button type="button" data-index="77"></button></td>
                    <td><button type="button" data-index="78"></button></td>
                    <td><button type="button" data-index="79"></button></td>
                    <td><button type="button" data-index="80"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="81"></button></td>
                    <td><button type="button" data-index="82"></button></td>
                    <td><button type="button" data-index="83"></button></td>
                    <td><button type="button" data-index="84"></button></td>
                    <td><button type="button" data-index="85"></button></td>
                    <td><button type="button" data-index="86"></button></td>
                    <td><button type="button" data-index="87"></button></td>
                    <td><button type="button" data-index="88"></button></td>
                    <td><button type="button" data-index="89"></button></td>
                    <td><button type="button" data-index="90"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-index="91"></button></td>
                    <td><button type="button" data-index="92"></button></td>
                    <td><button type="button" data-index="93"></button></td>
                    <td><button type="button" data-index="94"></button></td>
                    <td><button type="button" data-index="95"></button></td>
                    <td><button type="button" data-index="96"></button></td>
                    <td><button type="button" data-index="97"></button></td>
                    <td><button type="button" data-index="98"></button></td>
                    <td><button type="button" data-index="99"></button></td>
                    <td><button type="button" data-index="100"></button></td>
                </tr>
            </tbody>
            </table>
    </div>
</div>

<div class="lypop complete">
    <h2>축하합니다!</h2>
    <p>틀린그림을 모두 찾으셨네요!</p>
</div>


<div class="lypop incomplete">
    <h2>세번 연속 틀렸네요!</h2>
    <p>제대로 짚어내주세욧!!!</p>
    <button type="button" class="close">X</button>
</div>
:root{font-size:62.5%;}
*{margin:0;padding:0;}
ul,li{list-style:none;}
body{font-size:1.6rem;}
.frame{position:relative;display:flex;width:100%;}
.frame:after{content:'';position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.6);opacity:0;}
.frame.disabled:after{opacity:1;z-index:10;}
.img{position:relative;width:50%;height:auto;overflow:hidden;}
.img img{width:100%;}
.table{position:absolute;width:100%;left:0;top:0;bottom:0;}
.table td{position:relative;z-index:2;height:auto;overflow:hidden;}
.table td button{width:100%;height:100%;border:0;background:none;}
.table td button:after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:transparent url(http://ju1.dothome.co.kr/sc/img/ok.png) no-repeat 50% 50%;background-size:cover;transition:all .5s;}
.table td button.on[data-bool=false]{opacity:1;background-position: center 0;}
.table td button.on[data-bool=false]:after{top:0;}
.lypop{position:fixed;z-index:10;left:50%;top:-100%;transform:translateX(-50%);min-width:150px;padding:3rem;background:rgba(255,255,255,0.7);line-height:1.5;transition:all 0.5s;}
.lypop.incomplete{background:rgba(255,255,0,0.7);}
.lypop .close{position:absolute;right:0;top:0;width:3rem;height:3rem;background-color:transparent;border:0;font-size:2rem;}
.lypop.active{top:300px;}
(function(){
    var arr1 = [];
    var arr2 = [];
    var wrong = 0;
    var right = 0;

    $('.table.type1 td button').each(function(){
        arr1.push( $(this).data('index') );
        $('.table.type1 td').height( $('.table.type1').height() / 10 );
    });
    $('.table.type2 td button').each(function(){
        arr2.push( $(this).data('index') );
        $('.table.type2 td').height( $('.table.type2').height() / 10 );
    });

    var resizer = null;
    $(window).resize(function(){
        clearTimeout(resizer);
        resizer = setTimeout(function(){
            $('.table.type1 td button').each(function(){
                $('.table.type1 td').height( $('.table.type1').height() / 10 );
            });
            $('.table.type2 td button').each(function(){
                $('.table.type2 td').height( $('.table.type2').height() / 10 );
            });
        },100);
    }).trigger('resize');


    $('button').each(function(){
        
        $(this).on('click', function(e){
            if( $(e.currentTarget).data('bool') == false ){
                $(e.currentTarget).addClass('on').attr('disabled','disabled');

                if( $(e.currentTarget).parents('.table').is('.type1') ){
                    $('.table.type2 td button:eq('+ arr2.indexOf( $(e.currentTarget).data('index') )  +')')
                    .addClass('on').attr('disabled','disabled');
                } 
                else if( $(e.currentTarget).parents('.table').is('.type2') ){
                    $('.table.type1 td button:eq('+ arr1.indexOf( $(e.currentTarget).data('index') )  +')')
                    .addClass('on').attr('disabled','disabled');
                }

                right++;
                if( right >= 5 ){
                    $('.frame').addClass('disabled');
                    $('.complete').addClass('active');
                }
            }else{
                wrong++;
                if( wrong >= 3 ){
                    $('.frame').addClass('disabled');
                    $('.incomplete').addClass('active');                   

                    $('.lypop .close').on('click', function(){
                        $(this).parents('.lypop').removeClass('active')
                        $('.frame').removeClass('disabled');
                        wrong = 0;
                    });
                }
            } 
        });
    });
})();

'WEB > 내맘대로 코딩' 카테고리의 다른 글

선택요소 추가 및 삭제  (0) 2020.04.20
css3 효과주기  (0) 2020.04.16
틀린그림찾기  (0) 2020.04.15
swiperjs - 앙케이트 설문지  (0) 2020.04.14
전체 체크박스  (0) 2019.08.21
튤팁 tooltip  (0) 2019.08.05