In this tutorial, I will tell you how to build a basic tic tac toe game using HTML, CSS and JavaScript.
Most of the people know that when we were kids we used to play this game on paper. We played it many times till we win.
Those who don’t know about this game let me give you little overview. In this game there are two players, the player who makes three of their marks in row and column or one of the two diagonals wins the game. When the board fills up and no combination making then the game is in draw state.
There are some rules that we are going to define here is that as we know the primary thing is move, here the player cannot undo that move. By clicking on the box he can make a move as soon as the move is done, the game proceeded to give a chance to another player.
At each move, it will show whose player moves it is either is A or it is B
When the game ends it displays three outcomes:
- winner player one
- winner player two
- draw
It also displays the replay button if a tie happens.
JavaScript Tic Tac Toe Game Example
Its programming is not that simple as it looks. In this js program, we track each move for the next players move. This is quite complex when we start coding. I am sharing my simple code so that you can understand the game easily. So basically we create 3 files here or we can do all code in one file which includes all html, css and javascript.
So firstly we make a design or UI part then start work on its functionality. You can create this by using plain javascript.
So we load code on the loading of HTML document.
Before writing code, we also have to check what are the winning conditions.
Player 1 plays when the move is equal to 1, 3, 5, 7 and 9. Player 2 plays when the move is equal to 2, 4, 6 and 8. So, Player 1 plays when move is an odd number. Here we can write the logic this way, if ((count%2)==1), then it is player 1’s turn, otherwise it is player 2’s turn. When any player presses on a blank space, that respective player places either an X or O on the playing board.
In the code firstly we write the winning case scenarios at which numbers he/she can win the game. Then we make a function for each move player is playing, in the function we check that players wins or not by that move. We also make a function if no one wins the game then they can again play that game.
Here is code to make the game.
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 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Tic Tac Toe Game</title> <style> *{ box-sizing: border-box; font-family: sans-serif; } body{ margin: 0; padding: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #BF360C; } .container{ width: 500px; height: 500px; display: grid; background-color: #E64A19; grid-gap: 5px; grid-template-columns: 33% 33% 33%; grid-auto-rows: 33% 33% 33%; } .card{ position: relative; background-color: #BF360C; cursor: pointer; } .card::before{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 8rem; } .card.x::before{ content: "X"; } .card.o::before{ content: "O"; } .winner{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; width: 400px; height: 200px; padding: 20px 40px; background-color: #fff; font-size: 2rem; border-radius: 20px; text-align: center; animation: animate .5s linear; } @keyframes animate{ from{ opacity: 0; } to{ opacity: 1; } } .winner button{ margin-top: 20px; width: 80px; height: 35px; line-height: 35px; padding: 0; border: 0; outline: 0; border-radius: 20px; cursor: pointer; color: #fff; background-color: #BF360C; } </style> </head> <body> <div class="container"> <div class="card" data-index="1"></div> <div class="card" data-index="2"></div> <div class="card" data-index="3"></div> <div class="card" data-index="4"></div> <div class="card" data-index="5"></div> <div class="card" data-index="6"></div> <div class="card" data-index="7"></div> <div class="card" data-index="8"></div> <div class="card" data-index="9"></div> </div> </body> <script> const cards = Array.from(document.querySelectorAll(".card")); const winner = [[1,2,3],[4,5,6],[7,8,9],[1,5,9],[3,5,7],[1,4,7],[2,5,8],[3,6,9]]; let firstPlayer = [], secondPlayer = [], count = 0; /*******************************************************/ function check(array){ let finalResult = false; for(let item of winner){ let res = item.every(val => array.indexOf(val) !== -1); if(res){ finalResult = true; break; } } return finalResult; } /*******************************************************/ function winnerpleyr(p){ const modal = document.createElement("div"); const player = document.createTextNode(p); const replay = document.createElement("button"); modal.classList.add("winner"); modal.appendChild(player); replay.appendChild(document.createTextNode("Replay")); // replay.setAttribute("onclick","rep();"); replay.onclick = function() { rep() }; modal.appendChild(replay); document.body.appendChild(modal); } /*******************************************************/ function draw(){ if(this.classList == "card"){ count++; if(count%2 !== 0){ this.classList.add("x"); firstPlayer.push(Number(this.dataset.index)); if(check(firstPlayer)){ winnerpleyr("Congrats player one you win"); return true; } } else{ this.classList.add("o"); secondPlayer.push(Number(this.dataset.index)); if(check(secondPlayer)){ winnerpleyr("Congrats player two you win"); return true; } } if(count === 9){ winnerpleyr("Draw"); } } } /*******************************************************/ function rep(){ const w = document.querySelector(".winner"); // cards.forEach(card => card.classList = "card"); firstPlayer = []; secondPlayer = []; count = 0; w.remove(); [].forEach.call(cards, function(el) { el.classList.remove("x"); el.classList.remove("o"); }); } /*******************************************************/ cards.forEach(card => card.addEventListener("click", draw)); </script> </html> |
You can play the game given below to test how it works.
Comment down below if you have any queries related to above JavaScript Tic Tac Toe game.
Please I want to learn computer programming I don’t know if you can teach me please my