Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding tic tac toe #68

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

adding tic tac toe #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Fronted Projects/Random-Gif-Generator
Open in desktop
Submodule Random-Gif-Generator added at 285304
Binary file added Fronted Projects/TIc Tac Toe/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added Fronted Projects/TIc Tac Toe/assets/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added Fronted Projects/TIc Tac Toe/assets/gradient-bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 40 additions & 0 deletions Fronted Projects/TIc Tac Toe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"
rel="stylesheet"
/>

<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="wrapper">

<p class="game-info"></p>

<div class="tic-tac-toe">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
</div>

<button class="btn">New Game</button>
</div>
<script src="index.js"></script>
</body>
</html>
116 changes: 116 additions & 0 deletions Fronted Projects/TIc Tac Toe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
const boxes = document.querySelectorAll(".box");
const gameInfo = document.querySelector(".game-info");
const newGameBtn = document.querySelector(".btn");


let currentPlayer;
let gameGrid;

const winningPositions = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
];

//let's create a function to initialise the game
function initGame() {
currentPlayer = "X";
gameGrid = ["","","","","","","","",""];
//UI pr empty bhi karna padega boxes ko
boxes.forEach((box, index) => {
box.innerText = "";
boxes[index].style.pointerEvents = "all";
//one more thing is missing, initialise box with css properties again
box.classList = `box box${index+1}`;
});
newGameBtn.classList.remove("active");
gameInfo.innerText = `Current Player - ${currentPlayer}`;
}

initGame();

function swapTurn() {
if(currentPlayer === "X") {
currentPlayer = "O";
}
else {
currentPlayer = "X";
}
//UI Update
gameInfo.innerText = `Current Player - ${currentPlayer}`;
}

function checkGameOver() {
let answer = "";

winningPositions.forEach((position) => {
//all 3 boxes should be non-empty and exactly same in value
if( (gameGrid[position[0]] !== "" || gameGrid[position[1]] !== "" || gameGrid[position[2]] !== "")
&& (gameGrid[position[0]] === gameGrid[position[1]] ) && (gameGrid[position[1]] === gameGrid[position[2]])) {

//check if winner is X
if(gameGrid[position[0]] === "X")
answer = "X";
else {
answer = "O";
}


//disable pointer events
boxes.forEach((box) => {
box.style.pointerEvents = "none";
})

//now we know X/O is a winner
boxes[position[0]].classList.add("win");
boxes[position[1]].classList.add("win");
boxes[position[2]].classList.add("win");
}
});

//it means we have a winner
if(answer !== "" ) {
gameInfo.innerText = `Winner Player - ${answer}`;
newGameBtn.classList.add("active");
return;
}

//We know, NO Winner Found, let's check whether there is tie
let fillCount = 0;
gameGrid.forEach((box) => {
if(box !== "" )
fillCount++;
});

//board is Filled, game is TIE
if(fillCount === 9) {
gameInfo.innerText = "Game Tied !";
newGameBtn.classList.add("active");
}

}

function handleClick(index) {
if(gameGrid[index] === "" ) {
boxes[index].innerText = currentPlayer;
gameGrid[index] = currentPlayer;
boxes[index].style.pointerEvents = "none";
//swap karo turn ko
swapTurn();
//check koi jeet toh nahi gya
checkGameOver();
}
}

boxes.forEach((box, index) => {
box.addEventListener("click", () => {
handleClick(index);
})
});

newGameBtn.addEventListener("click", initGame);
90 changes: 90 additions & 0 deletions Fronted Projects/TIc Tac Toe/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
*,*::before,*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', 'sans-serif';
}

.wrapper{
width: 100vw;
height: 100vh;
background-image: url(./assets/gradient-bg.jpg);
background-size: cover;
background-position: center;
display: grid;
place-items: center;
}

.game-info{
color:white;
position:absolute;
top:3rem;
left:50%;
transform:translateX(-50%);
background-color: rgba(255, 255, 255, 0.15);
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 0.5rem 3rem;
/* text-align:center; */

}

.tic-tac-toe{
width:90%;
max-width:20rem;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 2rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
aspect-ratio: 1/1;
}


.box{
position:relative;
width:100%;
aspect-ratio: 1/1;
cursor: pointer;
font-size: 3rem;
color:white;
display: flex;
justify-content: center;
align-items: center;
}

.box1, .box2, .box4, .box5{
border-right:2px solid white;
border-bottom:2px solid white;
}

.box3, .box6{
border-bottom: 2px solid white;
}

.box7, .box8{
border-right:2px solid white;
}

.btn{
color:white;
position: absolute;
bottom:3rem;
left:50%;
transform:translateX(-50%);
background-color: rgba(255, 255, 255, 0.15);
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 0.5rem 2rem;
cursor:pointer;
display: none;
}

.btn.active{
display: flex;
}

.win{
background-color: rgba(0, 255, 0, 0.3);
}
1 change: 1 addition & 0 deletions Fronted Projects/ecommerce-shopping-cart
Open in desktop
Submodule ecommerce-shopping-cart added at c532b8