diff --git a/excited.gif b/excited.gif new file mode 100644 index 0000000..ac0ecac Binary files /dev/null and b/excited.gif differ diff --git a/gameover.mp3 b/gameover.mp3 new file mode 100644 index 0000000..34033cd Binary files /dev/null and b/gameover.mp3 differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..9325df7 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + Tic Tac Toe + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Welcome to Tic Tac MyTicTacToe

+
+ Turn for X + +
+
+ +
+
+
+ + + diff --git a/music.mp3 b/music.mp3 new file mode 100644 index 0000000..f1507af Binary files /dev/null and b/music.mp3 differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..8ca1851 --- /dev/null +++ b/script.js @@ -0,0 +1,67 @@ +console.log("Welcome to Tic Tac Toe") +let music = new Audio("music.mp3") +let audioTurn = new Audio("ting.mp3") +let gameover = new Audio("gameover.mp3") +let turn = "X" +let isgameover = false; + +// Function to change the turn +const changeTurn = ()=>{ + return turn === "X"? "0": "X" +} + +// Function to check for a win +const checkWin = ()=>{ + let boxtext = document.getElementsByClassName('boxtext'); + let wins = [ + [0, 1, 2, 5, 5, 0], + [3, 4, 5, 5, 15, 0], + [6, 7, 8, 5, 25, 0], + [0, 3, 6, -5, 15, 90], + [1, 4, 7, 5, 15, 90], + [2, 5, 8, 15, 15, 90], + [0, 4, 8, 5, 15, 45], + [2, 4, 6, 5, 15, 135], + ] + wins.forEach(e =>{ + if((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== "") ){ + document.querySelector('.info').innerText = boxtext[e[0]].innerText + " Won" + isgameover = true + document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "200px"; + document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)` + document.querySelector(".line").style.width = "20vw"; + } + }) +} + +// Game Logic +// music.play() +let boxes = document.getElementsByClassName("box"); +Array.from(boxes).forEach(element =>{ + let boxtext = element.querySelector('.boxtext'); + element.addEventListener('click', ()=>{ + if(boxtext.innerText === ''){ + boxtext.innerText = turn; + turn = changeTurn(); + audioTurn.play(); + checkWin(); + if (!isgameover){ + document.getElementsByClassName("info")[0].innerText = "Turn for " + turn; + } + } + }) +}) + +// Add onclick listener to reset button +reset.addEventListener('click', ()=>{ + let boxtexts = document.querySelectorAll('.boxtext'); + Array.from(boxtexts).forEach(element => { + element.innerText = "" + }); + turn = "X"; + isgameover = false + document.querySelector(".line").style.width = "0vw"; + document.getElementsByClassName("info")[0].innerText = "Turn for " + turn; + document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "0px" +}) + diff --git a/style.css b/style.css new file mode 100644 index 0000000..5f6829d --- /dev/null +++ b/style.css @@ -0,0 +1,118 @@ +@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Roboto&display=swap'); +*{ + margin: 0; + padding: 0; +} + +nav{ + background-color: rgb(37, 9, 37); + color: white; + height: 65px; + font-size: 27px; + display: flex; + align-items: center; + padding: 0 12px; + font-family: 'Roboto', sans-serif; +} + +nav ul{ + list-style-type: none; +} + +.gameContainer{ + display: flex; + justify-content: center; + margin-top: 50px; +} + +.container{ + display: grid; + grid-template-rows: repeat(3, 10vw); + grid-template-columns: repeat(3, 10vw); + font-family: 'Roboto', sans-serif; + position: relative; +} + +.box{ + border: 2px solid black; + font-size: 8vw; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; +} + +.box:hover{ + background-color: rgb(242, 234, 250); +} + +.info { + font-size: 22px; +} + +.gameInfo{ + padding: 0 34px; + font-family: 'Baloo Bhaina 2', cursive; +} + +.gameInfo h1{ + font-size: 2.5rem; +} + +.imgbox img{ + width: 0; + transition: width 1s ease-in-out; +} + +.br-0{ + border-right: 0; +} + +.bl-0{ + border-left: 0; +} + +.bt-0{ + border-top: 0; +} + +.bb-0{ + border-bottom: 0; +} + +#reset { + margin: 0 23px; + padding: 1px 18px; + background: #f3e7f9; + border-radius: 6px; + cursor: pointer; + font-family: 'Baloo Bhaina 2'; + font-size: 15px; + font-weight: bolder; +} + +.line{ + background-color: black; + height: 3px; + width: 0; + position: absolute; + background-color: #911d91; + transition: width 1s ease-in-out; +} + +@media screen and (max-width: 950px) +{ + .gameContainer{ + flex-wrap: wrap; + } + .gameInfo{ + margin-top: 34px; + } + .gameInfo h1{ + font-size: 1.5rem; + } + .container { + grid-template-rows: repeat(3, 20vw); + grid-template-columns: repeat(3, 20vw); + } +} \ No newline at end of file diff --git a/ting.mp3 b/ting.mp3 new file mode 100644 index 0000000..6dbc877 Binary files /dev/null and b/ting.mp3 differ