How To Make A TIC TAC TOE Game In Javascript
In This Javascript Tutorial we will See How To Build A Tic-Tac-Toe Game With Replay And Get The Winner And Change Winning Boxes Color Using JS And Netbeans Editor + HTML5 + CSS3 .
Part 1
Part 2
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Javascript TIC TAC TOE</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{box-sizing: border-box}
.container{width: 300px;
overflow: hidden;
margin: 50px auto 0 auto;
}
.container span{width: 100%;
display: block;
text-align: center;
font-family: sans-serif;
color: #fff;
font-size: 25px;
background: #446CB3;
}
.container .box{float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
transition: all .25s ease-in-out;
font-family: sans-serif;
font-size: 85px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
.container .box:hover{background: rgba(10,10,10,0.5);
color: #fff
}
button{background: #26C281;
color: #fff;
font-weight: bold;
border: 1px solid yellow;
cursor: pointer;
width: 200px;
height: 40px;
font-size: 22px;
display: block;
margin: 10px auto}
.win{background: #F9690E; color: #fff}
</style>
</head>
<body>
<div class="container" id="main">
<span id="turn">Play</span>
<!-- show X or O on div click -->
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
<div class="box" id="box7"></div>
<div class="box" id="box8"></div>
<div class="box" id="box9"></div>
</div>
<!-- Play Again And Reset All Info -->
<button onclick="replay()">Play Again</button>
<script>
var turn = document.getElementById("turn"),
// boxes => all boxes
// X_or_O => to set X or O into the box
boxes = document.querySelectorAll("#main div"), X_or_O = 0;
function selectWinnerBoxes(b1,b2,b3){
b1.classList.add("win");
b2.classList.add("win");
b3.classList.add("win");
turn.innerHTML = b1.innerHTML + " Won Congrat";
turn.style.fontSize = "40px";
}
function getWinner(){
var box1 = document.getElementById("box1"),
box2 = document.getElementById("box2"),
box3 = document.getElementById("box3"),
box4 = document.getElementById("box4"),
box5 = document.getElementById("box5"),
box6 = document.getElementById("box6"),
box7 = document.getElementById("box7"),
box8 = document.getElementById("box8"),
box9 = document.getElementById("box9");
// get all posibilites
if(box1.innerHTML !== "" && box1.innerHTML === box2.innerHTML && box1.innerHTML === box3.innerHTML)
selectWinnerBoxes(box1,box2,box3);
if(box4.innerHTML !== "" && box4.innerHTML === box5.innerHTML && box4.innerHTML === box6.innerHTML)
selectWinnerBoxes(box4,box5,box6);
if(box7.innerHTML !== "" && box7.innerHTML === box8.innerHTML && box7.innerHTML === box9.innerHTML)
selectWinnerBoxes(box7,box8,box9);
if(box1.innerHTML !== "" && box1.innerHTML === box4.innerHTML && box1.innerHTML === box7.innerHTML)
selectWinnerBoxes(box1,box4,box7);
if(box2.innerHTML !== "" && box2.innerHTML === box5.innerHTML && box2.innerHTML === box8.innerHTML)
selectWinnerBoxes(box2,box5,box8);
if(box3.innerHTML !== "" && box3.innerHTML === box6.innerHTML && box3.innerHTML === box9.innerHTML)
selectWinnerBoxes(box3,box6,box9);
if(box1.innerHTML !== "" && box1.innerHTML === box5.innerHTML && box1.innerHTML === box9.innerHTML)
selectWinnerBoxes(box1,box5,box9);
if(box3.innerHTML !== "" && box3.innerHTML === box5.innerHTML && box3.innerHTML === box7.innerHTML)
selectWinnerBoxes(box3,box5,box7);
}
// set event onclick
for(var i = 0; i < boxes.length; i++){
boxes[i].onclick = function(){
// not allow to change the value of the box
if(this.innerHTML !== "X" && this.innerHTML !== "O"){
if(X_or_O%2 === 0){
console.log(X_or_O);
this.innerHTML = "X";
turn.innerHTML = "O Turn Now";
getWinner();
X_or_O += 1;
}else{
console.log(X_or_O);
this.innerHTML = "O";
turn.innerHTML = "X Turn Now";
getWinner();
X_or_O += 1;
}
}
};
}
function replay(){
for(var i = 0; i < boxes.length; i++){
boxes[i].classList.remove("win");
boxes[i].innerHTML = "";
turn.innerHTML = "Play";
turn.style.fontSize = "25px";
}
}
</script>
</body>
</html>
OUTPUT:
 |
| Start |
 |
| Mouse Hover |
 |
| O turn |
 |
| X Turn |
 |
| O Win |
 |
| X Win |
 |
| Super Goku Win |