diff --git a/Colorful-Flowers(chosic.com).mp3 b/Colorful-Flowers(chosic.com).mp3 new file mode 100644 index 0000000..08d80f5 Binary files /dev/null and b/Colorful-Flowers(chosic.com).mp3 differ diff --git a/gameover.mp3 b/gameover.mp3 new file mode 100644 index 0000000..bf5228b Binary files /dev/null and b/gameover.mp3 differ diff --git a/gameover.webp b/gameover.webp new file mode 100644 index 0000000..65c7fb3 Binary files /dev/null and b/gameover.webp differ diff --git a/gamepage.html b/gamepage.html new file mode 100644 index 0000000..3b2638a --- /dev/null +++ b/gamepage.html @@ -0,0 +1,58 @@ + + + + + + + TIC TAC TOE + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+ Turn for X + + +
+

+
+ pic +
+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..7b3e503 --- /dev/null +++ b/script.js @@ -0,0 +1,110 @@ +console.log("TIC TAC TOE by MR.Nobody"); +console.log("Refference taken from code-with-harry yt"); +console.log("Music credits: "); +console.log("Colorful Flowers by Tokyo Music Walker | https://soundcloud.com/user-356546060") +console.log("Music promoted by https://www.chosic.com/free-music/all/") +console.log("Creative Commons CC BY 3.0") +console.log("https://creativecommons.org/licenses/by/3.0/") +//music files +let music = new Audio("Colorful-Flowers(chosic.com).mp3"); +music.play(); +let audioTurn = new Audio("turn.WAV"); +let gameover = new Audio("gameover.mp3"); + +let turn = 'X'; +let game_over = false; +const musicButton = document.getElementById('music'); + +musicButton.addEventListener('click', () => { + if (music.paused) { + music.play(); + //musicButton.classList.remove('strikethrough'); + musicButton.innerHTML = '🔊'; + } else { + music.pause(); + //musicButton.classList.add('strikethrough'); + musicButton.innerHTML = '🔇'; + } +}); + +//function for winner +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"; + game_over = true; + document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "30vw"; + // gameover.play(); + //gameover.loop=true; + music.pause(); + document.querySelector(".line").style.transform = `translate(${e[3]}vw,${e[4]}vw) rotate(${e[5]}deg)` + document.querySelector(".line").style.width = "20vw"; + + gameover.addEventListener('ended', function () { + this.currentTime = 0.1; + this.play(); + }, false); + + gameover.play(); + } + }) +} +//funtion to change turn +const changeturn = () => { + if (!game_over) { + return turn === "X" ? "0" : "X" + } + else { + return turn === " "; + } +} +//Game logic +let boxes = document.getElementsByClassName("box"); + +Array.from(boxes).forEach(element => { + let boxtext = element.querySelector('.boxtext'); + element.addEventListener('click', () => { + if ( !game_over && boxtext.innerText === '') { + boxtext.innerText = turn; + turn = changeturn(); + audioTurn.play(); + checkwin(); + if (!game_over) { + document.getElementsByClassName('info')[0].innerText = "Turn for " + turn; + } + } + }) +}) +//reset +reset.addEventListener('click', () => { + let boxtexts = document.querySelectorAll('.boxtext'); + Array.from(boxtexts).forEach(element => { + element.innerText = "" + }); + turn = 'X'; + game_over = false; + document.querySelector(".line").style.width = "0px"; + document.getElementsByClassName('info')[0].innerText = "Turn for " + turn; + gameover.pause(); + music.play(); + document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "0px"; + +}) + +//dark mode +const checkbox = document.getElementById("checkbox") +checkbox.addEventListener("change", () => { + document.body.classList.toggle("dark") +}) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..2087034 --- /dev/null +++ b/style.css @@ -0,0 +1,190 @@ +@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap'); + +* { + margin: 0; + padding: 0; +} + +nav { + background-color: rgb(147, 87, 215); + color: whitesmoke; + margin: 0; + padding: 0 12px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-family: cursive; +} + +.name { + margin: 0; + padding: 0; + display: flex; + height: 7vh; + font-size: 5vh; + align-items: center; +} + +body { + transition: background 0.2s linear; +} + +body.dark { + background-color: #252629; + color: #fff; +} + +body.dark span { + color: aliceblue; +} + +body.dark .box:hover { + background-color: rgba(30, 28, 28, 0.267); +} + +.checkbox { + opacity: 0; + position: absolute; +} + +.checkbox-label { + background-color: #111; + width: 50px; + height: 25px; + border-radius: 50px; + position: relative; + padding: 5px; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; +} + +.fa-moon { + color: #f1c40f; +} + +.fa-sun { + color: #f39c12; +} + +.checkbox-label .ball { + background-color: #fff; + width: 30px; + height: 30px; + position: absolute; + left: 2px; + top: 2px; + border-radius: 50%; + transition: transform 0.2s linear; +} + +.checkbox:checked+.checkbox-label .ball { + transform: translateX(24px); +} + +.info { + font-size: 25px; +} + +.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: cursive; + position: relative; +} + +.box { + border: 1px solid rgb(138, 0, 251); + font-size: 8vw; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; +} + +.box:hover { + background-color: whitesmoke; +} + +.gameinfo { + padding: 0; + margin-left: 10vw; +} + +.imgbox img { + width: 0; + transition: width 1s ease-in-out; +} + +.bl-0 { + border-left: 0; +} + +.br-0 { + border-right: 0; +} + +.bt-0 { + border-top: 0; +} + +.bb-0 { + border-bottom: 0; +} + +#reset { + margin: 0 23px; + padding: 1px 18px; + background-color: #bba9ef; + height: 30px; + border-radius: 6px; + cursor: pointer; + font-family: monospace; + font-size: 15px; + font-weight: bolder; +} + +.line { + background-color: rgb(237, 18, 18); + width: 0; + height: 10px; + position: absolute; + transition: width 1s ease-in-out; + border-radius: 5px +} +#music{ + border-radius: 50%; + width: 30px; + height: 30px; + background-color: black; + border: none; +} +body.dark #music{ + background-color: #fff; +} +/* @media screen and (max-width:950px) { + .gamecontainer { + flex-wrap: wrap; + } + + .gameinfo { + margin-top: 34px; + } + + .gameinfo h1 { + font-size: 2.5rem; + } + .container{ + grid-template-columns: repeat(3,20vw); + grid-template-rows: repeat(3,20vw); + } +} */ \ No newline at end of file diff --git a/turn.wav b/turn.wav new file mode 100644 index 0000000..86600f7 Binary files /dev/null and b/turn.wav differ