찬희

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>카드게임</title>
    <style>
        button{
            width: 103px;
            height: 40px;
            border-radius:4px;
            border:2px solid #000;
            color:#000;
            font-size:15px;
            font-weight:bold;
            background-color: #fff;
            cursor:pointer;
        }  
        body{
            text-align: center;
        }
        #box{
            width:570px;
            margin:0 auto;
            padding:40px;
        }
        img{
            width:80px;
            height:120px;
            margin: 5px;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id='box'>
        <img src='1m1.png'>
        <img src='1m2.png'>
        <img src='2m1.png'>
        <img src='2m2.png'>
        <img src='3m1.png'>
        <img src='3m2.png'>
        <img src='4m1.png'>
        <img src='4m2.png'>
        <img src='5m1.png'>
        <img src='5m2.png'>
        <img src='6m1.png'>
        <img src='6m2.png'>
        <img src='7m1.png'>
        <img src='7m2.png'>
        <img src='8m1.png'>
        <img src='8m2.png'>
        <img src='9m1.png'>
        <img src='9m2.png'>
        <img src='10m1.png'>
        <img src='10m2.png'>
        <img src='11m1.png'>
        <img src='11m2.png'>
        <img src='12m1.png'>
        <img src='12m2.png'>
    </div>
    <div style="height:50px;">
        점수 : <small id="point"></small>
    </div>
    <button type="button" id='turn'>뒤집기</button>
    <button type="button" id='hidden'>숨기기</button>
    <button type="button" id='show'>보이기</button>
    <button type="button" id='shuffle'>섞기</button>
    <button type="button" id='game'>게임</button>
</body>
</html>

<script>
    var cards = document.getElementById('box').children; // 이미지 배열
    var turnAll = document.getElementById('turn'); // 뒤집기 버튼
    var hidden = document.getElementById('hidden'); // 숨기기 버튼
    var show = document.getElementById('show'); // 보이기 버튼
    var shuffle = document.getElementById("shuffle"); // 섞기버튼
    var gaming = document.getElementById("game"); // 섞기버튼
    var pointP = document.getElementById("point");
    var imgname = []; // 이미지이름
    var boolean1 = false; // 숨기기 보이기 스위치
    var cnt = false;
    var boolean2 = false; // 카드체크 스위치
    var boolean3 = false; // 중간체크 막기
    var pre = '';
    var prevalue = '';
    var preindex = 0;
    var post ='';
    var point = 0;
    pointP.innerHTML = 0;


    gaming.onclick =function(){
        for(let i =0; i<cards.length;i++){
            cards[i].src = "back.png";
            cards[i].setAttribute("data-fb","back");
        }
        boolean1 = true;
        point = 0;
        pointP.innerHTML = point;

    }

    for(let i =0; i<cards.length;i++){// 이미지이름초기화
        imgname[i] = parseInt(i/2+1)+"m"+parseInt(i%2+1)+".png";
        cards[i].setAttribute("data-fb","front");
        cards[i].setAttribute("data-ban","false");
    }
    turnAll.onclick = function(){ // 뒤집기 클릭시
        if(boolean1 == false){
            for(let i =0; i<cards.length;i++){
                cards[i].src = "back.png";
                cards[i].setAttribute("data-fb","back");
            }
            boolean1 = true;

        }
        else{
            for(let i =0; i<cards.length;i++){
                cards[i].src = imgname[i];
                cards[i].setAttribute("data-fb","front");
            }
            boolean1 = false;
        }
    };

    hidden.onclick = function(){ // 숨기기 클릭시
        for(let i=0; i<cards.length;i++)
            cards[i].style.visibility = "hidden";
    };

    show.onclick = function(){ // 보이기 클릭시
        for(let i=0;i<cards.length;i++)
            cards[i].style.visibility = "visible";
    };

    shuffle.onclick = function(){ //셔플 클릭시

        for(let i = 0; i<cards.length; i++){
            let j = parseInt(Math.random()*cards.length);
            let temp = '';
            temp = imgname[i];
            imgname[i] = imgname[j];
            imgname[j] = temp;
        }

        for(let i=0;i<cards.length;i++)
            cards[i].src = imgname[i];
    }

    for(let i =0; i<cards.length;i++){ // 버튼클릭시 뒤집기
        cards[i].onclick = function(){
            if(cards[i].getAttribute('data-fb')=='back' && boolean3 == false){
                turn(imgname[i],i);
                check(imgname[i],i);
            }
        }
    }

    var turn = function(imgname, i){
        if(cards[i].getAttribute('data-ban')=='false'){
            if(cards[i].getAttribute('data-fb')=='back'){
                cards[i].src = imgname;
                cards[i].setAttribute("data-fb","front");
            }
            else{
                cards[i].src = 'back.png';
                cards[i].setAttribute("data-fb","back");
            }
        }
    }

    var check = function(imgname, i){
        if(cards[i].getAttribute('data-ban')=='false'){
            if(boolean2 == false){ // 첫번째 카드체크
                pre=imgname.slice(0,2);
                prevalue=imgname;
                preindex = i;
                boolean2 = true;
            }
            else{ // 두번째 카드체크
                boolean3 = true;
                post=imgname.slice(0,2);
                if(pre == post){
                    cards[i].setAttribute("data-ban","true");
                    cards[preindex].setAttribute("data-ban","true");
                    point++;
                    pointP.innerHTML = point;
                    boolean3=false;
                    if(point==12){
                        alert("좀하는데??");
                    }
                }
                else{
                    setTimeout(function(){
                        turn(imgname,i);
                        turn(prevalue,preindex);
                        boolean3 = false;
                    },500);
                }
                boolean2 = false;
            }
        }

    }
</script>

영훈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div>
    <img id='c0_1' src="resource/resource/0_1.jpg" alt="">
    <img id='c0_2' src="resource/resource/0_2.jpg" alt="">
    <img id='c1_1' src="resource/resource/1_1.jpg" alt="">
    <img id='c1_2' src="resource/resource/1_2.jpg" alt="">
    <img id='c2_1' src="resource/resource/2_1.jpg" alt="">
    <br>
    <img id='c2_2' src="resource/resource/2_2.jpg" alt="">
    <img id='c3_1' src="resource/resource/3_1.jpg" alt="">
    <img id='c3_2' src="resource/resource/3_2.jpg" alt="">
    <img id='c4_1' src="resource/resource/4_1.jpg" alt="">
    <img id='c4_2' src="resource/resource/4_2.jpg" alt="">
    <br>
    <img id='c5_1' src="resource/resource/5_1.jpg" alt="">
    <img id='c5_2' src="resource/resource/5_2.jpg" alt="">
    <img id='c6_1' src="resource/resource/6_1.jpg" alt="">
    <img id='c6_2' src="resource/resource/6_2.jpg" alt="">
    <img id='c7_1' src="resource/resource/7_1.jpg" alt="">
    <br>
    <img id='c7_2' src="resource/resource/7_2.jpg" alt="">
    <img id='c8_1' src="resource/resource/8_1.jpg" alt="">
    <img id='c8_2' src="resource/resource/8_2.jpg" alt="">
    <img id='c9_1' src="resource/resource/9_1.jpg" alt="">
    <img id='c9_2' src="resource/resource/9_2.jpg" alt="">
    </div>
    <div>
    <button id='turnAll'>뒤집기</button>
    <button id='hide'>숨기기</button>
    <button id='show'>보이기</button>
    <button id='shuffle'>섞기</button>

    </div>
</body>
</html>
<script>
    window.onload=function(){
        //변수선언
        var isTurnAll=true;
         checkArr=[];
        var cnt=0;
        var checkFlag=true;//setTimeout함수 실행전까지 클릭x

        var turnAll=document.getElementById('turnAll');
        var hide=document.getElementById('hide');
        var show=document.getElementById('show');
        var shuffle=document.getElementById('shuffle');

        //카드 2차원배열 선언
        var cardArr=new Array(10);
        for(let i=0;i<10;i++){
            cardArr[i]=new Array(2);
        };

        //경로 2차원배열 선언
        var srcArr=new Array(10);
        for(let i=0;i<10;i++){
            srcArr[i]=new Array(2);
        };

        //배열에 카드 넣기, 경로 배열에 넣기
        for(let i=0;i<10;i++){
            for(let j=0;j<2;j++){
                cardArr[i][j]=document.getElementById('c'+i+'_'+(j+1));
                srcArr[i][j]="resource/resource/"+i+"_"+(j+1)+".jpg";
            };
        };
       /* //경로 배열에 넣기
        for(let i=0;i<10;i++){
            for(let j=0;j<1;j++){
                srcArr[i][j]="resource/resource/"+i+"_"+j+".jpg";
            }
        }*/

        //뒤집기
        turnAll.onclick=function(){
            if(isTurnAll){
                for(let i=0;i<cardArr.length;i++){
                    for(let j=0;j<cardArr[i].length;j++){
                            cardArr[i][j].src="resource/resource/back.jpg";
                    };
                };
                isTurnAll=false;
            }else{//srcArr의 경로를 cardArr에 넣는다.
                for(let i=0;i<cardArr.length;i++){
                    for(let j=0;j<cardArr[i].length;j++){
                            cardArr[i][j].src=srcArr[i][j];
                    };
                };
                isTurnAll=true;
            };
        };
        //숨기기
        hide.onclick=function(){
            for(let i=0;i<cardArr.length;i++){
                for(let j=0;j<cardArr[i].length;j++){
                        cardArr[i][j].style.visibility='hidden';
                    };
                };
        };
        //보이기
        show.onclick=function(){
             for(let i=0;i<cardArr.length;i++){
                for(let j=0;j<cardArr[i].length;j++){
                        cardArr[i][j].style.visibility='visible';
                 };
            };
        };
        //섞기
        shuffle.onclick=function(){
            //경로섞기
            for(let i=0;i<srcArr.length;i++){
                for(let j=0;j<srcArr[i].length;j++){
                    let k=parseInt(Math.random()*srcArr.length);
                    let l=parseInt(Math.random()*srcArr[0].length);
                    let temp=srcArr[i][j];
                    srcArr[i][j]=srcArr[k][l];
                    srcArr[k][l]=temp;
                 };
            };
            //cardArr에 srcArr대입
            for(let i=0;i<cardArr.length;i++){
                for(let j=0;j<cardArr[i].length;j++){
                    cardArr[i][j].src=srcArr[i][j];
                    cardArr[i][j].alt='';
                 };
            };
        };
 //=============================짝맞추기================================


        for(let i=0;i<cardArr.length;i++){
            for(let j=0;j<cardArr[i].length;j++){
                cardArr[i][j].onclick=function(){
                    if(checkFlag){
                        if(cardArr[i][j].alt!='front'){//앞면이면 찍지 못하게한다.
                            cardArr[i][j].src=srcArr[i][j];
                            checkArr.push(cardArr[i][j]);
                            cardArr[i][j].alt='front';//뒤집음 속성 할당
                            cnt++;
                            console.log(cnt);
                            if(cnt==2){
                                checkFlag=false;
                                setTimeout(checkFn,500);
                                cnt=0;
                            }
                        }
                    }
                }
            }
        }

        //카드 비교함수
        var checkFn=function (){
            console.log(checkArr.length);
             console.log(checkArr[0].src.charAt(41));
            console.log(checkArr[1].src.charAt(41));
            var checkcard1=checkArr[0];
            var checkcard2=checkArr[1];
            if(checkArr.length==2){//숫자가 같은지, 그리고 같은카드를 눌렀는지 확인
                if((checkcard1.src.charAt(41)==checkcard2.src.charAt(41))&&(checkcard1.id!=checkcard2.id)){
                    checkArr=[];
                    checkFlag=true;
                    return;
                }else{
                    checkcard1.src="resource/resource/back.jpg";
                    checkcard2.src="resource/resource/back.jpg";
                    checkcard1.alt='';
                    checkcard2.alt='';
                    checkArr=[];
                }
            }checkFlag=true;
        }
     }

</script>
</html>

경진

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>


</style>
<body>
<iframe width="100%", height="500"></iframe>
<div id="cards">
    <img src="resource/A_1.jpg" class="A" width="100" height="150">
    <img src="resource/2_1.jpg" class="2" width="100" height="150">
    <img src="resource/3_1.jpg" class="3" width="100" height="150">
    <img src="resource/4_1.jpg" class="4" width="100" height="150">
    <img src="resource/5_1.jpg" class="5" width="100" height="150">
    <img src="resource/6_1.jpg" class="6" width="100" height="150">
    <img src="resource/7_1.jpg" class="7" width="100" height="150">
    <img src="resource/8_1.jpg" class="8" width="100" height="150">
    <img src="resource/9_1.jpg" class="9" width="100" height="150">
    <img src="resource/10_1.jpg" class="10" width="100" height="150">
    <img src="resource/A_1.jpg" class="A" width="100" height="150">
    <img src="resource/2_1.jpg" class="2" width="100" height="150">
    <img src="resource/3_1.jpg" class="3" width="100" height="150">
    <img src="resource/4_1.jpg" class="4" width="100" height="150">
    <img src="resource/5_1.jpg" class="5" width="100" height="150">
    <img src="resource/6_1.jpg" class="6" width="100" height="150">
    <img src="resource/7_1.jpg" class="7" width="100" height="150">
    <img src="resource/8_1.jpg" class="8" width="100" height="150">
    <img src="resource/9_1.jpg" class="9" width="100" height="150">
    <img src="resource/10_1.jpg" class="10" width="100" height="150">
</div>
<button id="turn">뒤집기</button>
<button id="hide">숨기기</button>
<button id="show">보이기</button>
<button id="shuffle">셔플</button>

<script>
    var turnAll = false;
    var cards = document.getElementById('cards').children;
    var btn_turn = document.getElementById('turn');
    var btn_hide = document.getElementById('hide');
    var btn_show = document.getElementById('show');
    var btn_shuffle = document.getElementById("shuffle");

    // 모든 카드 뒤집기
    btn_turn.onclick = function () {
        if(turnAll){ // 카드가 뒷면이면...
            turnAll = !turnAll;
            for(var i = 0 ; i < cards.length ; i++) {
                cards[i].src = "resource/"+cards[i].className+"_1.jpg";
                cards[i].name = 'turnUp';
            }
        }
        else { // 카드가 앞면이면...
            turnAll = !turnAll;
            for(var i = 0 ; i < cards.length ; i++) {
                cards[i].src = 'resource/back.jpg';
                cards[i].name = 'turnOff';

            }
        }
    }

    btn_show.onclick = function () { // 카드 보이기
        for(var i = 0 ; i < cards.length ; i++) {
            cards[i].style.visibility = "visible";
        }
    };
    btn_hide.onclick = function () { // 카드 가리기
        for(var i = 0 ; i < cards.length ; i++) {
            cards[i].style.visibility = "hidden";
        }
    };

    btn_shuffle.onclick = function () { // 셔플
        //console.log(cards.length);
//        for(var i = 0 ; i < cards.length ; i++) {
//            cards[i].style.visibility = "hidden";
//        }
//        // 카드를 가립니다
        console.log();
        for(var i = 0 ; i < cards.length ; i++){ // 카드 배열만큼 for 문 돌림

            var index = Math.ceil(Math.random()*(cards.length-1)); // index 값 random 으로 저장
            var temp = cards[index].src; // temp에 데이터 값저장
            cards[index].src = cards[i].src;
            cards[i].src = temp; // src 값 switching

            // className 값도 switching  ==> src값이 바뀔때 같이 바뀌어야나중에 비교할때씀

            temp = cards[index].className;
            cards[index].className = cards[i].className;
            cards[i].className = temp;
        }
//        카드를 보입니다. 카드를 뒤집어서 섞은 후에 확인 할려고 나중에  css추가 예정
//        for(var i = 0 ; i < cards.length ; i++) {
//            cards[i].style.visibility = "visible";
//        }
    }
    var turnUpCard = function (card)  { // 카드를 보임
        card.src = "resource/"+card.className+"_1.jpg";
        card.name = 'turnUp';
    }
    var turnOffCard = function (card) { // 카드를 덮음
        card.src = 'resource/back.jpg';
        card.name = 'turnOff';

    }

    var cnt = 1; //
    var fristcard = null;
    var secendcard = null;
    var gaming = false;


    for(var i = 0 ; i < cards.length ; i++) {

        cards[i].onclick = function () {
            if (!gaming) {
                if(this.name != 'turnOff')
                    return;
                //console.log(cnt);
                turnUpCard(this);
                if (cnt == 2) {
                    //cnt = 5;
                    secendcard = this;
                    if (fristcard == secendcard)
                        return;
                    gaming = true;
                    setTimeout(function () {
                        if (!(fristcard.className == secendcard.className)) {
                            turnOffCard(fristcard);
                            turnOffCard(secendcard);
                            //alert("fristcard : " + fristcard.className + ",secendcard : " + secendcard.className);
                        }
                        cnt = 1;
                        gaming = false;
                    }, 1500);
                }
                else if (cnt == 1) {
                    fristcard = this;
                    console.log(fristcard.className);
                    cnt++;
                }
//            else if(cnt == 3)
//                cnt = 1;
            }
        };
    }



</script>
</body>
</html>