Building TicTacToe Using Vanilla JavaScript

Building TicTacToe Using Vanilla JavaScript

hackernoon.com hackernoon.com3 months ago in #Dev Love56

I am sure you have played tictactoe as a child. In this article, we will build tictactoe using plain JavaScript step by step. Let’s go! I recommend you to exercise what you see so that you will get the most out of this article. The source code can be found at my Github repository. Open your favorite IDE, mine is VSCode, and open a new project folder. We will create the files one by one. This will be our directory structure: |- index.html |- /js |- main.js |- /stylesheet |- main.css Let’s start with the index.html. In the body of the html, we will add the title, form for filling player names, a submit button to play, container for clickable boxes, and restart button. Remember to also put links to your stylesheet at the top and your script at the bottom. The container to play the game will be invisible at first. After the players fill the form and click submit, we will make the container visible. TICTACTOE TicTacToe Enter players’ names and click play to start the game! Player 1 (X) Player 2 (O) Play Board: Restart In the main.css file, we will add our styles. I’ve used bootswatch. It is a customized version of bootstrap. You can your own style if you want. Go ahead to their website, choose a theme and download the minified css and put that at the top the css file. I have added my own style after shown below. You have to add the bootswatch minified css at the top of this file. #board { border: 2px solid black; display: flex; flex-wrap: wrap; height: 270px; width: 245px; } .cell { border: 2px solid black; height: 80px; width: 80px; } .hidden { display: none; } .player-info, .game-status { width: 80%; } .mid-title { color: red; } Ok, now let’s go to the main part, main.js file. All methods below this paragraph are JavaScript methods that will be in the main.js file.Let’s start with the playerFactory. The playerFactory will be the factory for players. Factories are like classes. You can also use class instead of factory but factories are preferred. You can read more about classes and factories here. The playerFactory will accept the player name and the mark (‘X’ or ‘O’). It will have a method to play when it’s the player’s turn. The playTurn method will accept a board which will be the game board and the cell. It will find the index of the cell and return it if it’s empty or it will return null if it’s occupied. const playerFactory = (name, mark) ={ const playTurn = (board, cell) ={ const idx = board.cells.findIndex(position =position === cell); if (board.boardArray[idx] === ”) { board.render(); return idx; } return null; }; return { name, mark, playTurn }; }; Next, we will make the board module. A module is similar to a factory in JavaScript but they are like static classes. They can be called without being instantiated. We will have the board array to hold the 9 positions in the game. We will use DOM manipulation to select and the values of html elements. The render method will make the value of the html cells equal to the board array. The reset method will reset the board making all values to an empty string. The checkWin method will check the winning positions in a tictactoe game.  » Read More

Like to keep reading?

This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply