井字过三关

说明

井字过三关，js实现代码。
截图

image.png
demo地址

https://codepen.io/ncbigdevil/full/OYROOW
具体代码

<!DOCTYPE html>
<html>
<head>
    <title>井字过三关</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">

    .main table{
        margin: 50px auto;

    }
    #game tr td {
        border: 1px solid #CCC;
        width: 100px;
        height: 100px;
        font-size: 65px;
        text-align: center;
        vertical-align: middle;
    }
    #game tr th {
        text-align: center;
    }
    .btn-group {
        margin: 10px;
    }
    #tips {
        font-size: 20px;
        color: orange;
        height: 40px;
        line-height: 30px;
    }

    </style>
</head>
<body>
    <div class="main">
        

        <table id="game">
            <tr>
                <th colspan="3">
                    <div class="btn-group config1" role="group" >
                      <button type="button" class="btn btn-primary" id="first">先手</button>
                      <button type="button" class="btn btn-default" id="last">后手</button>
                    </div>
                    <div class="btn-group config2" role="group" >
                      <button type="button" class="btn btn-primary" id="circle">使用〇</button>
                      <button type="button" class="btn btn-default" id="cross">使用X</button>
                    </div>
                </th>
            </tr>
            <tr>
                <th colspan="3">
                    <div id="tips">请点击开始按钮，开始游戏</div>
                </th>
            </tr>
            <tr>
                <td id='c1'></td>
                <td id='c2'>〇</td>
                <td id='c3'></td>
            </tr>
            <tr>
                <td id='c4'>〇</td>
                <td id='c5'>〇</td>
                <td id='c6'>〇</td>
            </tr>
            <tr>
                <td id='c7'></td>
                <td id='c8'>〇</td>
                <td id='c9'></td>
            </tr>
            <tr>
                <th colspan="3">
                    <div class="btn-group game-operation" role="group" >
                      <button type="button" class="btn btn-default" id="start">开始</button>
                      <button type="button" class="btn btn-primary" id="end">结束</button>
                    </div>
                </th>
            </tr>
        </table>
    </div>


    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript">
        var first = true;
        var myChoice = '〇';
        var computerChioce = 'X';
        var random = 0;
        var arrRecord = [];
        var flag = false;   //判断游戏是否结束,true是结束。
        const winCondition = [
            'c1c2c3',
            'c4c5c6',
            'c7c8c9',
            'c1c4c7',
            'c2c5c8',
            'c3c6c9',
            'c1c5c9',
            'c3c5c7'
        ];

        $(document).ready(function() {

            //开始函数
            $('.game-operation button').click(function() {
                if($(this).hasClass('btn-primary')) {
                    return;
                }

                finishGame ();
                if ($(this).attr('id') === 'start') {   
                    showTips('游戏中');
                    flag = false;
                    if (!first) {
                        computerPlay();
                    } 
                    $('#start').addClass('btn-primary').removeClass('btn-default');
                    $('#end').addClass('btn-default').removeClass('btn-primary');
                } else {
                    showTips('请点击开始按钮，开始游戏');
                    flag = true;
                    $('#start').addClass('btn-default').removeClass('btn-primary');
                    $('#end').addClass('btn-primary').removeClass('btn-default');
                }
            });

            //点击单元格触发的函数
            $('#game td').click(function() {

                if (flag) {
                    return;
                }

                if ($(this).hasClass('unselected')) {
                    $(this).text(myChoice).addClass('selected').removeClass('unselected').addClass('myChoice');
                    if (isWin()) {
                        return;
                    }
                    computerPlay();
                }
            });

            $('.config1 button').click(function() {
                if($(this).hasClass('btn-primary')) {
                    return;
                }
                if ($(this).attr('id') === 'first') {
                    first = true;
                    $('#first').addClass('btn-primary').removeClass('btn-default');
                    $('#last').addClass('btn-default').removeClass('btn-primary');
                } else {
                    first = false;
                    $('#first').addClass('btn-default').removeClass('btn-primary');
                    $('#last').addClass('btn-primary').removeClass('btn-default');
                }
            });
            
            $('.config2 button').click(function() {
                if($(this).hasClass('btn-primary')) {
                    return;
                }
                if ($(this).attr('id') === 'circle') {
                    myChoice = '〇';
                    computerChioce = 'X';
                    $('#circle').addClass('btn-primary').removeClass('btn-default');
                    $('#cross').addClass('btn-default').removeClass('btn-primary');
                } else {
                    myChoice = 'X';
                    computerChioce = '〇';
                    $('#circle').addClass('btn-default').removeClass('btn-primary');
                    $('#cross').addClass('btn-primary').removeClass('btn-default');
                }
            });


            function computerPlay () {
                let len = $('.unselected').length;
                if (len === 0 ) {
                    showTips('游戏完结');
                    return;
                }
                random = Math.floor(Math.random() * len);
                $($('.unselected')[random]).text(computerChioce).addClass('selected').removeClass('unselected').addClass('computerChioce');
                isWin();
            }

            function isWin() {
                let selectedCells = '';
                flag = false;
                $('.myChoice').each(function(index, item) {
                    selectedCells += $(item).attr('id');
                })

                winCondition.forEach(function(item) {
                    if (selectedCells.indexOf(item) > -1) {
                        flag = true;
                        showTips('你赢了');
                    }
                });

                if (!flag) {
                    $('.computerChioce').each(function(index, item) {
                        selectedCells += $(item).attr('id');
                    })

                    winCondition.forEach(function(item) {
                        if (selectedCells.indexOf(item) > -1) {
                            flag = true;
                            showTips('电脑赢了');
                        }
                    });
                }
                
                return flag;
            }

            function showTips (msg) {
                $('#tips').text(msg);
            }

            function finishGame () {
                
                

                $('#game td').text('').addClass('unselected').removeClass('selected').removeClass('myChoice').removeClass('computerChioce');
            }


        })

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