"Tic-Tac-Play" to make a memory of childhood games

99% of information We read, we forget anyway. The best-of-the-remember is-to-do.

Origin

Recently in the freecodecamp above to learn the front-end knowledge, unconsciously have learned 319 lessons, now encountered a small project is to do a tic-tac-word game. Speaking of well word game, really full of childhood taste, still remember the most crazy time is a child with a table with a draft paper can play a lesson, back home with younger brother can continue to play, for not too much entertainment program of childhood, is really a little game to play. This game code is relatively simple, mainly mastering the principles of the algorithm, but there are some areas to be aware of, so want to put their own problems recorded.

Game interface

Go to the chase. The project is as follows:

Freecodecamp on the request can not view the source code to achieve, and then think about the page first. See the TIC, think of 9 Li, and then set the Li's border as well word line. So with a div wrapped up a UL, there are 9 li.

The game has a start screen to select the player's character, then choose which side to start with and then play. The selection interface makes a mask layer, which gives the user the option to hide the mask layer and start the game after selection.

Well word game algorithm

The algorithm references this article. But the inside of the picture can not see, the author according to their own understanding to explain again, and with some pictures.

This is a man-machine battle, so we need to write more intelligent algorithms. First of all, the designer should know how to play the game, have their own strategy, the next step is to put their own strategy into reality.

As you can see, the entire chessboard can be connected to 8 lines, i.e. a total of 8 winning possibilities:

In the course of playing chess, there are several states:
1, start the first step
2, the second step
3. Attack
4. Defense
5. Waste time

1, start the first step, this step has two kinds of situation

A, if the initiator is a computer, then the pawn in the center position,

B, if the initiator is a player, then there are three scenarios to consider
If the player is in the center position, then the computer must be in the four corners, because if it does not fall in the corner, then there will be a losing situation. Suppose you now use 1-9 to represent 9 chess bits. As shown, if the player first step in the center position, the second step of the computer fell in the 2nd position of the Edge (Figure 2), the third step players only need to play chess in the 7th or 9th (Figure 3), fourth step computer must be in 1 or 3, fifth step players in 7 or 9, the sixth step computer must be 1 or 3, Then the seventh step is to win by playing chess at 4 or 6.

If the player is in a corner, then the computer needs to play chess in the center, and counter-attack if it is guaranteed to not lose.

2, the second move (the first angle principle)

According to the above analysis, if the initiator is the player and the player falls in the center position, in order to avoid the loss of the situation, the computer needs to fall on the corner. And if the initiator is a computer, then if the player falls on the edge, the computer falls in the corner to let the loss of the situation belongs to the player.

3. Attack

Check the chessboard, if there are two pieces of their own to join together and there is still space in the line, then fall in the position.

4. Defense

Check the chessboard, if there are two pieces of the other side together and there is still space in the line, then the game fell in that bit.

5. Waste time

When there is no need to attack and do not need to defend, then you can find a place to play chess, as far as possible to find the connection there are two seats in the position.

Special cases
There is a special case is not able to perform the principle of the first angle, as shown, the first step, the player first chess in 1, the second step, the computer according to the rules of the first step of the game in the center position 5, the third step, the player in the 1 diagonal position 9 Chess, according to the principle of the first angle, the fourth step The fifth step is to block the computer in the 7 or 3 position, then the computer loses. This is the only case where the principle of the first angle cannot be enforced, so it should be ruled out in the non-attacking and non-defensive situations.

Specific implementation

Said so much, may be more boring, the following describes the specific code implementation.

Using a two-dimensional array panel to save the state of the Board, 1 is the value of the computer, and 1 is the player's value.
Winarr Save all 8 chess bit combinations that may win, maintain Computerwin and Userwin, the initial value is equal to Winarr, and when the computer or player plays chess each time, the two arrays are updated separately, removing the non-winning chess position combination. Computerwin and Userwin are updated separately when the panel is updated.

The core approach is to play,play the execution of the steps pseudo-code as follows:

If you can attack    traverse Computerwin Array, find the position that can be attacked, play chess, show whether win. Can not attack, if need to defend    traverse Userwin, according to the player can win the combination, find the position that need defense, play chess, update panel, do not need to defend, if is the first step of the computer to    play chess in the center position, update panel; not the first step    . If the center position is not taken up, play chess in the center position, update the panel; Returns    if it is a special case, play chess at the edge, update the panel; returns if the corner position is    still there, select a corner to play chess, update the panel; return    to the last case, Find the remaining slots, prioritize the slots in Computerwin, play chess, update the panel; back

The play algorithm is implemented as follows:

if(Canattack ()) {Console.log ("Attack"); varAttackpos =Findattackpos (); UpdatePanel (Attackpos, computerval);} Else if(Needdefend ()) {Console.log ("Defend"); varDefendpos =Finddefendpos (); UpdatePanel (Defendpos, computerval);} Else if(Firststep ()) {Console.log ("First");        UpdatePanel (Firstpos, computerval); Running=true;} Else{Console.log ("Other"); if(panel[1][1] = = 0) {UpdatePanel (Firstpos, computerval); return; }    if(Special ()) {Console.log (' Special '); varpos =Findspecialpos ();        UpdatePanel (POS, computerval); return; }    varRandom = Math.floor (Math.random () * 2); if(panel[0][0] = = 0 && panel[2][2] = = 0) {        varpos = (Random = = 0)? 0:8;    UpdatePanel (POS, computerval); } Else if(panel[0][2] = = 0 && panel[2][0] = = 0) {        varpos = (Random = = 0)? 2:6;    UpdatePanel (POS, computerval); } Else {        varOtherpos =Findemptypos ();    UpdatePanel (Otherpos, computerval); }}

Summarize

One of the challenges in coding is the JavaScript array object, the first time I call the play method to output a panel, I get the value of the panel after play execution, and then I ask a great God to find out because the panel is an object, Because object traversal refers to the same piece of memory address, once changed, it's all changed. If you use the subscript to output each value, you can get the initial value, you can also use the JSON method to the array string, and then print out to see the results.

In addition, we learned how to encapsulate a class in JavaScript, write a private method out of the class, and write a method of exposing it to the class. Of course, there are a lot of places to learn. Continue to learn.

Then, the game full code on my GitHub, interested can also be onlookers: TicTacToe

Sometimes some things seem very simple, or heard a lot of times, in the heart feel that the realization should be very simple, no great, feel disagree, but only really to practice out of the time can realize the fun and thought, can really grasp. So, go for it.

This article is short, if there are any questions or suggestions, can be a lot of communication, original articles, writing limited, Caishuxueqian, if there is not in the text, million hope to inform.

If this article is helpful to you, look strongly recommend.

"Tic-Tac-Play" to make a memory of childhood games