JSFiddle - React, Tailwind, and code Playground

by Vince Aggrippino

HTML

<div class="wrapper">
Click a cell when it's your move.<br><br>
<div id="winner"></div>
<div id="move">AI's Move</div>
<table>
    <tr>
        <td><button id="c00"></button></td>
        <td><button id="c01"></button></td>
        <td><button id="c02"></button></td>
    </tr>
    <tr>
        <td><button id="c10"></button></td>
        <td><button id="c11"></button></td>
        <td><button id="c12"></button></td>
    </tr>
    <tr>
        <td><button id="c20"></button></td>
        <td><button id="c21"></button></td>
        <td><button id="c22"></button></td>
    </tr>
</table>

<input type="button" id="restart" value="Restart Game"/>
</div>

CSS

table {
	border-collapse: collapse;
	border-spacing: 0;
}

button {
    width: 50px;
    height: 40px;
    background: #fff;
    border: 4px solid #000;
    cursor: pointer;
    margin: 0px;
}

td {
    margin: 0px;
    padding: 0px;
}

div {
    text-align: center;
}

.wrapper, table {
    margin: 20px auto;
}

JavaScript

var board = [
    [null, null, null],
    [null, null, null],
    [null, null, null]
]

var myMove = false;

if (myMove) {
    makeMove();
}

function restartGame() {
    board = [
        [null, null, null],
        [null, null, null],
        [null, null, null]
    ];
    myMove = false;
    updateMove();
}

$(document).ready(function() {
    $("button").click(function() {
        var cell = $(this).attr("id")
        var row = parseInt(cell[1])
        var col = parseInt(cell[2])
        if (!myMove) {
            board[row][col] = false;
            myMove = true;
            updateMove();
            makeMove();
        }
    });
    $("#restart").click(restartGame);
});

function updateMove() {
    updateButtons();
    
    var winner = getWinner(board);
    
    $("#winner").text(winner == 1 ? "AI Won!" : winner == 0 ? "You Won!" : winner == -1 ? "Tie!" : "");
    
    $("#move").text(myMove ? "AI's Move" : "Your move");
}

function getWinner(board) {
   
    // Check if someone won
    vals = [true, false];
    var allNotNull = true;
    for (var k = 0; k < vals.length; k++) {
        var value = vals[k];
        
        // Check rows, columns, and diagonals
        var diagonalComplete1 = true;
        var diagonalComplete2 = true;
        for (var i = 0; i < 3; i++) {
            if (board[i][i] != value) {
                diagonalComplete1 = false;
            }
            if (board[2 - i][i] != value) {
                diagonalComplete2 = false;
            }
            var rowComplete = true;
            var colComplete = true;
            for (var j = 0; j < 3; j++) {
                if (board[i][j] != value) {
                    rowComplete = false;
                }
                if (board[j][i] != value) {
                    colComplete = false;
                }
                if (board[i][j] == null) {
                    allNotNull = false;
                }
            }
            if (rowComplete || colComplete) {
               ...