Game Code

Wow think of all the information needed to get to this point. You have learned about multiplayer servers, a little bit about networking, how to create a chat, and the basics of multiplayer gaming in Flash. After all that, this section should be a breeze! We'll discuss the code needed to start a game of tic-tac-toe, restart the game, and detect if the game is over and who (if anyone) won all of which is pretty basic.

As mentioned in the last section, in tic-tac-toe there are nine tiles on the screen, one for each possible move, or space. There is also a movie clip with an instance name of popup. This movie clip contains four keyframes. The first one is blank. The next, labeled Game Started, is displayed when a game first starts; it informs the player that the game is under way and whose turn it is. The next keyframe is labeled Game Over. When the game has finished, this frame is displayed. It can display any of three messages: "You won!," "You lost!," or "Game over. There is no winner." The final keyframe is labeled Player Left. This frame appears when your opponent leaves the game (either by leaving the room or by leaving the chat).

Select the Game frame in the Game Actions layer and open the Actions panel. The first line is this:

 gameInPlay = false;  

This means that a game has not yet started. When a game is started, as you will see, this variable is set to true. When it's false, a user cannot get a response by clicking the tiles.

Next in the frame is this conditional statement:

 1   if (ES.player == 1) { 2      myLetter = "x"; 3      hisLetter = "o"; 4      myTurn = true; 5   } else { 6      myTurn = false; 7      myLetter = "o"; 8      hisLetter = "x"; 9   } 

What this conditional does is simple but important. If you are Player 1 (meaning that the value of the player property is 1), then myLetter is set to contain "x" and hisLetter is set to contain "o". Also, myTurn is set to true. This means that if you are Player 1, then you get to move first and your letter is X. If you are not Player 1, then we assume (since this is a two-player game) that you are Player 2. In this case, myTurn is set to false, myLetter is set to "o", and hisLetter is set to "x".

Here is the startGame() function:

 1   function startGame() { 2      moves = 0; 3      gameInPlay = true; 4      popup.gotoAndStop("Game Started"); 5      if (myTurn) { 6         popup.msg.text = "The game has begun. It is your            turn."; 7      } else { 8         popup.msg.text = "The game has begun. It is your          opponent's turn."; 9      } 10  } 

This function is called when it has been determined that both players have arrived. (It is also called from the restart() function.) It sets the value of moves to 0. This variable is incremented every time a move is made. When this value reaches 9, then no more moves can be made. It is used by the checkForWin() function. Next, the gameInPlay variable is set to true. When it is true, one of the several conditions needed to allow a player to move is met (the others are that locked is not equal to true, and myTurn is true). The pop-up movie clip is sent to the Game Started frame. In lines 5 9 we determine whether to display text informing the user that it is his turn or his opponent's turn. We use the myTurn variable to determine this. Once this function is called, the game has been started, and it is now OK for Player 1 to make the first move.

When the Restart button is clicked, the restart() function is called on both players' computers.

 1   function restart() { 2      for (var i = 1; i<=3; ++i) { 3         for (var j = 1; j<=3; ++j) { 4            var name = "piece"+i+"_"+j; 5            this[name].gotoAndStop(1); 6         } 7      } 8      if (ES.player == 1) { 9         myTurn = true; 10     } else { 11        myTurn = false; 12     } 13     startGame(); 14  } 

Lines 2 7 simply tell each of the nine tile movie clips to go back to frame 1. In lines 8 12 we reinitialize the myTurn variable. If you are Player 1, then it is your turn, so myTurn is set to true. In line 13 the startGame() function is executed. Once this is done, the game has been successfully restarted: The board's previous state has been erased and a new game has begun.

Here is the checkForWin() function:

 1   function checkForWin() { 2      var win = false; 3      var letter = null; 4      if (piece1_1.letter == piece2_1.letter &&        piece2_1.letter == piece3_1.letter) { 5         var letter = piece1_1.letter; 6      } 7      if (piece1_2.letter == piece2_2.letter &&        piece2_2.letter == piece3_2.letter) { 8         var letter = piece1_2.letter; 9      } 10     if (piece1_3.letter == piece2_3.letter &&        piece2_3.letter ==1 piece3_3.letter) { 11        var letter = piece1_3.letter; 12     } 13     if (piece1_1.letter == piece1_2.letter &&        piece1_2.letter == piece1_3.letter) { 14        var letter = piece1_1.letter; 15     } 16     if (piece2_1.letter == piece2_2.letter &&        piece2_2.letter == piece2_3.letter) { 17        var letter = piece2_1.letter; 18     } 19     if (piece3_1.letter == piece3_2.letter &&        piece3_2.letter == piece3_3.letter) { 20        var letter = piece3_1.letter; 21     } 22     if (piece1_1.letter == piece2_2.letter &&        piece2_2.letter == piece3_3.letter) { 23        var letter = piece1_1.letter; 24     } 25     if (piece3_1.letter == piece2_2.letter &&        piece2_2.letter == piece1_3.letter) { 26        var letter = piece3_1.letter; 27     } 28     if (letter != null) { 29        if (letter == myLetter) { 30           gameOver(true); 31        } else { 32           gameOver(false); 33        } 34     } else if (letter == null && moves == 9) { 35        gameOver("tie"); 36     } 37  } 

While long, this function does a very simple thing: It checks to see if there is a winner or if the game is over and there is no winner. In tic-tac-toe there are eight possible ways to win. You can align three like letters vertically in any of the three columns (that's three possibilities), you can align three like letters horizontally in any of the three rows (there's another three), or you can align three like letters diagonally (two possibilities). What we do in lines 4 25 is check, with eight different if statements, to see if any of the eight conditions just described are being met. If any one of them is, then the variable letter is set with the value of the letter that is involved in this match. In line 28 we check to see if letter has a value. If it does, then we determine if it is the current player's letter or his opponent's letter. If it is the current player's letter, then he won the game, so we call gameOver(), passing in true. If the opponent has won, then we call gameOver(), passing in false. If letter is null and moves is 9, then the game is over but there is no winner. In this case we call gameOver() and pass in "tie".

Here is the gameOver() function:

 1   function gameOver(iWon) { 2      gameInPlay = false; 3      popup.gotoAndStop("Game Over"); 4      if (iWon) { 5         popup.msg.text = "You won!"; 6      } else if (iWon == "tie") { 7         popup.msg.text = "Game over. There is no winner."; 8      } else { 9         popup.msg.text = "You lost!"; 10     } 11  } 

The parameter iWon can be true, false, or "tie". First we set gameInPlay to false. This keeps anyone from making any more moves. We then send the pop-up movie clip to the Game Over frame and display some text. The text displayed depends on the value of iWon: If true, then we display "You won!". If false, then we display "You lost!". If the game was a tie, then we display "Game over. There is no winner."

You have now been introduced to all of the functions necessary for creating a very simple multiplayer game in Flash! Using the basic concepts outlined in this chapter, you can now create any number of turn-based multiplayer games. A game of checkers or chess will easily fit into this same multiplayer structure. Games that involve more animation and movement, like pool, require a few more tricks. Check out Chapter 18, "9-Ball," for more on this.