In this instructional exercise, I will disclose to you how to assemble an essential tic tac toe game utilizing HTML, CSS and JavaScript.
The greater part of the individuals realize that when we were kids we used to play this game on paper. We played it commonly until we win.
The individuals who don’t think about this game let me give you review. In this game, there are two players,
the player who makes three of their imprints in line and segment or one of the two diagonals wins.
At the point when the block fills and no blend making then the game is in draw state.
There are a few guidelines that we will characterize here is that as we probably
are aware the essential thing is move, here the player can’t fix that move. By tapping on the container he can make a move
when the move is done, the game continued to allow to another player.
At each move, it will show whose player moves it is either is An or it is B
At the point when the game finishes it shows three results:
- Winner player one
- Winner player two
- draw
It likewise shows the replay button if a tie occurs.
JavaScript Tic Tac Toe Game Example:
Its writing computer programs isn’t that basic as it looks. In this js program, we track each move for the following players move.
This is very mind-boggling when we start coding. I am sharing my straightforward code
so you can comprehend the game effectively. So essentially we make 3 documents here or we can do all
code in one record which incorporates all HTML, CSS and javascript.
So right off the bat, we make a plan or UI part at that point start take a shot at its usefulness.
You can make this by utilizing plain javascript.
So we burden code on the stacking of HTML archive.
Prior to composing code, we additionally need to check what are the triumphant conditions.
Player 1 plays when the move is equivalent to 1, 3, 5, 7 and 9. Player 2 plays when the move is equivalent to 2, 4, 6 and 8.
Along these lines, Player 1 plays when move is an odd number.
Here we can compose the rationale along these lines, in the event that ((count%2)==1), at that point, it is player 1’s turn,
else it is player 2’s turn. At the point when any player pushes on a clear space, that particular
player puts either an X or O on the playing board.
In the code right off the bat, we compose the triumphant case situations at which numbers he/she can win.
At that point, we make a capacity for each move player is playing, in the capacity we watch that players win or not by that move.
We additionally make a capacity on the off chance that nobody wins, at that point they can again play that game.
Here is code to make the game:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Tic Tac Toe Game</title>
<style>
*{
box-sizing: border-box;
font-family: sans-serif;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #BF360C;
}
.container{
width: 500px;
height: 500px;
display: grid;
background-color: #E64A19;
grid-gap: 5px;
grid-template-columns: 33% 33% 33%;
grid-auto-rows: 33% 33% 33%;
}
.card{
position: relative;
background-color: #BF360C;
cursor: pointer;
}
.card::before{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 8rem;
}
.card.x::before{
content: "X";
}
.card.o::before{
content: "O";
}
.winner{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
width: 400px;
height: 200px;
padding: 20px 40px;
background-color: #fff;
font-size: 2rem;
border-radius: 20px;
text-align: center;
animation: animate .5s linear;
}
@keyframes animate{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.winner button{
margin-top: 20px;
width: 80px;
height: 35px;
line-height: 35px;
padding: 0;
border: 0;
outline: 0;
border-radius: 20px;
cursor: pointer;
color: #fff;
background-color: #BF360C;
}
</style>
</head>
<body>
<div class="container">
<div class="card" data-index="1"></div>
<div class="card" data-index="2"></div>
<div class="card" data-index="3"></div>
<div class="card" data-index="4"></div>
<div class="card" data-index="5"></div>
<div class="card" data-index="6"></div>
<div class="card" data-index="7"></div>
<div class="card" data-index="8"></div>
<div class="card" data-index="9"></div>
</div>
</body>
<script>
const cards = Array.from(document.querySelectorAll(".card"));
const winner = [[1,2,3],[4,5,6],[7,8,9],[1,5,9],[3,5,7],[1,4,7],[2,5,8],[3,6,9]];
let firstPlayer = [], secondPlayer = [], count = 0;
/*******************************************************/
function check(array){
let finalResult = false;
for(let item of winner){
let res = item.every(val => array.indexOf(val) !== -1);
if(res){
finalResult = true;
break;
}
}
return finalResult;
}
/*******************************************************/
function winnerpleyr(p){
const modal = document.createElement("div");
const player = document.createTextNode(p);
const replay = document.createElement("button");
modal.classList.add("winner");
modal.appendChild(player);
replay.appendChild(document.createTextNode("Replay"));
// replay.setAttribute("onclick","rep();");
replay.onclick = function() { rep() };
modal.appendChild(replay);
document.body.appendChild(modal);
}
/*******************************************************/
function draw(){
if(this.classList == "card"){
count++;
if(count%2 !== 0){
this.classList.add("x");
firstPlayer.push(Number(this.dataset.index));
if(check(firstPlayer)){
winnerpleyr("Congrats player one you win");
return true;
}
} else{
this.classList.add("o");
secondPlayer.push(Number(this.dataset.index));
if(check(secondPlayer)){
winnerpleyr("Congrats player two you win");
return true;
}
}
if(count === 9){
winnerpleyr("Draw");
}
}
}
/*******************************************************/
function rep(){
const w = document.querySelector(".winner");
// cards.forEach(card => card.classList = "card");
firstPlayer = [];
secondPlayer = [];
count = 0;
w.remove();
[].forEach.call(cards, function(el) {
el.classList.remove("x");
el.classList.remove("o");
});
}
/*******************************************************/
cards.forEach(card => card.addEventListener("click", draw));
</script>
</html>Remark down underneath on the off chance that you have any questions identified with above JavaScript Tic Tac Toe game.