<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<html>
<!-- 스튜디오 코드 단축키
//https://demun.github.io/vscode-tutorial/shortcuts/
//행 위아래 복사 : shift+alt+down, shift+alt+up.
//행삭제 ctrl+shift+k 
// 주석 : ctrl+/
-->
    <head>
        <style>
           table, th, td { border: 1px solid black}
           .fix_td {width:100px; height: 50px;}
        </style>
    <body>
        <!-- 클릭했을때 이벤트 실행 O,X값을 구분해줄 칸이 필요.-->
        <div style="padding: 15%;">
            <div style="padding-bottom: 5px;">
                <div style="float:left;">플레이어 구분
                    <select class="choice_user">
                        <option value="O">O</option>
                        <option value="X">X</option>
                    </select>
                </div>
                <div class="reset" style="float:left; margin-left:15px; border:2px solid;">다시시작</div>
            </div>
            <table id="main_table" style="width:100%;height: 150px;">
                <tbody>
                    <tr >
                        <td class="fix_td">
                            <div id =11></div>
                        </td>
                        <td class="fix_td">
                            <div id =12></div>
                        </td>
                        <td class="fix_td">
                            <div id =13></div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fix_td">
                            <div id =21></div>
                        </td>
                        <td class="fix_td">
                            <div id =22></div>
                        </td>
                        <td class="fix_td">
                            <div id =23></div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fix_cd">
                            <div id =31></div>
                        </td>
                        <td class="fix_cd">
                            <div id =32></div>
                        </td>
                        <td class="fix_cd">
                            <div id =33></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    <script>
        var count = 0;
        //td값 선택
        $("#main_table").find('td').click(function(){
         //이미 입력된 값은 수정 불가.
            if(!$(this).children().hasClass("")){
                alert("입력된값이 있음.");
                return false;
            }
        //추후에 그림이 어찌될지 모르니 div로 감싸자.    
            var div_class = $(this).children().addClass("choice"+count);
            var choice_user = $('.choice_user').val();
            $(".choice"+count).text(choice_user);
            
        // O선택이 되었으면 다음 select box는 X로 해야함.
            if(choice_user == "O"){
                $(".choice_user").val("X");
            }else{
                $(".choice_user").val("O");
            }
            count ++;
       
        //첫줄
            var cell_11 = $('#main_table').find('#11').text();
            var cell_12 = $('#main_table').find('#12').text();
            var cell_13 = $('#main_table').find('#13').text();
        //두번째 줄
            var cell_21 = $('#main_table').find('#21').text();
            var cell_22 = $('#main_table').find('#22').text();
            var cell_23 = $('#main_table').find('#23').text();
        // 세번째 줄
            var cell_31 = $('#main_table').find('#31').text();
            var cell_32 = $('#main_table').find('#32').text();
            var cell_33 = $('#main_table').find('#33').text();

//가로
            if(cell_11 == "O" && cell_12 == "O" && cell_13 == 'O'){
                alert("O 가로 1줄");
                return false;
            }else if(cell_11 == "X" && cell_12 == "X" && cell_13 == 'X'){
                alert("X가로 1줄");
                return false;
            }

            if(cell_21 == "O" && cell_22 == "O" && cell_23 == 'O'){
                alert("O 가로 2줄");
                return false;
            }else if(cell_21 == "X" && cell_22 == "X" && cell_23 == 'X'){
                alert("X가로 2줄");
                return false;
            }

            if(cell_31 == "O" && cell_32 == "O" && cell_33 == 'O'){
                alert("O 가로 3줄");
                return false;
            }else if(cell_31 == "X" && cell_32 == "X" && cell_33 == 'X'){
                alert("X 가로 3줄");
                return false;
            }

//세로
            if(cell_11 == "O" && cell_21 == "O" && cell_31 == 'O'){
                alert("O 세로 첫줄");
                return false;
            }else if(cell_11 == "X" && cell_21 == "X" && cell_31 == 'X'){
                alert("X 세로 첫줄");
                return false;
            }

            if(cell_12 == "O" && cell_22 == "O" && cell_32 == 'O'){
                alert("O 세로2줄");
                return false;
            }else if(cell_12 == "X" && cell_22 == "X" && cell_32 == 'X'){
                alert("X 세로2줄");
                return false;
            }

            if(cell_31 == "O" && cell_32 == "O" && cell_33 == 'O'){
                alert("세로3줄");
                return false;
            }else if(cell_31 == "X" && cell_32 == "X" && cell_33 == 'X'){
                alert("세로 3줄X");
                return false;
            }
//대각선
            if(cell_11 == "O" && cell_22 == "O" && cell_33 == 'O'){
                alert("왼쪽 대각선 O");
                return false;
            }else if(cell_11 == "X" && cell_22 == "X" && cell_33 == 'X'){
                alert("왼쪽  대각선 X");
                return false;
            }else if(cell_31 == "O" && cell_22 == "O" && cell_13 == 'O'){
                alert("오른쪽 대각선 O");
                return false;
            }else if(cell_31 == "X" && cell_22 == "X" && cell_13 == 'X'){
                alert("오른쪽 대각선 X");
                return false;
            }

            if($(this).children().hasClass("choice8")){
                alert("무승부.");
                return false;
            }    
            // console.log('test',test);

     });
     $('.reset').click(function(){
         //refresh로 일단 처리.
        location.reload(true);  
     });
  
    </script>
</html>

 

가로,세로,대각선 부분 다 table id및 if문으로 줘서 처리했는데 더 좋은 방법이 있지 않을까. ㅠㅠ

 

 

 

1.table id를 줘서 'O,X'의 값 가로세로대각선 경우의수 지정

2. hasClass, find 정도의 html 속성값찾는 함수사용.

만약에O,X를 이미지로 처리한다면 아마 따로 변수줘서 테스트를 해야할듯.

 

저작자표시

'dev' 카테고리의 다른 글

[Dev스터디 5일차] 틱택톡 만들어보기 (개선1)  (0) 2020.09.18
[Dev스터디 4일차] 틱택톡 만들어보기 (소스 분리)  (0) 2020.09.14
[dev 스터디 2일차] 틱택톡 만들어보기 (jquery 사용)  (0) 2020.09.10
[dev 스터디 1일차] 개발환경 구축  (0) 2020.09.08
[리눅스스터디 1일차] 네이버클라우드 서비스 신청.  (0) 2020.09.07

+ Recent posts

티스토리툴바