Ciao @KillerWorm ho una pagina ma non saprei se gli elementi sono già definiti nel DOM, ti incollo il codice e ti linko la pagina http://android0.altervista.org/Tris-js-original.html.

codice:
<!DOCTYPE html>
<html dir="ltr">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=no, shrink-to-fit=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Tic-Tac-Toe Game written in Javascript</title>
    <style>
body {
    background: #ffffff;
    font: normal 16px courier, arial;
    text-align: center;
}

.tic-tac-toe .scoreboard {
  margin: auto;
}

.tic-tac-toe .scoreboard .score {
    text-align: center;
    font-size: 80px
}

.tic-tac-toe .scoreboard .score.X {
    color: #238EE1;
}

.tic-tac-toe .scoreboard .score.O {
    color: #FF1010;
}


.tic-tac-toe .board table {
    cell-spacing: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    margin-top: 30px;
    margin-bottom: 30px;
    margin: 30px auto;
}

.tic-tac-toe .board td {
    border: 4px solid #000;
    height: 100px;
    width: 100px;
    text-align: center;
    font: 200 60px helvetica neue, arial;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tic-tac-toe .board tr:first-child td {
    border-top: none
}

.tic-tac-toe .board tr:last-child td {
    border-bottom: none
}

.tic-tac-toe .board tr td:first-child {
    border-left: none;
}

.tic-tac-toe .board tr td:last-child {
    border-right: none;
}

.tic-tac-toe .board td.X {
    color: #238EE1;
}

.tic-tac-toe .board td.O {
    color: #FF1010;
}
</style>
<script src="https://code.jquery.com/jquery-1.0.js"></script>
</head>

<body dir="ltr" style="background:#ffffff;">

    <h1 class="title"> Tic-Tac-Toe scritto in Javascript </h1>

    <div class="game-panel">

        <div class="tic-tac-toe">
            <table class="scoreboard">
                <tbody><tr>
                    <td> Giocatore 1 </td>
                    <td width="30"> &nbsp; </td>
                    <td> Giocatore 2 </td>
                </tr>
                <tr>
                    <td class="score X">0</td>
                    <td> &nbsp; </td>
                    <td class="score O">0</td>
                </tr>
            </tbody></table>

            <div class="board"><table><tbody><tr><td row="0" column="0"></td><td row="0" column="1"></td><td row="0" column="2"></td></tr><tr><td row="1" column="0"></td><td row="1" column="1"></td><td row="1" column="2"></td></tr><tr><td row="2" column="0"></td><td row="2" column="1"></td><td row="2" column="2"></td></tr></tbody></table></div>

            <button class="btn-reset"> Reset </button>

            <select class="grid-options">
                <option value="2"> 2 X 2 </option>
                <option value="3" selected=""> 3 X 3 </option>
                <option value="4"> 4 X 4 </option>
                <option value="5"> 5 X 5 </option>
                <option value="6"> 6 X 6 </option>
            </select>
        </div>

    </div>

    <script>
function TicTacToe(selector) {

    var main_element = $(selector)[0],
        score_X = $('.score.X')[0],
        score_O = $('.score.O')[0],
        board = $('.board')[0],
        grid_options = $('.grid-options')[0],
        reset_btn = $('.btn-reset')[0];

    var grid_size = 3,
        moves = 0,
        scores = {
            X: 0,
            O: 0
        },
        data = {};

    $('.grid-options').change(function(e) {
      grid_size = $(this).val();
      init();
    });

    init();
    
    $('.btn-reset').click(function(e) {
      reset_btn = init();
    });

    function paint() {
        var table = '<table>';
        for (var i = 0; i < grid_size; i++) {
            table += '<tr>';
            for (var j = 0; j < grid_size; j++) {
                table += '<td row="' + i + '" column="' + j + '"></td>';
            }
            table += "</tr>";
        }
        $(board).html(table);

        var columns = $('td');
        for (i = 0; i < columns.length; i++) {
            $(columns[i]).click(function(e) {
            td = mark(e);
            })
        }

    }

    function mark(e) {

        var evt = e || event;
        var td = evt.target || evt.srcElement;

        if ($(td).html()) {
            return;
        }

        var row = $(td).attr('row'),
            column = $(td).attr('column');

        var current_mark = moves % 2 === 0
            ? 'X'
            : 'O';

        $(td).html(current_mark);
        $(td).addClass(current_mark);
        data[row + '' + column] = current_mark;

        moves++;

        (function($) {
            if (didWin(current_mark)) {
                alert(current_mark + ' vince la partita!');
                scores[current_mark]++;
                updateScoreboard();
                empty();
            } else if (moves === Math.pow(grid_size, 2)) {
                alert("Pareggio!");
                empty();
            }
        })(jQuery);

    }

    function didWin(mark) {

        var vertical_count = 0,
            horizontal_count = 0,
            right_to_left_count = 0,
            left_to_right_count = 0;

        for (var i = 0; i < grid_size; i++) {

            vertical_count = 0;
            horizontal_count = 0;

            for (var j = 0; j < grid_size; j++) {

                if (data[i + '' + j] == mark) {
                    horizontal_count++;
                }

                if (data[j + '' + i] == mark) {
                    vertical_count++;
                }

            }

            if (data[i + '' + i] == mark) {
                left_to_right_count++;
            }

            if (data[(grid_size - 1 - i) + '' + i] == mark) {
                right_to_left_count++;
            }

            if (horizontal_count == grid_size || vertical_count == grid_size) {
                return true;
            }

        }

        if (left_to_right_count == grid_size || right_to_left_count == grid_size) {
            return true;
        }

        return false;
    }

    function empty() {
        moves = 0;
        paint();
        data = {};
    }

    function init() {
        empty();
        scores = {
            X: 0,
            O: 0
        };
        updateScoreboard();
    }

    function updateScoreboard() {
        $('.score.X').html(scores.X);
        $('.score.O').html(scores.O);
    }

}</script>
    <script>
        TicTacToe('.game-panel');
    </script>

</body>

</html>
Nella pagina ho utilizzato una funzione anonima self-invoking (IIFE) e non saprei se gli elementi sono già definiti nel DOM. Grazie per la cordialità e disponibilità.