diff --git a/TicTacToe/index.html b/TicTacToe/index.html new file mode 100644 index 0000000..c9df0aa --- /dev/null +++ b/TicTacToe/index.html @@ -0,0 +1,43 @@ + + + + + + + Tic Tac Toe + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+

Welcome to Tic Tac Toe Game

+
+ Turn for X + +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/TicTacToe/index.js b/TicTacToe/index.js new file mode 100644 index 0000000..ac2821e --- /dev/null +++ b/TicTacToe/index.js @@ -0,0 +1,63 @@ +console.log("Welcome to Tic Tac Toe"); +let turn = "X"; +let gameOver = false; + + +//Function to change the turn +const changeTurn = ()=>{ + return turn === "X" ? "0" : "X" +} + +//Function to check win +const checkWin = () => { + let boxtext = document.getElementsByClassName("boxtext"); + let wins = [ + [0,1,2], + [3,4,5], + [6,7,8], + [0,3,6], + [1,4,7], + [2,5,8], + [0,4,8], + [2,4,6] + ] + wins.forEach(e =>{ + if((boxtext[e[0]].innerText === boxtext[e[1]].innerText) &&(boxtext[e[1]].innerText === boxtext[e[2]].innerText) && (boxtext[e[1]].innerText !== "") ) + { + document.querySelector(".info").innerHTML = boxtext[e[0]].innerText + " Won" + gameOver = true; + } + }) +} + + +//Game Logic + +let boxes = document.getElementsByClassName("box"); +Array.from(boxes).forEach(element => { + let boxtext = element.querySelector(".boxtext"); + element.addEventListener("click", ()=> { + if(boxtext.innerHTML === "") + { + boxtext.innerHTML = turn; + turn = changeTurn(); + checkWin(); + if(!gameOver){ + document.querySelector(".info").innerHTML = "Turn for " + turn; + } + } + }) +}) + +//Add on event listener for reset + +reset.addEventListener("click",() =>{ + let boxtext = document.getElementsByClassName("boxtext"); + Array.from(boxtext).forEach((element) =>{ + element.innerHTML = ""; + }) + turn = "X" + gameOver = false + document.querySelector(".info").innerHTML = "Turn for " + turn; +}) + diff --git a/TicTacToe/styles.css b/TicTacToe/styles.css new file mode 100644 index 0000000..93b84c2 --- /dev/null +++ b/TicTacToe/styles.css @@ -0,0 +1,92 @@ +*{ + margin: 0;; + padding: 0; +} + +nav{ + background-color:rgb(34, 2, 35); + color:white; + height: 55px; + font-size:22px; + padding:0 15px; + display:flex; + align-items:center; +} + +nav ul{ + list-style-type:none; +} + +.gameContainer{ + display:flex; + margin-top:50px; + justify-content:center; +} + +.container{ + display:grid; + grid-template-rows: repeat(3,10vw); + grid-template-columns: repeat(3,10vw); +} + +.box{ + border:2px solid black; + font-size:8vw; + cursor:pointer; + display:flex; + justify-content:center; + align-items:center; +} +.box:hover{ + background-color:rgb(247, 235, 247); + +} +.gameInfo{ + padding:0 34px; +} +.gameInfo div{ + padding:15px 0; +} +.info{ + font-size: 1.2rem; + padding: 0 5px; +} +#reset{ + padding: 4px 11px; + margin: 0 9px; + background-color: #ddd3e7; + font-size: 1.2rem; + border-radius: 6px; + cursor: pointer; + font-weight: bold; +} + + + +.br-0{ + border-right:0; +} +.bl-0{ + border-left:0; +} +.bt-0{ + border-top:0; +} +.bb-0{ + border-bottom:0; +} + + +@media screen and (max-width:600px) +{ + .gameContainer{ + flex-wrap: wrap; + } + .gameInfo{ + margin-top: 20px; + } + .container{ + grid-template-rows: repeat(3,20vw); + grid-template-columns: repeat(3,20vw); + } +} \ No newline at end of file