Skip to content

Instantly share code, notes, and snippets.

@eriknomitch

eriknomitch/index.html

Created October 5, 2022 23:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save eriknomitch/36f9388899f369e6e900835e2747f598 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save eriknomitch/36f9388899f369e6e900835e2747f598 to your computer and use it in GitHub Desktop.
Download ZIP
Tic Tac Toe (Vanilla JS)
Raw
index.html
<div id="tictactoe"></div>
<div align="left">
<span id='turn'>Player X</span>
</div>
Raw
script.js
/*
* Tic Tac Toe
*
* A Tic Tac Toe game in HTML/JavaScript/CSS.
*
* @author: Vasanth Krishnamoorthy
*/
var N_SIZE = 3,
EMPTY = "&nbsp;",
boxes = [],
turn = "X",
score,
moves;
/*
* Initializes the Tic Tac Toe board and starts the game.
*/
function init() {
var board = document.createElement('table');
board.setAttribute("border", 1);
board.setAttribute("cellspacing", 0);
var identifier = 1;
for (var i = 0; i < N_SIZE; i++) {
var row = document.createElement('tr');
board.appendChild(row);
for (var j = 0; j < N_SIZE; j++) {
var cell = document.createElement('td');
cell.setAttribute('height', 120);
cell.setAttribute('width', 120);
cell.setAttribute('align', 'center');
cell.setAttribute('valign', 'center');
cell.classList.add('col' + j,'row' + i);
if (i == j) {
cell.classList.add('diagonal0');
}
if (j == N_SIZE - i - 1) {
cell.classList.add('diagonal1');
}
cell.identifier = identifier;
cell.addEventListener("click", set);
row.appendChild(cell);
boxes.push(cell);
identifier += identifier;
}
}
document.getElementById("tictactoe").appendChild(board);
startNewGame();
}
/*
* New game
*/
function startNewGame() {
score = {
"X": 0,
"O": 0
};
moves = 0;
turn = "X";
boxes.forEach(function (square) {
square.innerHTML = EMPTY;
});
}
/*
* Check if a win or not
*/
function win(clicked) {
// Get all cell classes
var memberOf = clicked.className.split(/\s+/);
for (var i = 0; i < memberOf.length; i++) {
var testClass = '.' + memberOf[i];
var items = contains('#tictactoe ' + testClass, turn);
// winning condition: turn == N_SIZE
if (items.length == N_SIZE) {
return true;
}
}
return false;
}
function contains(selector, text) {
var elements = document.querySelectorAll(selector);
return [].filter.call(elements, function(element){
return RegExp(text).test(element.textContent);
});
}
/*
* Sets clicked square and also updates the turn.
*/
function set() {
if (this.innerHTML !== EMPTY) {
return;
}
this.innerHTML = turn;
moves += 1;
score[turn] += this.identifier;
if (win(this)) {
alert('Winner: Player ' + turn);
startNewGame();
} else if (moves === N_SIZE * N_SIZE) {
alert("Draw");
startNewGame();
} else {
turn = turn === "X" ? "O" : "X";
document.getElementById('turn').textContent = 'Player ' + turn;
}
}
init();
Raw
style.css
table {
border-collapse:collapse;
}
td {
background-color: black;
border: 3px solid white;
font-size:80px;
color:#ffffff;
border-radius: 10px 10px 10px 10px;
}
Raw
tic-tac-toe-vanilla-js.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment