Actionscript 3.0 for beginners: lesson # 3

We continue the analysis of the example of the game Tic Tac Toe, presented in Actionscript 3.0 for beginners: lesson # 2 . We arrived at the function that creates the game grid:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/ **
* Graphic design grid (3x3) on screen
*
* @ Param void
* @ Return void
* @ Private
* /
createGrid ( ) : void { private function createGrid (): void {
/ / Temporary pointer to a MovieClip
/ / Note: here you could also use a Sprite
/ / But in this case I need to extend the object
/ / Adding some personal proproetà. The Sprite
/ / Is a closed class and therefore not extensible runtime, while
/ / The MovieClip class is a dynamic class and then makes
/ / Possible to add run-time properties
MovieClip , i : uint = 0 ; var tm: MovieClip , i: uint = 0;
/ / Add the MovieClip in a 3x3 pattern
; i < 9 ; i ++ ) { for (; i <9; i + +) {
( ) ; tm = new MovieClip ();
tm ) ; addChild (tm);
= OFFSETX + ( ( i % 3 ) * ( PLAYER_WIDTH + PLAYER_OFFSET ) ) tm. offsetX = x + ((i% 3) * (PLAYER_WIDTH PLAYER_OFFSET +))
= OFFSETY + Math . floor ( i / 3 ) * ( PLAYER_HEIGHT + PLAYER_OFFSET ) tm. OFFSETY + y = Math . floor (i / 3) * (+ PLAYER_HEIGHT PLAYER_OFFSET)
tm. _index = i;
0 ) ; drawPlayer (tm, 0);
}
/ / Draw the 2 lines and 2 horizontal ranges addressable
this . graphics ) { with (this. graphics) {
6 , 0x666666 ) ; lineStyle (6, 0x666666);
OFFSETX , OFFSETY + ( PLAYER_HEIGHT + 15 ) ) ; moveTo (offsetX, OFFSETY + (PLAYER_HEIGHT + 15));
OFFSETX + ( ( PLAYER_WIDTH + 20 ) * 3 ) , OFFSETY + ( PLAYER_HEIGHT + 15 ) ) ; lineTo (offsetX + ((PLAYER_WIDTH + 20) * 3), OFFSETY + (PLAYER_HEIGHT + 15));
OFFSETX , OFFSETY + ( PLAYER_HEIGHT + 20 ) * 2 ) ; moveTo (offsetX, OFFSETY + (PLAYER_HEIGHT + 20) * 2);
OFFSETX + ( ( PLAYER_WIDTH + 20 ) * 3 ) , OFFSETY + ( PLAYER_HEIGHT + 20 ) * 2 ) ; lineTo (offsetX + ((PLAYER_WIDTH + 20) * 3), OFFSETY + (PLAYER_HEIGHT + 20) * 2);
OFFSETX + ( PLAYER_WIDTH + 15 ) , OFFSETY ) ; moveTo (offsetX + (PLAYER_WIDTH + 15), OFFSETY);
OFFSETX + ( PLAYER_WIDTH + 15 ) , OFFSETY + ( ( PLAYER_HEIGHT + 20 ) * 3 ) ) ; lineTo (offsetX + (PLAYER_WIDTH + 15), OFFSETY + ((PLAYER_HEIGHT + 20) * 3));
OFFSETX + ( PLAYER_WIDTH + 20 ) * 2 , OFFSETY ) ; moveTo (offsetX + (PLAYER_WIDTH + 20) * 2 OFFSETY);
OFFSETX + ( PLAYER_WIDTH + 20 ) * 2 , OFFSETY + ( ( PLAYER_HEIGHT + 20 ) * 3 ) ) ; lineTo (offsetX + (PLAYER_WIDTH + 20) * 2 OFFSETY + ((PLAYER_HEIGHT + 20) * 3));
}
}

This meotdo performs two tasks: to add a MovieClip used to intercept the click of a mouse (the box "circle" or "tails") and draw the two horizontal and two vertical lines represent the Graglia (if you do stanghezza classic pencil ). , perchè quest'ultimo non permette l'aggiunta di proprietà o metodi in fase di runtime. As indicated in the comment of the method, the object was chosen MovieClip instead of the more simple Sprite , because it does not allow adding properties or methods at runtime.
che ha il compito di disegnare sul MovieClip vuoto appena creato uno dei giocatori (la casella “cerchio” o “croce”), in base al secondo parametro passato nel Inputs . After creating the MovieClip is a special feature called drawPlayer() which has the task of designing the MovieClip you just created a load of players (the box "circle" or "tails"), according to the second parameter passed in the inputs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

/ **
* Draw a circle or a cross depending on the player
*
* @ Param (movie clip) w = where to draw the MovieClip
* @ Param (uint) pl = number of players: 1 or 2 - 0 if you draw a rectangle to intercept the click event
* /
drawPlayer ( p : MovieClip , pl : uint ) : void { drawPlayer private function (p: MovieClip , pl: uint ): void {
pl ) { switch (pl) {
/ / This is a special case: a rectangle is drawn
/ / Used to detect the mouse click
: case 0:
p . graphics ) { with (p. graphics) {
; clear ();
CELL_EVENT_COLOR , CELL_EVENT_ALPHA ) ; beginFill (CELL_EVENT_COLOR, CELL_EVENT_ALPHA);
0 , 0 , 60 , 60 ) ; drawRect (0, 0, 60, 60);
; endFill ();
}
= p . buttonMode = true ; p. useHandCursor = p. buttonMode = true;
/ / Add the click event of this box
( MouseEvent . CLICK , onCellClick ) ; p. addEventListener ( MouseEvent . CLICK, onCellClick);
break;
/ / Player 1 (or)
: case 1:
p . graphics ) { with (p. graphics) {
; clear ();
PLAYER_LINE_WIDTH , PLAYER_1_COLOR ) ; lineStyle (PLAYER_LINE_WIDTH, PLAYER_1_COLOR);
30 , 30 , 30 ) ; drawCircle (30, 30, 30);
}
= p . buttonMode = false ; p. useHandCursor = p. buttonMode = false;
/ / Remove the click event of this box
( MouseEvent . CLICK , onCellClick ) ; p. removeEventListener ( MouseEvent . CLICK, onCellClick);
break;
/ / Player 2 (x)
: case 2:
p . graphics ) { with (p. graphics) {
; clear ();
PLAYER_LINE_WIDTH , PLAYER_2_COLOR ) ; lineStyle (PLAYER_LINE_WIDTH, PLAYER_2_COLOR);
0 , 0 ) ; moveTo (0, 0);
60 , 60 ) ; lineTo (60, 60);
60 , 0 ) ; moveTo (60, 0);
0 , 60 ) ; lineTo (0, 60);
}
= p . buttonMode = false ; p. useHandCursor = p. buttonMode = false;
/ / Remove the click event of this box
( MouseEvent . CLICK , onCellClick ) ; p. removeEventListener ( MouseEvent . CLICK, onCellClick);
break;
}
}

The case 0 corresponds to the empty box. : This condition occurs when initializing the game: in fact, see the call to drawPlayer() method in createGrid() :

1	0 ) ; drawPlayer (tm, 0);

In this condition the box is ready to respond to user input. In fact, a listener is added to trap the mouse click event. Note that when drawn one of two players (cases 1 and 2, player "circle" and "cross"), the listener is simply removed, so as to avoid a "double play"!

Events

As we saw above, the "empty" responds to mouse clicks:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/ **
* This event is released when you click on a cell game
* /
onCellClick ( e : MouseEvent = null ) : void { onCellClick private function (e: MouseEvent = null): void {
/ / Check that the game is not paused or stopped
! __stop ) { if (! __stop) {
/ / Increment the counter clicks
__clickNumber + +;
/ / Fetch the pointer to the player "clicked"
MovieClip = e . currentTarget as MovieClip ; var p: MovieClip = and. currentTarget as MovieClip ;
/ / Drawing (o) or (x)
__player ) ; drawPlayer (p, __player);
/ / Play reflects the linear array
_index ] = ( __player== 1 ) ? PLAYER_1_WIN : PLAYER_2_WIN ; __cell [p. _index] = (__player == 1)? PLAYER_1_WIN: PLAYER_2_WIN;
/ / Check if someone has won
checkCell ();
/ / Shift change: if the player has played 1 imposed the player 2 and vice versa
) ? 2 : 1 ; __player = (__player == 1)? 2: 1;
/ / Video signal to the new player's turn
= "PLAYER " + __player ; turno_txt. text = "Player" + __player;
}
}

The flag __stop , which corresponds to a global variable within our class, is a standard technique that allows you to check the status of the game. . In our case, I used to tell how the "game" __stop = false , and how "pause" __stop = true . When taking the event onCellClick() , the mouse click on the box, just check that the game is "paused". If we increase the variable playing __clickNumber that takes into account the number of clicks (or play) done. This "counter" it will be useful later to see if all boxes are checked.
; utilizzando sempre il meotdo drawPlayer() . Through the property e.currentTarget recovery of the pointer to the box where you click and done on this design one of two possible signs ("circle" or "tails") based on the active player indicated __player , always using the meotdo drawPlayer() . The line:

1	_index ] = ( __player== 1 ) ? PLAYER_1_WIN : PLAYER_2_WIN ; __cell [p. _index] = (__player == 1)? PLAYER_1_WIN: PLAYER_2_WIN;

is important because it reflects the bet linear logical array used - see below - to determine the winning of one of two players. (valore 10) indicano nell'array lineare chi ha effettuato la giocata. The constants PLAYER_1_WIN (value 1) and PLAYER_2_WIN (value 10) linear array indicate who made the bet.

See for more information: Undolibrary MatrixArray: an extension of the Array class

checkCell (): The Core

Deich a paragraph to this method because, in the context of this example, the true heart of the game. The method checkCell() , in fact, see if there was a win by either player:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/ **
* This function checks the array to see if any
* Player has won. Is called each time a player
* Marks a box with an (x) or (o).
* Also, if the variable is equal to 9 __clickNumber means
* That all boxes are filled and, there being no
* Winner, no one won!
*
* @ Private
* /
checkCell ( ) : void { private function checkCell (): void {
/ / Based on the value is set __player
/ / Check value to ensure a win
uint = ( __player== 1 ) ? 3 * PLAYER_1_WIN : 3 * PLAYER_2_WIN ; var winValue: uint = (__player == 1)? PLAYER_1_WIN * 3: * 3 PLAYER_2_WIN;
/ / Check all rows, columns and diagonals
: Array = __cell ; var c: Array = __cell;
/ / Check the first 3 lines
c [ 0 ] + c [ 1 ] + c [ 2 ] == winValue || if (c [0] + c [1] + c [2] == winValue | |
3 ] + c [ 4 ] + c [ 5 ] == winValue || c [3] + c [4] + c [5] == winValue | |
6 ] + c [ 7 ] + c [ 8 ] == winValue || c [6] + c [7] + c [8] == winValue | |
/ / The 3 columns
0 ] + c [ 3 ] + c [ 6 ] == winValue || c [0] + c [3] + c [6] == winValue | |
1 ] + c [ 4 ] + c [ 7 ] == winValue || c [1] + c [4] + c [7] == winValue | |
2 ] + c [ 5 ] + c [ 8 ] == winValue || c [2] + c [5] + c [8] == winValue | |
/ / The 2 diagonal
0 ] + c [ 4 ] + c [ 8 ] == winValue || c [0] + c [4] + c [8] == winValue | |
2 ] + c [ 4 ] + c [ 6 ] == winValue ) { c [2] + c [4] + c [6] == winValue) {
/ / If any of these conditions is verified
/ / Someone has won, and then show the panel
/ / Of "victory" (1)
) ; showPanel (1);
{ Else {}
/ / If no one has won, if you check all the boxes
/ / Are filled. If so, show the panel
/ / End of the game and "no winner" (0)
__clickNumber == 9 ) { if (__clickNumber == 9) {
) ; showPanel (0);
}
}
}

The method, in its simplicity, speaks for itself. It is invoked for each click on the board deciding the fate of the game! The logic array is used to "add" rows, columns and diagonals in search of a possible "tris" by the current player, indicated by the variable __player . Furthermore, as can happen, __clickNumber takes into account the clicks made. This variable should never reach the value 9, unless neither player has won.

Next time we will examine some specific features of language Actionscript 3.0 used in this demo.