Tic Tac Toe Game in JavaScript - Code and Demo

In this tutorial we will see how to make a Tic Tac Toe Game in JavaScript. Pure Vanilla JavaScript is used to make this Tic Tac Toe game, JavaScript code and CSS code is also given with explanation.

HTML Code

HTML Code is given below, In this code we have a main div with class 'game', inside this div there is a paragraph tag which will display the winner and there are nine span tags, each used to make a tic tac toe box.

Each box has it's unique id, from 1 to 9. This id is used to check the mark of both players in horizontal, vertical and diagonal direction. This is done on every click of two players.

<div class="game">
  <p id='output'></p>
  <span class="sp" id="1" onclick="game(this)"></span>
  <span class="sp" id="2" onclick="game(this)"></span>
  <span class="sp" id="3" onclick="game(this)"></span>
  <div style="clear: both;"></div>
  <span class="sp" id="4" onclick="game(this)"></span>
  <span class="sp" id="5" onclick="game(this)"></span>
  <span class="sp" id="6" onclick="game(this)"></span>
  <div style="clear: both;"></div>
  <span class="sp" id="7" onclick="game(this)"></span>
  <span class="sp" id="8" onclick="game(this)"></span>
  <span class="sp" id="9" onclick="game(this)"></span>
</div>

CSS Code

CSS code is used to center align the game area and to make it look like actual Tic Tac Toe game. Class 'sp' is used to change appearance of each box of the game.

<style>
 body {
 font-family: monospace;
 }
 .sp {
 display: block;
 width: 100px;
 height: 100px;
 margin: 2px;
 border: 1px solid #bbb;
 float: left;
 font-size: 50px;
 text-align: center;
 line-height: 2;
 }
 .game {
 position: absolute;
 top: 50%;
 left: 50%;
 background-color: #ddd;
 border: 2px solid #000;
 padding: 10px 10px;
 transform: translate(-50%, -50%);
 }
 #output {
 font-size: 20px;
 margin: 5px;
 text-align: center;
 font-weight: bold;
 color: #006100;
 }
</style>

JavaScript Code

Take a look at the JavaScript code of Tic Tac Toe game. We have used Vanilla JavaScript to make this game.

Basic features of JavaScript like getElementById() method, conditional statements like if, else and else if, innerHTML property, JavaScript return statement and JavaScript function are used to make this game work.

The logic behind the game is very simple, there are two players that can play this game.

On each click on the box, a space is marked with either a tick or a cross. Tick is used to represent the Player 1 and Cross is used to represent the Player 2.

On each player's turn, the JavaScript code will check the marks in a horizontal, vertical, or diagonal direction for that particular player.

This is done using the id of each box. For example if player 1 has marked the box number 2, the code will check the box number 1,3,5 and 8 for the same mark (i.e a tick mark in this case).

If box number 1 and 3 or 5 and 8 have same markings, player 1 will be declared winner. This is done using if and else if conditions.

Two outer if and else conditions are used for each turn of two players.

getElementById() method is used to select boxes using their ids.

innerHTML property is used to get/set the content of boxes and to display the winner's name.

A user-defined function game() is executed with help of onclick event which is attached with all nine boxes. This is the heart of the game and everything is done inside this function.

<script>
 var a;
 var id;
 function game(clicked) {
     
 if (a == 1) {
     
 if (clicked.innerHTML == "") {
 clicked.innerHTML = "X";
 id = clicked.id;
 
 if (id == 1) {
 if (document.getElementById('2').innerHTML == "X" && document.getElementById('3').innerHTML == "X" || document.getElementById('4').innerHTML == "X" && document.getElementById('7').innerHTML == "X" || document.getElementById('5').innerHTML == "X" && document.getElementById('9').innerHTML == "X") {
 document.getElementById('output').innerHTML = 'Player 2 Wins!';
 }
 }
 else if (id == 2) {
 if (document.getElementById('1').innerHTML == "X" && document.getElementById('3').innerHTML == "X" || document.getElementById('5').innerHTML == "X" && document.getElementById('8').innerHTML == "X") {
 document.getElementById('output').innerHTML = 'Player 2 Wins!';
 }
 }
 else if (id == 3) {
 if (document.getElementById('1').innerHTML == "X" && document.getElementById('2').innerHTML == "X" || document.getElementById('6').innerHTML == "X" && document.getElementById('9').innerHTML == "X" ||
 document.getElementById('5').innerHTML == "X" && document.getElementById('7').innerHTML == "X") {
 document.getElementById('output').innerHTML = 'Player 2 Wins!';
 }
 }
 else if (id == 4) {
 if (document.getElementById('1').innerHTML == "X" && document.getElementById('7').innerHTML == "X" || document.getElementById('5').innerHTML == "X" && document.getElementById('6').innerHTML == "X") {
 document.getElementById('output').innerHTML = 'Player 2 Wins!';
 }
 }
 else if (id == 5) {
 if (document.getElementById('2').innerHTML == "X" && document.getElementById('8').innerHTML == "X" || document.getElementById('4').innerHTML == "X" && document.getElementById('6').innerHTML == "X" || document.getElementById('3').innerHTML == "X" && document.getElementById('7').innerHTML == "X" || document.getElementById('1').innerHTML == "X" && document.getElementById('9').innerHTML == "X") {
 document.getElementById('output').innerHTML = 'Player 2 Wins!';
 }
 }
 else if (id == 6) {
 if (document.getElementById('3').innerHTML == "X" && document.getElementById('9').innerHTML == "X" || document.getElementById('4').innerHTML == "X" && document.getElementById('5').innerHTML == "X") {
 document.getElementById('output').innerHTML = 'Player 2 Wins!';
 }
 }
 else if (id == 7) {
 if (document.getElementById('8').innerHTML == "X" && document.getElementById('9').innerHTML == "X" || document.getElementById('1').innerHTML == "X" && document.getElementById('4').innerHTML == "X" || document.getElementById('3').innerHTML == "X" && document.getElementById('5').innerHTML == "X") {
 document.getElementById('output').innerHTML = 'Player 2 Wins!';
 }
 }
 else if (id == 8) {
 if (document.getElementById('7').innerHTML == "X" && document.getElementById('9').innerHTML == "X" || document.getElementById('2').innerHTML == "X" && document.getElementById('5').innerHTML == "X") {
 document.getElementById('output').innerHTML = 'Player 2 Wins!';
 }
 }
 else if (id == 9) {
 if (document.getElementById('3').innerHTML == "X" && document.getElementById('6').innerHTML == "X" || document.getElementById('7').innerHTML == "X" && document.getElementById('8').innerHTML == "X" || document.getElementById('1').innerHTML == "X" && document.getElementById('5').innerHTML == "X") {
 document.getElementById('output').innerHTML = 'Player 2 Wins!';
 }
 }
 return a = 0;
 }
 }
 else {
 
 if (clicked.innerHTML == "") {
 clicked.innerHTML = "✓";
 id = clicked.id;
     
 if (id == 1) {
 if (document.getElementById('2').innerHTML == "✓" && document.getElementById('3').innerHTML == "✓" || document.getElementById('4').innerHTML == "✓" && document.getElementById('7').innerHTML == "✓" || document.getElementById('5').innerHTML == "✓" && document.getElementById('9').innerHTML == "✓") {
 document.getElementById('output').innerHTML = 'Player 1 Wins!';
 }
 }
 else if (id == 2) {
 if (document.getElementById('1').innerHTML == "✓" && document.getElementById('3').innerHTML == "✓" || document.getElementById('5').innerHTML == "✓" && document.getElementById('8').innerHTML == "✓") {
 document.getElementById('output').innerHTML = 'Player 1 Wins!';
 }
 }
 else if (id == 3) {
 if (document.getElementById('1').innerHTML == "✓" && document.getElementById('2').innerHTML == "✓" || document.getElementById('6').innerHTML == "✓" && document.getElementById('9').innerHTML == "✓" ||
 document.getElementById('5').innerHTML == "✓" && document.getElementById('7').innerHTML == "✓") {
 document.getElementById('output').innerHTML = 'Player 1 Wins!';
 }
 }
 else if (id == 4) {
 if (document.getElementById('1').innerHTML == "✓" && document.getElementById('7').innerHTML == "✓" || document.getElementById('5').innerHTML == "✓" && document.getElementById('6').innerHTML == "✓") {
 document.getElementById('output').innerHTML = 'Player 1 Wins!';
 }
 }
 else if (id == 5) {
 if (document.getElementById('2').innerHTML == "✓" && document.getElementById('8').innerHTML == "✓" || document.getElementById('4').innerHTML == "✓" && document.getElementById('6').innerHTML == "✓" || document.getElementById('3').innerHTML == "✓" && document.getElementById('7').innerHTML == "✓" || document.getElementById('1').innerHTML == "✓" && document.getElementById('9').innerHTML == "✓") {
 document.getElementById('output').innerHTML = 'Player 1 Wins!';
 }
 }
 else if (id == 6) {
 if (document.getElementById('3').innerHTML == "✓" && document.getElementById('9').innerHTML == "✓" || document.getElementById('4').innerHTML == "✓" && document.getElementById('5').innerHTML == "✓") {
 document.getElementById('output').innerHTML = 'Player 1 Wins!';
 }
 }
 else if (id == 7) {
 if (document.getElementById('8').innerHTML == "✓" && document.getElementById('9').innerHTML == "✓" || document.getElementById('1').innerHTML == "✓" && document.getElementById('4').innerHTML == "✓" || document.getElementById('3').innerHTML == "✓" && document.getElementById('5').innerHTML == "✓") {
 document.getElementById('output').innerHTML = 'Player 1 Wins!';
 }
 }
 else if (id == 8) {
 if (document.getElementById('7').innerHTML == "✓" && document.getElementById('9').innerHTML == "✓" || document.getElementById('2').innerHTML == "✓" && document.getElementById('5').innerHTML == "✓") {
 document.getElementById('output').innerHTML = 'Player 1 Wins!';
 }
 }
 else if (id == 9) {
 if (document.getElementById('3').innerHTML == "✓" && document.getElementById('6').innerHTML == "✓" || document.getElementById('7').innerHTML == "✓" && document.getElementById('8').innerHTML == "✓" || document.getElementById('1').innerHTML == "✓" && document.getElementById('5').innerHTML == "✓") {
 document.getElementById('output').innerHTML = 'Player 1 Wins!';
 }
 }
 return a = 1;
 }
 }
 }
</script>

Demo

Get Last Element Of Array Without Removing It Remove Last Element From Array JavaScript Remove First Element From Array in JavaScript Tic Tac Toe Game in JavaScript Remove Class from HTML Tag OnClick JavaScript JavaScript Select li Tag By Index Display JavaScript Variable In HTML Insert HTML Code anywhere With JavaScript JavaScript Date Difference in Days JavaScript Hide Button After Click Simple Click and Hold Effect Using JavaScript Remove Class From All Elements in JavaScript JavaScript Select All HTML Elements Whose ID Start With Same String Count Checked Checkboxes of Specific Form with JavaScript Enable and Disable Button using JavaScript Add Class to HTML Tag On Click using JavaScript Change Class of HTML Tag Using JavaScript Get All Options In Select Tag using JavaScript Replace a Word from everywhere in a String using JavaScript Execute a Function on Hover Using JavaScript