Here's a new updated version of the drawBoard() function from above. Up next we will add an event handler to each cell click, alternating players after each one, until a winner is found, or until we run out of cells to click on. These arrays will keep track of which 'boxes' each user has selected. We don't want to have to go through the entire grid each time a player makes a selection to check if it's an 'X' or a 'O'. But we'll need to keep track of which selections each players has. So now we have a way to check if a player has won the game. We'll leave that as a challenge for you to take on. If we wanted create a 4 x 4 grid for example, the amount of permutations would be much too high to calculate by hand. Ideally, we would want these permutations to be calculated automatically, as they only currently apply to a 3 x 3 grid. We'll add another variable to the list to keep these winning selections stored. Horizontal: Īny user having any of these at any point is the winner and gets a point. So we have 3 sets of cells to compare against. For a 3 x 3 grid, we can see what those selections will look like the following. We don't have to start checking for a win until any user has selected 3 or more cells however, because you obviously can't win with just 2 or less elements placed on the board.Īnd here's the easy part. What is a winning condition?įor an n x n tic tac toe game, a winning condition is matching n selections in a straight line either horizontal, vertical, or diagonal. And we also need to figure out what a winning case actually is, so let's start there. Let's break down what happens when a user makes a selection first, however. We can add a few basic game elements, like the user scores and that will look something like this.Īfter a win condition is met, the winning player will get a point added to their score and the game board will reset itself. And there's not much else to do with that really.
It also makes it much easier to test in the debugger when you can just call a function and see the outcome of that snippet immediately. It makes it easier to edit, as changing certain parts doesn't interfere with the rest of the game elements. Let parent = document.getElementById("game") Įvery major step in the game is its own function. Īnd the following function will be in charge of rendering the n x n grid onto the webpage. We will use the router to create two routes, one for root (homepage) and one for the Tic Tac Toe game board. However, the most important part of this component will be implementing BrowserRouter and Routes from react-router-dom. The CSS for the elements can be found after the post at the bottom of the page. We can also import CSS (or Sass) stylesheets to make our Tic Tac Toe game look better. Next up let us draw the tic tac toe board, which is an n x n table. Size - This is the size of the playing board measure in width * height. Points1/points2 - These variables will be used to keep track of the ongoing games player scores.
Player1Selections - We will use this array to store the blocks that player1/player2 have selected.ĬurrentPlayer - This is the index of the player currently in play, starting with 0. winners - This variable will be an array containing all of the possible combinations that are considered 'winning'. Here is a breakdown of each of the variables. Variable Declaration var winners = new Array()
Let's set up a few basic variables to keep track of the game settings. Run in all platforms (Mobile, PC, etc.In Tic Tac Toe, 2 players take turns adding their token (an X or a O) to a 3 x 3 (or N X N, for the more ambitious) grid until one player matches 3 (N) in a row in any direction.Auto-Resize (Responsive support Landscape and Portrait mode).Share Score (Facebook, Twitter, Whatsapp).Basic options (Enter FullScreen, Mute Sound, Exit Game).Complete game customization (Text Display, Images).Board Settings (Icons, Colors, Animation, Timer).This game is compatible with Scoreboard for HTML5 Games, it is a add-ons page where user can submit score and view top 10 leaderboard.
#Tic tac toe html css download zip#
The ZIP package contains the game with 1280×768 and 768×1024 resolution that scales proportionally to fit current screen device. Challenge yourself from a traditional 3 X 3 grid, or custom board size from 5×5 to 8×8.
Tic Tac Toe is a HTML5 game where 2 player game in which the objective is to take turns and mark the correct spaces, play against computer or against a friend.