Tic-Tac-Toe game is a two players game. There will be a board of 3×3 table cells and 2 symbols in this game, one for each player. Both players can choose the symbol of their choice. Then they will mark the sign inside of a box on the board. One who got their symbol marked in a sequence of three may be vertical, horizontal, or diagonal.
The main logic of the Tic-Tac-Toe game is that the player will have won the match, and the player will lose the game if he doesn’t get his symbol in a sequence of three. If both of the players do not get their symbols in a line of three, the match will be tied or drawn.
Output:
File:Â index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> </head> <body> <div class="select-box"> <header><center>Tic Tac Toe Game</center></header> <div class="content"> <div class="title"><center>Choose Player-X/O</center></div> <div class="options"> <button class="playerX">Player-X</button> <button class="playerO">Player-O</button> </div> </div> </div> <div class="play-board"> <div class="details"> <div class="players"> <span class="Xturn">X's Turn</span> <span class="Oturn">O's Turn</span> <div class="slider"></div> </div> </div> <div class="play-area"> <section> <span class="box1"></span> <span class="box2"></span> <span class="box3"></span> </section> <section> <span class="box4"></span> <span class="box5"></span> <span class="box6"></span> </section> <section> <span class="box7"></span> <span class="box8"></span> <span class="box9"></span> </section> </div> </div> <div class="result-box"> <div class="won-text"></div> <div class="btn"> <button>Play Again</button> <button onclick="javascript:window.close()">Exit</button> </div> </div> <script src="script.js"></script> </body> </html> |
File:Â style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 |
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } ::selection{ color: #fff; background:#004488; } body{ background:#004488; } .select-box, .play-board, .result-box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; } .select-box{ background: #fff; padding: 20px 25px 25px; border-radius: 5px; max-width: 400px; width: 100%; } .select-box.hide{ opacity: 0; pointer-events: none; } .select-box header{ font-size: 30px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid lightgrey; } .select-box .title{ font-size: 22px; font-weight: 500; margin: 20px 0; } .select-box .options{ display: flex; width: 100%; } .options button{ width: 100%; font-size: 20px; font-weight: 500; padding: 10px 0; border: none; background: #004488; border-radius: 5px; color: #fff; outline: none; cursor: pointer; transition: all 0.3s ease; } .options button:hover, .btn button:hover{ transform: scale(0.96); } .options button.playerX{ margin-right: 5px; } .options button.playerO{ margin-left: 5px; } .select-box .credit{ text-align: center; margin-top: 20px; font-size: 18px; font-weight: 500; } .select-box .credit a{ color: #56baed; text-decoration: none; } .select-box .credit a:hover{ text-decoration: underline; } .play-board{ opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.9); } .play-board.show{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .play-board .details{ padding: 7px; border-radius: 5px; background: #fff; } .play-board .players{ width: 100%; display: flex; position: relative; justify-content: space-between; } .players span{ position: relative; z-index: 2; color: #004488; font-size: 20px; font-weight: 500; padding: 10px 0; width: 100%; text-align: center; cursor: default; user-select: none; transition: all 0.3 ease; } .players.active span:first-child{ color: #fff; } .players.active span:last-child{ color: #004488; } .players span:first-child{ color: #fff; } .players .slider{ position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #004488; border-radius: 5px; transition: all 0.3s ease; } .players.active .slider{ left: 50%; } .players.active span:first-child{ color: #004488; } .players.active span:nth-child(2){ color: #fff; } .players.active .slider{ left: 50%; } .play-area{ margin-top: 20px; } .play-area section{ display: flex; margin-bottom: 1px; } .play-area section span{ display: block; height: 90px; width: 90px; margin: 2px; color: #004488; font-size: 40px; line-height: 80px; text-align: center; border-radius: 5px; background: #fff; } .result-box{ padding: 25px 20px; border-radius: 5px; max-width: 400px; width: 100%; opacity: 0; text-align: center; background: #fff; pointer-events: none; transform: translate(-50%, -50%) scale(0.9); } .result-box.show{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .result-box .won-text{ font-size: 30px; font-weight: 500; display: flex; justify-content: center; } .result-box .won-text p{ font-weight: 600; margin: 0 5px; } .result-box .btn{ width: 100%; margin-top: 25px; display: flex; justify-content: center; } .btn button{ font-size: 18px; font-weight: 500; padding: 8px 20px; border: none; background: #004488; border-radius: 5px; color: #fff; outline: none; cursor: pointer; transition: all 0.3s ease; margin-right: 25px; } |
File:Â script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
const selectBox = document.querySelector(".select-box"), selectBtnX = selectBox.querySelector(".options .playerX"), selectBtnO = selectBox.querySelector(".options .playerO"), playBoard = document.querySelector(".play-board"), players = document.querySelector(".players"), allBox = document.querySelectorAll("section span"), resultBox = document.querySelector(".result-box"), wonText = resultBox.querySelector(".won-text"), replayBtn = resultBox.querySelector("button"); window.onload = ()=>{ for (let i = 0; i < allBox.length; i++) { allBox[i].setAttribute("onclick", "clickedBox(this)"); } } selectBtnX.onclick = ()=>{ selectBox.classList.add("hide"); playBoard.classList.add("show"); } selectBtnO.onclick = ()=>{ selectBox.classList.add("hide"); playBoard.classList.add("show"); players.setAttribute("class", "players active player"); } let playerXIcon = "fas fa-times"; let playerOIcon = "far fa-circle"; let playerSign = "X"; let runBot = true; function clickedBox(element){ if(players.classList.contains("player")){ playerSign = "O"; element.innerHTML = `<i class="${playerOIcon}"></i>`; players.classList.remove("active"); element.setAttribute("id", playerSign); }else{ element.innerHTML = `<i class="${playerXIcon}"></i>`; element.setAttribute("id", playerSign); players.classList.add("active"); } selectWinner(); element.style.pointerEvents = "none"; playBoard.style.pointerEvents = "none"; let randomTimeDelay = ((Math.random() * 1000) + 200).toFixed(); setTimeout(()=>{ bot(runBot); }, randomTimeDelay); } function bot(){ let array = []; if(runBot){ playerSign = "O"; for (let i = 0; i < allBox.length; i++) { if(allBox[i].childElementCount == 0){ array.push(i); } } let randomBox = array[Math.floor(Math.random() * array.length)]; if(array.length > 0){ if(players.classList.contains("player")){ playerSign = "X"; allBox[randomBox].innerHTML = `<i class="${playerXIcon}"></i>`; allBox[randomBox].setAttribute("id", playerSign); players.classList.add("active"); }else{ allBox[randomBox].innerHTML = `<i class="${playerOIcon}"></i>`; players.classList.remove("active"); allBox[randomBox].setAttribute("id", playerSign); } selectWinner(); } allBox[randomBox].style.pointerEvents = "none"; playBoard.style.pointerEvents = "auto"; playerSign = "X"; } } function getIdVal(classname){ return document.querySelector(".box" + classname).id; } function checkIdSign(val1, val2, val3, sign){ if(getIdVal(val1) == sign && getIdVal(val2) == sign && getIdVal(val3) == sign){ return true; } } function selectWinner(){ if(checkIdSign(1,2,3,playerSign) || checkIdSign(4,5,6, playerSign) || checkIdSign(7,8,9, playerSign) || checkIdSign(1,4,7, playerSign) || checkIdSign(2,5,8, playerSign) || checkIdSign(3,6,9, playerSign) || checkIdSign(1,5,9, playerSign) || checkIdSign(3,5,7, playerSign)){ runBot = false; bot(runBot); setTimeout(()=>{ resultBox.classList.add("show"); playBoard.classList.remove("show"); }, 700); wonText.innerHTML = `Player <p>${playerSign}</p> won the game!`; } else { if(getIdVal(1) != "" && getIdVal(2) != "" && getIdVal(3) != "" && getIdVal(4) != "" && getIdVal(5) != "" && getIdVal(6) != "" && getIdVal(7) != "" && getIdVal(8) != "" && getIdVal(9) != ""){ runBot = false; bot(runBot); setTimeout(()=>{ resultBox.classList.add("show"); playBoard.classList.remove("show"); }, 700); wonText.textContent = "Match has been drawn!"; } } } replayBtn.onclick = ()=>{ window.location.reload(); } |
