Detailed explanation of steps to implement Tic-Tac-Toe game with JS-JS Tutorial-php.cn

This time I will bring you a detailed explanation of the steps to implement the Tic-Tac-Toe game with JS. What are theprecautionsfor implementing the Tic-Tac-Toe game with JS. The following is a practical case, let’s take a look.

Recently, a class ended and I needed to make a tic-tac-toe game. I wrote one usingJavaScript. First of all, the interface should not be a big problem, just write it in html. It is mainly about the AI algorithm used in human-machine games. How to make computers smart is worth thinking about. After starting the game, the player goes first. From a computer perspective, multiple situations can be analyzed and weighted according to importance.

The situation is as follows:

1. There are only two chess pieces in the same row (row, column, diagonal), and they are all yours. As long as you go further can win, then the remaining position has the highest weight andpriorityis the highest. Assign first-level weight.

2. There are only two chess pieces in the same row (row, column, diagonal), and they are both the opponent's (that is, the player's). As long as one step further, the player will succeed, so "I "To block, the remaining position is given a secondary weight.

3. Because the computer side moves backward, if you are smart, you need to block the player side all the time. Therefore, when there is only one chess piece in a row and it is the player's chess piece, then the weights of other positions in the row are set to level three. .

4. Level 4 weight: There are only your own (computer side) chess pieces in a row.

5. Level 5 authority: There are no chess pieces in the same row, including the opponent's and your own.

When implemented, the chess pieces in each position can be represented bytwo-dimensional arrayfull, and the weight of each position is also represented by a two-dimensional array val. After the player finishes playing, the AI side's function is called. Before the AI side moves, it updates the weight first, and then selects the position with the largest weight (optimal solution). Whether it is the AI or the player, they must determine whether there is a win or loss after each move. Use the alert() function to output the results.

In order to represent the size of the weight, the regulations are stipulated in the order of level to level 5, add 10000, 1000, 10, 5, 3

Note: Since the source code may be submitted, I have no separation of separation. Create css styles and js files, but it is best to write them separately to be more standardized. If there are any deficiencies, criticisms and corrections are welcome.

The source code is as follows:

井字棋

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!