Skip to content

Commit

Permalink
added basic tic-tac-toe game
Browse files Browse the repository at this point in the history
  • Loading branch information
@gauri-1312
gauri-1312 committed Oct 3, 2021
1 parent d236b64 commit 29d3ea7
Show file tree
Hide file tree
Showing 3 changed files with 259 additions and 0 deletions.
47 changes: 47 additions & 0 deletions basic tic-tac-toe/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Tic Tac Toe</title>
</head>
<body>
<div class="option-page">
<div class="player-mode">
<h1>Choose Player Mode</h1>
<button id="single-player">Single Player</button>
<div class="divider-1"></div>
<button id="two-player">Two Player</button>
</div>
<div class="x-or-o">
<h1>Choose whether you want to be X or O</h1>
<button id="chose-x">X</button>
<div class="divider-2"></div>
<button id="chose-o">O</button>
</div>
</div>
<div class="container">
<h1>Tic Tac Toe</h1>
<div class="game-status">
<div class="player-status">It's <span>X</span>'s turn !</div>
<div class="reset-button">Reset</div>
</div>
<div class="grid">
<div class="grid-item boxone"></div>
<div class="grid-item boxtwo"></div>
<div class="grid-item boxthree"></div>
<div class="grid-item boxfour"></div>
<div class="grid-item boxfive"></div>
<div class="grid-item boxsix"></div>
<div class="grid-item boxseven"></div>
<div class="grid-item boxeight"></div>
<div class="grid-item boxnine"></div>
</div>
<p></p>
</div>
<script src="main.js"></script>
</body>
</html>
117 changes: 117 additions & 0 deletions basic tic-tac-toe/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
const gridElement=document.querySelectorAll(".grid-item");
const display=document.querySelector(".container");
const reset=document.querySelector(".reset-button");
const playerstat=document.querySelector(".player-status");
const chooseButtonX=document.getElementById('chose-x');
const chooseButtonO=document.getElementById('chose-o');
const chooseButtonTP=document.getElementById('two-player');
const chooseButtonSP=document.getElementById('single-player');
let isTwoPlayerGame=false;
let gameOver=false;

chooseButtonTP.addEventListener('click',twoplayer);
function twoplayer(event){isTwoPlayerGame=true;display.classList.add('twoPlayer');}


let xisnext=true;
chooseButtonX.addEventListener('click',handleChooseButtonX)
function handleChooseButtonX() {document.querySelector('.option-page').classList.add('hide');xisnext=true;playerstat.innerHTML="It's X's turn !";}
chooseButtonO.addEventListener('click',handleChooseButtonO)
function handleChooseButtonO() {document.querySelector('.option-page').classList.add('hide');xisnext=false;playerstat.innerHTML="It's O's turn !";}




function resetGame(event) {
for(let i=0;i<gridElement.length;i++){
gridElement[i].classList.remove('x','o','change-color');
}
document.querySelector('.option-page').classList.remove('hide');
gameOver=false;
}

function changePlayerStat() {
if(xisnext===true){playerstat.innerHTML="It's X's turn !";}
else if(xisnext===false){playerstat.innerHTML="It's O's turn !";}
}


function checkGameStatus() {
const one=gridElement[0].classList[2];
const two=gridElement[1].classList[2];
const three=gridElement[2].classList[2];
const four=gridElement[3].classList[2];
const five=gridElement[4].classList[2];
const six=gridElement[5].classList[2];
const seven=gridElement[6].classList[2];
const eight=gridElement[7].classList[2];
const nine=gridElement[8].classList[2];
if(one&&one===two&&one===three){
gameOver=true;
playerstat.innerHTML=one+" has won !";
gridElement[0].classList.add('change-color');gridElement[1].classList.add('change-color');gridElement[2].classList.add('change-color');return;}
if(one&&one===four&&one===seven){
gameOver=true;
playerstat.innerHTML=one+" has won !";
gridElement[0].classList.add('change-color');gridElement[3].classList.add('change-color');gridElement[6].classList.add('change-color');return;}
if(one&&one===five&&one===nine){
gameOver=true;
playerstat.innerHTML=one+" has won !";
gridElement[0].classList.add('change-color');gridElement[4].classList.add('change-color');gridElement[8].classList.add('change-color');return;}
if(two&&two===five&&two===eight){
gameOver=true;
playerstat.innerHTML=two+" has won !";
gridElement[1].classList.add('change-color');gridElement[4].classList.add('change-color');gridElement[7].classList.add('change-color');return;}
if(three&&three===six&&three===nine){
gameOver=true;
playerstat.innerHTML=three+" has won !";
gridElement[2].classList.add('change-color');gridElement[5].classList.add('change-color');gridElement[8].classList.add('change-color');return;}
if(three&&three===five&&three===seven){
gameOver=true;
playerstat.innerHTML=three+" has won !";
gridElement[2].classList.add('change-color');gridElement[4].classList.add('change-color');gridElement[6].classList.add('change-color');return;}
if(four&&four===five&&four===six){
gameOver=true;
playerstat.innerHTML=four+" has won !";
gridElement[3].classList.add('change-color');gridElement[4].classList.add('change-color');gridElement[5].classList.add('change-color');return;}
if(seven&&seven===eight&&seven===nine){
gameOver=true;
playerstat.innerHTML=seven+" has won !";
gridElement[6].classList.add('change-color');gridElement[7].classList.add('change-color');gridElement[8].classList.add('change-color');return;}
else if(one&&two&&three&&four&&five&&six&&seven&&eight&&nine){
gameOver=true;
playerstat.innerHTML="It's a Draw !";return;
}

}


function clickCell(event){
if(gameOver===false){
if(event.target.classList[2]!='x'&&event.target.classList[2]!='o'){
if(xisnext===true){
event.target.classList.add('x');
xisnext=false;
checkGameStatus();
if(gameOver===false){changePlayerStat();}


}
else if(xisnext===false) {
event.target.classList.add('o');
xisnext=true;
checkGameStatus();
if(gameOver===false){changePlayerStat();}
}
}
}
}



for(let i=0;i<gridElement.length;i++){
gridElement[i].addEventListener('click',clickCell);
}
reset.addEventListener('click',resetGame);


95 changes: 95 additions & 0 deletions basic tic-tac-toe/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
body {
justify-content:center;

}
h1{
text-align: center;
}
.option-page {
flex-direction: column;
top:0;
bottom:0;
right:0;
left:0;
position:fixed;
align-items:center;
justify-content:center;
justify-content: space-evenly;
float:none;
display:flex;
color:white;
background-color: rgba(0, 0, 0, 0.9);
}
.hide {
display:none;
}
.divider-1 {
width:80px;
height:auto;
display:inline-block;
}
.divider-2 {
width:450px;
height:auto;
display:inline-block

}
.option-page button {
font-size:2rem;
cursor:pointer;
}


.container {
background:rgb(9 6 62);
margin: 50px;
color:white;
text-align:center;
}
.game-status {
color:white;
justify-content: space-around;
margin:40px;
display:flex;
font-size:30px;
}
.reset-button{
cursor:pointer;
}
.change-color::after {
color:rgb(65, 131, 153);
}

.grid {
display:inline-grid;
grid-template-columns:auto auto auto;
grid-template-rows:auto auto auto;
background:white;
grid-gap:5px;
margin:30px;
}
.grid-item {
background-color:rgb(9 6 62);
padding: 20px;
font-size: 30px;
text-align: center;
cursor:pointer;
justify-content:space-evenly;
height:150px;
width:150px;
}
.x,
.o {
cursor:default;
}
.x::after{
content:"x";
justify-content: center;
font-size:100px;
}
.o::after{
content:"o";
justify-content:center;
font-size:100px;
}

0 comments on commit 29d3ea7

Please sign in to comment.