#Game x and o update
Here we will simply change the current player and update the game status message to reflect the change.
#Game x and o code
This allows us to avoid using else conditions and to keep our code nice and compact. Since we have a return statement in our roundWon check we know that, if a player has won that round, our script will stop there. If we get to here we know that the no one won the game yet,Īnd that there are still moves to be played, so we continue by changing the current player. A classic Tic-Tac-Toe board game in a wooden case with 9 marble cubes decorated with X-O elements, ready to play with. We also have an element where we will display the beforementioned game information and a restart button.īody /* Also, each cell has a “data-cell-index” attribute to allow us to easily track with cell has been clicked. We will hold the actual game cells in a wrapping div to allow us to make use of the CSS grid. We have also included our script.js file just above the closing tag to make sure that the javascript is always loaded after the HTML. Tic Tac Toe Tic Tac Toe Restart Game Īside from the usual boilerplate, we have included our style sheet in the element, we do this to make sure the style sheet is always loaded before the actual HTML. script.js (will hold our game logic, and handle everything else we need).style.css (to make our game look halfway decent).index.html (will hold our UI structure and import the other files we need).We’ll start by building the user interface so we have something to look at while building the game logic.Īs I mentioned this is a simple game so there is no need for complicated folder structures. Let’s get to the fun part and build something! That’s it, nothing special or overly complicated but still an excellent opportunity to practice and improve. either stop the game or change the active player, depending on the above.needs to make sure nothing happens if an already played cell has been.needs to check if a valid move has been made.needs to track any clicks that happen on our cells.Next, let’s break down the game flow for a cell click: should show us if the game ended in a draw.should display a message informing the current player it’s their turn.the grid cells should have the correct player sign displayed.Well, usually the best way to start would be to break down the application into smaller, easily digestible pieces.įirst, let’s break down the user interface: The big question then… Where do we start? Let’s first take a look at the end product We’ll cover some basics like using CSS grid, query selectors and structuring our game flow and logic. Well look no further, today we’ll be building a simple ( drumroll) Tic Tac Toe game. You can find the completed project on my Github here. Have you wanted to build something fun and simple to practice your Front End skills but the thought of building another TODO application makes you want to quit this wonderful path you’ve started on?
0 kommentar(er)
