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.
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.
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:
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.
If you want to follow along with me when I type in the code, you’ll need to download the starter template from GitHub.
| LINKS |
DOWNLOAD SOURCE CODE + STARTER TEMPLATE:
| RECOMMENDED TUTORIALS |
| SOCIAL MEDIA |
| HASH TAGS |
Xem thêm bài viết khác: https://inst-wd.com/game/