diff --git a/Contributor.md b/Contributor.md index 5d22f63..20cc0ad 100644 --- a/Contributor.md +++ b/Contributor.md @@ -256,3 +256,4 @@ Added solution for custom range slider 45. Niranjan patil | [LinkedIn](https://www.linkedin.com/in/niranjan-patil-8512a1374) | [GitHub](https://github.com/niranjanpatil1010) - Added Solution for Leetcode Q35 search insert position -added solution for median of two sorted array + -added Tik tak toe game using Html,css,js diff --git a/css/css/Tic_Tak_Toe.css b/css/css/Tic_Tak_Toe.css new file mode 100644 index 0000000..f1fa2c4 --- /dev/null +++ b/css/css/Tic_Tak_Toe.css @@ -0,0 +1,70 @@ + +*{ + margin: 0; + padding: 0; +} + +body{ + background-color:rgb(6, 129, 145); + text-align: center; +} + +.cantainer{ + height: 70svh; +display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; +} + +.game{ + height: 60vmin; + width: 60vmin; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + gap: 1.5vmin; +} + +.box{ + height: 18vmin; + width:18vmin; + border-radius:1rem ; + /* border: none; */ + box-shadow: 0 0 1rem rgb(6, 129, 145); + font-size: 8vmin; + color: rgb(246, 72, 86); + background-color: aliceblue; +} +#reset{ + padding: 1.5rem; + font-size: 1.25rem; + background-color: black; + color: aliceblue; + border: 1rem; +} +#newgame{ + padding: 1rem; + font-size: 1.25rem; + background-color: black; + color: aliceblue; + border: 1rem; + +} +.win{ + height :100vmin; + +} +#msg{ + font-size: 10vmin; + color: aliceblue; + display: flex; + justify-content: center; + align-items: center; + gap: 8rem; + +} +.hide{ + display: none; +} diff --git a/html/Tic_Tak_Toe.html b/html/Tic_Tak_Toe.html new file mode 100644 index 0000000..eaee0de --- /dev/null +++ b/html/Tic_Tak_Toe.html @@ -0,0 +1,35 @@ + + + + + + Tic Tac Toe Game + + + +
+

Winner

+ +
+
+ +

Tic Tac Toe game

+
+
+ + + + + + + + + +
+
+ +
+ + + + diff --git a/js/css/Tic_Tak_Toe.js b/js/css/Tic_Tak_Toe.js new file mode 100644 index 0000000..a66e2f8 --- /dev/null +++ b/js/css/Tic_Tak_Toe.js @@ -0,0 +1,112 @@ + +let boxes = document.querySelectorAll(".box"); +let reset = document.querySelector("#reset"); +let newgame = document.querySelector("#newgame"); +let win = document.querySelector(".win"); +let msg = document.querySelector("#msg"); +let turn0 = true; +let count = 0; +let draw=false; +const patterns = [ + + [0, 1, 2], + [0, 3, 6], + [0, 4, 8], + [1, 4, 7], + [2, 5, 8], + [2, 4, 6], + [3, 4, 5], + [6, 7, 8], +]; + +boxes.forEach((box) => { + box.addEventListener("click", () => { + if (turn0) { + box.innerText = "O"; + turn0 = false; + } + else { + box.innerText = "X"; + turn0 = true; + } + count++; + console.log(count); + box.disabled = true; + checkwin(); + }) +}) + +const resetbut = () => { + turn0 = true; + enablebox(); + win.classList.add("hide"); + count = 0; + draw=false; + + +} +const disablebox = () => { + for (box of boxes) { + box.disabled = true; + } +} + +const enablebox = () => { + for (box of boxes) { + box.disabled = false; + box.innerText = ""; + } +} +const show = (winner) => { + msg.innerText = `winner is ${winner}`; + win.classList.remove("hide"); + disablebox(); +} + + +const checkwin = () => { + for (pattern of patterns) { + pos1 = boxes[pattern[0]].innerText; + pos2 = boxes[pattern[1]].innerText; + pos3 = boxes[pattern[2]].innerText; + if (pos1 !== "" && pos2 !== "" && pos3 !== "") { + if ((pos1 === pos2 && pos2 === pos3)) { + console.log("winner", pos1); + show(pos1); + draw=true; + break; + + } + } + + } + + if (count === 9 && !draw) { + msg.innerText = "match draw"; + win.classList.remove("hide"); + disablebox(); + } + + } + + + + + +newgame.addEventListener("click", resetbut); +reset.addEventListener("click", resetbut); + + + + + + + + + + + + + + +