JSFiddle - React, Tailwind, and code Playground
by kiokotzu
HTML
<div id="tictactoe"></div>
JavaScript
/*
* A complete tic-tac-toe widget, using JQuery. Just include this
* script in a browser page and play. A tic-tac-toe game will be
* included as a child element of the element with id "tictactoe".
* If the page has no such element, it will just be added at the end
* of the body.
*/
$(function () {
var squares = [],
SIZE = 3,
EMPTY = " ",
score,
moves,
turn = "X",
/*
* To determine a win condition, each square is "tagged" from left
* to right, top to bottom, with successive powers of 2. Each cell
* thus represents an individual bit in a 9-bit string, and a
* player's squares at any given time can be represented as a
* unique 9-bit value. A winner can thus be easily determined by
* checking whether the player's current 9 bits have covered any
* of the eight "three-in-a-row" combinations.
*
* 273 84
* \ /
* 1 | 2 | 4 = 7
* -----+-----+-----
* 8 | 16 | 32 = 56
* -----+-----+-----
* 64 | 128 | 256 = 448
* =================
* 73 146 292
*
*/
wins = [7, 56, 448, 73, 146, 292, 273, 84],
/*
* Clears the score and move count, erases the board, and makes it
* X's turn.
*/
startNewGame = function () {
turn = "X";
score = {"X": 0, "O": 0};
moves = 0;
squares.forEach(function (square) {square.html(EMPTY);});
},
/*
* Returns whether the given score is a winning score.
*/
win = function (score) {
for (var i = 0; i < wins.length; i += 1) {
if ((wins[i] & score) === wins[i]) {
return true;
}
}
return false;
},
/*
* Sets the clicked-on square to the current player's mark,
* then checks for a win or cats game. Also changes the
* current player.
...