일단 jquery로 하여서 

테이블을 css로 그려주고 O,X선택에 따라 값이 되게만 하였다.

 

<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값을 구분해줄 칸이 필요.-->
        <!-- O,X의 값이 가로세로 대각선이 맞으면 게임종료 표시.-->
        <div style="padding: 15%;">
            <div style="padding-bottom: 5px;">
                플레이어 구분
                <select class="choice_user">
                    <option value="O">O</option>
                    <option value="X">X</option>
                </select>
            </div>
            <table id="main_table" style="width:100%;height: 150px;">
                <tbody>
                    <tr >
                        <td class="fix_td">
                            <div></div>
                        </td>
                        <td class="fix_td">
                            <div></div>
                        </td>
                        <td class="fix_td">
                            <div></div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fix_td">
                            <div></div>
                        </td>
                        <td class="fix_td">
                            <div></div>
                        </td>
                        <td class="fix_td">
                            <div></div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fix_cd">
                            <div></div>
                        </td>
                        <td class="fix_cd">
                            <div></div>
                        </td>
                        <td class="fix_cd">
                            <div></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    <script>
       var count = 0;
        //td값 선택
       $("#main_table").find('td').click(function(){
        var choice_user = $('.choice_user').val();
        var div_class = $(this).children().addClass("choice"+count);
        $(".choice"+count).text(choice_user);
        
        // O선택이 되었으면 다음 select box는 X로 해야함.
        if(choice_user == "O"){
            $(".choice_user").val("X");
        }else{
            $(".choice_user").val("O");
        }
        count ++;
    });
    </script>
</html>

 

** TD값 가져오는데에서 헷갈려 했다. 처음에 Tr로 클래스를 줘서 해야하나 막 고민하다가..

div로 하긴했는데 솔직히 이부분도 굳이 children으로 div을 줄필요는 없는듯한데.. 이건뭐 나중에 바꿔나가야지..

 

예외처리 해야할 사항.

대각선과 가로 세로 일치하였을때 alert으로 승자표시 해주고

이미 선택된 셀은 바꿔지지 않게 수정을 해야할듯

저작자표시

'dev' 카테고리의 다른 글

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

+ Recent posts

티스토리툴바