setCurrPl function on the other hand is responsible for setting the current player. As you can see object stores 4 basic properties — user, computer, currentPlayer and moves. JavaScript Tic Tac Toe Game Example. The modal element on top of the page is responsible for displaying a box to user at the beginning of each game. and finally, a score element, to track the players score: As you can see here, we have also created the player selections (X or O) and the startBtn button, which will as it suggests, start our game! Tic tac toe is a very simple game, But its programming is not. We also need to create a container to store all the required elements of our game (we will call this our “game-container“): Within the “game-container“, we will create an introduction message, that will also contain our character selections, like this: Next, we will add our game panels (the actual Tic Tac Toe board), and a “Feedback” screen (to display Game Over man!) back to top. This function as it states, starts the game, it is triggered from the. Within start function there’s a single line of code — $(‘#myModal’).modal(‘show’);. In this tutorial, I will show you how to create a Tic Tac Toe game using Javascript and jQuery. Check the comments in the following code, for a step by step breakdown of this function: Most of the games CSS is contained within a single rule called #game-container. For an n x n tic tac toe game, a winning condition is matching n selections in a straight line either horizontal, vertical, or diagonal. You can download a complete .zip file of the game here lemmoscripts-tic-tac-toe. After creating basic HTML code it’s time to add styles. Store the contents of the first cell of the row/column/diagonal (starting from the top and/or right). For other projects and articles visit my website! After that the function checks the status of the game to check whether the game should end or continue, and changes the current player to contrasting value. With the exception of the score, which is separate to the major elements of the game. To gain my Front-End Certification I have to complete two last projects. Color of the winning icons is changed by show function. Lets break down what these files actually do. Because we are using jQuery, we will use the $(document).ready() function: As you can see, this will hide the game area, the score, and the feedback. Now that we understand how the game works, lets create all the files we will need for our game. The problem is making a computer decide what kind of move to make. The computer must recognize the moves of the player and act accordingly to player’s strategy using a MiniMax algorithm. The function uses switch statement to check all of available spaces one by one and place the icon in the first available space. The before-mentioned gameStatus function is responsible for checking if the game has a winner. This is quite complicated and actually not needed to finish this assignment. This blog is full of surprises. The moron option is selected by default. The firstMove function is responsible for making a first move in game for the computer. I’ve seen other examples on the web using a table to layout the ‘panels’ (as I called them) of the game. This is quite complex when we start coding. Or check the source code on GitHub. This page gave me insight into the rules of the computer player/AI, I was a bit disappointed with the repetitious code however, so I made my logic loop through the rules instead. Each player will take turns to choose a square. As always if you have any questions/comments — tweet @mrkaluzny or leave a comment below. Go down each row/column/diagonal and see if the contents of all the successive cells match the first cell. Naturally the first thing to do is create a simple html markup for the website (in this challenge I’m using Bootstrap and Font-Awesome). Creating the html elements of the game (game.htm), The Javascript functions of the game (game.js), Javascript Kit – Tic Tac Toe credit: Cory Fogliani, Compare array in Javascript on Stackoverflow, How to know if two arrays have the same-values on Stackoverflow, Shuffling the order of an array with Javascript, Display a random word in a list of words using Javascript, Creating a simple Tic-Tac-Toe (or Naughts and Crosses) game in Javascript and jQuery, Adding a timecode in After Effects using an Expression, Creating a PHP Class to query a database table. This function takes 1 argument — which is the id of the clicked button. Free Code Camp is a demanding and time-consuming development course that aims to teach JavaScript code. The last thing this function does, is to check if the game isn’t over, by checking the gameOver variable. back to top. If you’re time poor, and just want to skip to the facts, I got you, use the links below to skip to the relevant part for you, or read on to continue. The before-mentioned gameStatus function is responsible for checking if the game has a winner. The game itself is quite simple. It loops over the aiOrder array, checks to see if the panel referred to in the loop is empty (“”) and if so, it applies the computer character to the panel. With if statement it checks if the current player is a computer, when it is the comp function is being called. The first player to have 3 selected squares in a row will win the … You may use these HTML tags and attributes: A technology blog about various web things, mostly front end, CSS JS etc. The gameOver variable is set by the previously mentioned checkCombination() function. back to top. It does so by checking which of the players has made a move, then it adds this player icon to the field and removes attribute onClick to prevent changing the field once more. This makes it very easy to beat but it does the job quite well. The first thing to think about is the layout of the game as HTML. It is made possible with JQuery (A JavaScript Framework). The first thing we want to do, us to create our standard HTML markup, linking in our jQuery library, our game.js Javascript file and our game.css stylesheet file. This function takes only one argument — the id of an element. This function executes when the game isn’t over. Your email address will not be published. Next element is .game div. To handle that interaction each time user will click .game-field element it’s id will be send to icon function. I simplified it a little bit. This function is executed when the player selects the #startBtn button in the #introduction screen. All going well, you should have a complete Tic Tac Toe game written in Javscript/jQuery! The function then loops over the rules array, and executes the checkCombination() function. One player will mark the selected square with “X” and the other with “O”. back to top. This will then enable us to conceptualise the games options in a linear way. The following sites were used as references and inspiration for this game. Instead, this example will use a linear sequence of “panels”, floated left within a fixed width container to simulate the appearance of a game grid. The Javascript of the game has four custom functions: The first thing we do, is to initialise some variables that will be used in our game: And now we want to create and store the winning combinations of the game. You can call it a small AI built-in javascript. Then it calls 2 functions — firstMove and setCurrPl. The last task to execute is starting a function that makes a move for the computer. If you were to include this on your own page, you would need to wrap it all in another container, and because a combination of relative and absolute positioning is used, it should work reasonably well within another context. This function checks all possible result of Tic Tac Toe game and then changes the color of winning icons. And while it’s a relatively straightforward way to visualise the game, its not really necessary, and its actually a problem to try and understand the games logic. If this doesn’t make sense right away, stick with me, it will eventually. Now the function checks every field possible from 1–9 and makes a move to in first available field. This function checks all of the panels to see if there are any winning combinations, updates the score and checks if the game is a tie game. It adds the icon to the center .game-field div and deletes attribute onClick to lock this position. This way we enable user to choose which figure he or she wants to play. This javascript program tracks your moves for the next automatic move, This is quite complicated. It also binds the startGame function to the #startBtn button, loops over all the panels, and gives them an id, and assigns a click event to the #startAgainBtn button, for when the game is complete. This function checks all possible result of Tic Tac Toe game and then changes the color of winning … It also loops over the rules (a collection of the winning combination arrays) and runs the checkCombination() function, passing in the rules iterator to check all combinations. Now let’s take a look at the JavaScript code. If they do, return the symbol for the winning piece, otherwise, return false; Required fields are marked *. How to know if two arrays have the same values. When the loop is finished we need to increment the value of game.moves property and check if the game ended in a draw (all of 9 moves were executed).