井字棋的界面控制

首先要在网页头部引入 jquery。

然后在页面中添加 <div>元素：<div class="ticktacktoe"></div>

  
$(function() {
    function init($board) {
        if ($board.length != 1) {
            return;
        }
        const engine = new AlphaBeta();
        const SEL = ['sel-a', 'sel-b'];
        const WIN = ['win-a', 'win-b'];
        var isfinal = false;
        for (var i=0; i<9; i++) {
            $board.append(`<div class="cell"></div>`);
        }
        function domove(move) {
            var player = engine.player;
            var result = engine.domove(move);
            if (result.score == 0) {
                $($('.cell')[move]).addClass(SEL[player]);
                if (engine.depth == 9) {
                    isfinal = true;
                } else if (engine.player == 1) {
                    domove(engine.best.move);
                }
            } else {
                var $cell = $('.cell');
                for (var x of result.points) {
                    var $item = $($cell[x]);
                    $item.removeClass(SEL[0]).removeClass(SEL[1]);
                    $item.addClass(WIN[player]);
                }
                isfinal = true;
            }
        }
        $('.cell').on('click', function() {
            if (isfinal) {
                $('.cell').removeClass(SEL[0]).removeClass(SEL[1])
                    .removeClass(WIN[0]).removeClass(WIN[1]);
                engine.reset();
                isfinal = false;
            } else {
                var move = $(this).index();
                if (engine.values[move] == -1) {
                    domove(move);
                }
            }
        });
    }

    init($('.ticktacktoe:first'));
});