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

How to Change Image on Hover with JavaScript How to Disable Button by Class Name in JavaScript How To Change Image Size with JavaScript How to change Image opacity with JavaScript How to Change image src on click with JavaScript How to get the lang attribute value in JavaScript How to Get attribute Value using JavaScript How To Check if Attribute Exists or not with JavaScript How To Count number of links on Page with JavaScript How To Scroll Page to Bottom using JavaScript How To Detect Shift Key Press with JavaScript Change Text Color On Hover with JavaScript Hide and Show div using JavaScript Get Button text with JavaScript Get textarea value with JavaScript Get table row Height with JavaScript Auto Increase width of input field with JavaScript Set Textarea maxLength with JavaScript Set Textarea Value with JavaScript JavaScript Count list items JavaScript set input field value Count Button Clicks with JavaScript Scroll Page to the Top on Click with JavaScript Change id of Element with JavaScript JavaScript Change li Text Color