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:

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 |
—————————————————————————————————–

Create a To Do List App Using JavaScript.

Ping Pong Game Using JavaScript

Create a Multiple Choice Quiz Using JavaScript

Tetris Game Using JavaScript

Snake Game Using JavaScript

Flappy Bird Game Using JavaScript

—————————————————————————————————–
| SOCIAL MEDIA |
—————————————————————————————————–

Facebook:
Twitter:
Instagram:
Website:

—————————————————————————————————–
| HASH TAGS |
—————————————————————————————————–
#javascript #AI #minimax #recursion #beginners #tutorial

Nguồn: https://inst-wd.com/

Xem thêm bài viết khác: https://inst-wd.com/game/

21 COMMENTS

  1. Thank you very much for the video . It's great , but i have a question , in the options.js file , you have assigned to the xbtn the following
    player.man="X";
    >> but .man ?
    player it's from > const player < , but i don't undesrstant the > .man <
    thank's a lot.

  2. I like your videos so much.If you don't mind, i would like to ask your permission to share your videos to the other website in China because YouTube is blocked from accessing in China.Of course i will give sources of the original website. Thank you very much.

  3. I came across your channel in Reddit wedev tutorials and holy shit you are better than my five years of university

  4. Отлично!!!
    Great video. But could you add subtitles of Russian. Not all points in the video are understandable and easily translatable.

  5. I'm very happy today, After long time you are back to your channel, sir you make great video, your explanation is very amazing and easy to understand, please sir keep updating your channel with New vides, bring more videos about coding projects, web development and many more

LEAVE A REPLY

Please enter your comment!
Please enter your name here