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.
Table of Contents
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>