diff --git a/Tic Tac Toe using vanilla javascript/excited.gif b/Tic Tac Toe using vanilla javascript/excited.gif new file mode 100644 index 00000000..ac0ecac2 Binary files /dev/null and b/Tic Tac Toe using vanilla javascript/excited.gif differ diff --git a/Tic Tac Toe using vanilla javascript/gameover.mp3 b/Tic Tac Toe using vanilla javascript/gameover.mp3 new file mode 100644 index 00000000..34033cdc Binary files /dev/null and b/Tic Tac Toe using vanilla javascript/gameover.mp3 differ diff --git a/Tic Tac Toe using vanilla javascript/index.html b/Tic Tac Toe using vanilla javascript/index.html new file mode 100644 index 00000000..76de4ed3 --- /dev/null +++ b/Tic Tac Toe using vanilla javascript/index.html @@ -0,0 +1,66 @@ + + + + + + + Tic Tac Toe + + + + + +
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+

Welcome to Tic Tac Toe

+
+ Turn for X + +
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/Tic Tac Toe using vanilla javascript/music.mp3 b/Tic Tac Toe using vanilla javascript/music.mp3 new file mode 100644 index 00000000..f1507af3 Binary files /dev/null and b/Tic Tac Toe using vanilla javascript/music.mp3 differ diff --git a/Tic Tac Toe using vanilla javascript/script.js b/Tic Tac Toe using vanilla javascript/script.js new file mode 100644 index 00000000..4d64df43 --- /dev/null +++ b/Tic Tac Toe using vanilla javascript/script.js @@ -0,0 +1,69 @@ +console.log("Welcome to Tic Tac Toe"); +let music = new Audio("music.mp3"); +let audioturn = new Audio("ting.mp3"); +let gameoveraudio = new Audio("gameover.mp3"); +let turn = "X"; +let gameover = false; + +// Function to change turn +const changeTurn = ()=>{ + return turn === "X"?"0":"X"; +} + +// Function to check for a Win +const checkWin = ()=>{ + let boxtexts = 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((boxtexts[e[0]].innerText === boxtexts[e[1]].innerText) && + (boxtexts[e[1]].innerText === boxtexts[e[2]].innerText) && + (boxtexts[e[0]].innerText !== '')){ + document.querySelector('.info').innerText = boxtexts[e[0]].innerText + " Won"; + gameover = true; + document.querySelector('.imageBox').getElementsByTagName('img')[0].style.width = "200px"; + document.querySelector(".line").style.width = "20vw"; + document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`; + } + }) +} + +// Game Logic +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(!gameover){ + 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"; + gameOver = false; + document.getElementsByClassName("info")[0].innerText = "Turn for " + turn; + document.querySelector('.imageBox').getElementsByTagName('img')[0].style.width = "0px"; + document.querySelector(".line").style.width = "0"; + +}) \ No newline at end of file diff --git a/Tic Tac Toe using vanilla javascript/style.css b/Tic Tac Toe using vanilla javascript/style.css new file mode 100644 index 00000000..c65aff85 --- /dev/null +++ b/Tic Tac Toe using vanilla javascript/style.css @@ -0,0 +1,131 @@ +@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Libre+Baskerville:ital@1&family=New+Tegomin&family=Roboto:wght@300&family=Varela+Round&display=swap'); + + +*{ + margin: 0; + padding: 0; +} + +nav{ + background-color: rgb(68, 4, 68); + color: white; + height: 60px; + font-size: 27px; + display: flex; + align-items: center; + padding: 0 15px; + font-family: 'New Tegomin', serif; +} + +nav ul{ + list-style-type: none; +} + +.gameContainer{ + display: flex; + justify-content: center; + margin-top: 50px; +} + +.container{ + display: grid; + grid-template-columns: repeat(3, 10vw); + grid-template-rows: 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(233, 223, 241); +} + +.gameInfo{ + padding: 0 34px; + font-family: 'Baloo Bhaina 2', cursive; +} + +.gameInfo h1{ + font-size: 2.5rem; +} + +.imageBox 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 24px; + padding: 1px 18px; + background-color: rgb(248, 209, 248); + border-radius: 6px; + cursor: pointer; + font-family: 'Baloo Bhaina 2'; + font-size: 15px; + font-weight: bolder; +} + +.info{ + font-size: 22px; + font-weight: bold; + font-family: 'New Tegomin', serif; +} + +.line{ + background-color: black; + width: 0; + height: 3px; + 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{ + display: grid; + grid-template-columns: repeat(3, 20vw); + grid-template-rows: repeat(3, 20vw); + font-family: 'Roboto', sans-serif; + } + + .line { + visibility: hidden; + } +} \ No newline at end of file diff --git a/Tic Tac Toe using vanilla javascript/ting.mp3 b/Tic Tac Toe using vanilla javascript/ting.mp3 new file mode 100644 index 00000000..6dbc8775 Binary files /dev/null and b/Tic Tac Toe using vanilla javascript/ting.mp3 differ