Tic-Tac-Toe Game using HTML CSS Javascript
Tic-Tac-Toe Game in Javascript:
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.
File:
index.html
Tic Tac Toe Game Choose Player-X/O X's Turn O's Turn
File:
style.css
@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
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 = ``; players.classList.remove("active"); element.setAttribute("id", playerSign); }else{ element.innerHTML = ``; 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 = ``; allBox[randomBox].setAttribute("id", playerSign); players.classList.add("active"); }else{ allBox[randomBox].innerHTML = ``; 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 ${playerSign} 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(); }
Output-1:
Output-2:
Output-3: