Tic-tac-toe for American English, noughts and crosses for British English, or Xs and Os is a paper-and-pencil game for two players, X and O, who take turns filling the spaces in a 3×3 grid (2D Array in JavaScript). The player who succeeds in placing three of their symbols in a horizontal, vertical, or diagonal row is the winner.
For the tutorial and like always, I'm going to start with the logic part, and after we understand that, then I will open the text editor and try the build the game from scratch.
This JavaScript Project may seems easy to build, but trust me there a lot of things to learn though.
Anyone with JavaScript Basics (For loops, variables, functions, Arrays, if statements ... etc) can build this game.
I will start the tutorial with a preview of the Tic Tac Toe game, and then talk a little bit about the canvas, how to draw on the canvas, and what does the method getContext() do.
Then we will talk about the HTML elements we're going to need for our game.
For JavaScript, we will need to files options.js and game.js they are self explanatory.
OPTIONS.JS is where the code that handles the player's options lives, like what is the opponent and symbol it has chosen.
GAME.JS is where our game code lives.
This is Just the first part of tutorial, there still is a second part where we're going to discuss the AI.
You can find the second part here: https://youtu.be/ovr2sTYhb1I
In general in our game.js all what we need to do, is:
1. A 1D Array called "gameData" to store the players moves.
2. Draw the board on the canvas.
3. add Event listener to the CANVAS.
4. Determine which SPACE on THE BOARD the player has clicked on.
5. Update the gameData array. (if the space clicked by the player is empty)
6. Draw the player's move on the board (canvas).
7. check if this player wins. if wins we show the game over message. and stop the game.
8. If it doesn't win, we check for a tie game, if it's a tie we show the game over message. and stop the game.
9. If there is no winner and it's not a tie game, we give the turn to other player.
Watch video Tutorial