├── index.html ├── app.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tic-Tac-Toe Game 7 | 8 | 9 | 10 |
11 |

Winner!

12 | 13 |
14 |
15 |

Tic Tac Toe

16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | // Getting Element From HTML 2 | let boxes = document.querySelectorAll(".box"); 3 | let resetBtn = document.querySelector("#reset-btn"); 4 | let newGameBtn = document.querySelector("#new-btn"); 5 | let msgContainer = document.querySelector(".msg-container"); 6 | let msg = document.querySelector("#msg"); 7 | 8 | let turnO = true; // playerO starts 9 | let count = 0; // To track moves and detect a draw 10 | 11 | // Winning Patterns 12 | const winPatterns = [ 13 | [0, 1, 2], 14 | [0, 3, 6], 15 | [0, 4, 8], 16 | [1, 4, 7], 17 | [2, 5, 8], 18 | [2, 4, 6], 19 | [3, 4, 5], 20 | [6, 7, 8], 21 | ]; 22 | 23 | const resetGame = () => { 24 | turnO = true; 25 | count = 0; 26 | enableBoxes(); 27 | msgContainer.classList.add("hide"); 28 | }; 29 | 30 | const disableBoxes = () => { 31 | boxes.forEach((box) => { 32 | box.disabled = true; 33 | }); 34 | }; 35 | 36 | const enableBoxes = () => { 37 | boxes.forEach((box) => { 38 | box.disabled = false; 39 | box.innerText = ""; 40 | }); 41 | }; 42 | 43 | const showWinner = (winner) => { 44 | msg.innerText = `Congratulations, Winner is ${winner}!`; 45 | msgContainer.classList.remove("hide"); 46 | disableBoxes(); 47 | }; 48 | 49 | const gameDraw = () => { 50 | msg.innerText = `Game was a Draw.`; 51 | msgContainer.classList.remove("hide"); 52 | disableBoxes(); 53 | }; 54 | 55 | const checkWinner = () => { 56 | for (let pattern of winPatterns) { 57 | let pos1Val = boxes[pattern[0]].innerText; 58 | let pos2Val = boxes[pattern[1]].innerText; 59 | let pos3Val = boxes[pattern[2]].innerText; 60 | 61 | if (pos1Val && pos1Val === pos2Val && pos2Val === pos3Val) { 62 | showWinner(pos1Val); 63 | return true; 64 | } 65 | } 66 | return false; 67 | }; 68 | 69 | boxes.forEach((box) => { 70 | box.addEventListener("click", () => { 71 | if (box.innerText === "") { 72 | if (turnO) { 73 | box.innerText = "O"; 74 | } else { 75 | box.innerText = "X"; 76 | } 77 | box.disabled = true; 78 | count++; 79 | 80 | if (checkWinner()) { 81 | return; 82 | } 83 | 84 | if (count === 9) { 85 | gameDraw(); 86 | } 87 | 88 | turnO = !turnO; // Switch turn 89 | } 90 | }); 91 | }); 92 | 93 | newGameBtn.addEventListener("click", resetGame); 94 | resetBtn.addEventListener("click", () => { 95 | resetGame(); 96 | msgContainer.classList.add("hide"); // Ensure the message is hidden when reset is clicked 97 | }); 98 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Universal Styling */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Arial', sans-serif; 7 | } 8 | 9 | body { 10 | background-color: #121212; 11 | /* Very dark background for a modern look */ 12 | color: #e0e0e0; 13 | /* Light gray text for readability */ 14 | text-align: center; 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | height: 100vh; 20 | } 21 | 22 | h1 { 23 | font-size: 3rem; 24 | color: #ffffff; 25 | margin-bottom: 2rem; 26 | text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); 27 | /* Subtle shadow for depth */ 28 | } 29 | 30 | .container { 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | } 35 | 36 | .game { 37 | display: grid; 38 | grid-template-columns: repeat(3, 1fr); 39 | gap: 15px; 40 | margin-bottom: 30px; 41 | } 42 | 43 | .box { 44 | width: 100px; 45 | height: 100px; 46 | background-color: #1e1e1e; 47 | /* Dark gray boxes */ 48 | border: 2px solid #333; 49 | /* Slightly lighter border */ 50 | border-radius: 8px; 51 | font-size: 3rem; 52 | color: #ffffff; 53 | cursor: pointer; 54 | display: flex; 55 | justify-content: center; 56 | align-items: center; 57 | transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s; 58 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 59 | /* Softer shadow for a grounded look */ 60 | } 61 | 62 | .box:hover { 63 | background-color: #202020; 64 | /* Slightly lighter on hover */ 65 | transform: scale(1.1); 66 | box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7); 67 | /* Stronger shadow on hover */ 68 | } 69 | 70 | #reset-btn, 71 | #new-btn { 72 | padding: 12px 30px; 73 | font-size: 1.2rem; 74 | background-color: #3a3a3a; 75 | /* Darker gray background */ 76 | color: #ffffff; 77 | border: none; 78 | border-radius: 8px; 79 | cursor: pointer; 80 | margin-top: 20px; 81 | transition: background-color 0.3s, transform 0.2s; 82 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 83 | } 84 | 85 | #reset-btn:hover, 86 | #new-btn:hover { 87 | background-color: #505050; 88 | /* Slightly lighter gray on hover */ 89 | transform: scale(1.1); 90 | } 91 | 92 | #msg-container { 93 | position: fixed; 94 | top: 0; 95 | left: 0; 96 | width: 100%; 97 | height: 100%; 98 | background-color: rgba(0, 0, 0, 0.85); 99 | /* Dark transparent overlay */ 100 | color: #ffffff; 101 | display: flex; 102 | flex-direction: column; 103 | justify-content: center; 104 | align-items: center; 105 | z-index: 1000; 106 | transition: opacity 0.3s ease-in-out; 107 | } 108 | 109 | #msg { 110 | font-size: 3rem; 111 | margin-bottom: 20px; 112 | text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); 113 | /* Subtle shadow for depth */ 114 | } 115 | 116 | .hide { 117 | opacity: 0; 118 | pointer-events: none; 119 | } 120 | 121 | .show { 122 | opacity: 1; 123 | pointer-events: all; 124 | } 125 | 126 | @media (max-width: 600px) { 127 | .game { 128 | grid-template-columns: repeat(3, 1fr); 129 | gap: 10px; 130 | } 131 | 132 | .box { 133 | width: 80px; 134 | height: 80px; 135 | font-size: 2rem; 136 | } 137 | 138 | h1 { 139 | font-size: 2rem; 140 | } 141 | 142 | #msg { 143 | font-size: 2rem; 144 | } 145 | } 146 | --------------------------------------------------------------------------------