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 Heading Text using JavaScript Current Date in mm/dd/yyyy Format JavaScript Current Date in dd/mm/yyyy Format in JavaScript JavaScript Current Date in yyyy-mm-dd Format JavaScript Get Date Difference in Hours JavaScript Get Date Difference in Minutes JavaScript Get Date Difference in Seconds Get Last Character of String with JavaScript Trigger Button Click On Page Load JavaScript Get id Of Child Element JavaScript Get Id Of Parent Element in JavaScript Get Table Row Index onclick in JavaScript Remove specific option from Select Tag with JavaScript Change Selected Option of Select Tag with JavaScript Get Length of Text In Textarea with JavaScript Change Text Color of Select Tag Option using JavaScript Change Heading Text in JavaScript Get Input Value Length in JavaScript Toggle Button Text with JavaScript Change Background Color of Dropdown with Dropdown using JavaScript Emoji Mood Slider with HTML CSS and JavaScript Hide and Show Div with Radio Button using JavaScript Count Options In Select Tag with JavaScript Get Select Tag Text OnChange with JavaScript Change Background Color OnClick using Input Field