ActionScript 3.0 para principiantes: lección # 3

Continuamos el análisis del ejemplo de la Toe juego Tic Tac, presentado en ActionScript 3.0 para principiantes: lección # 2 . Llegamos a la función que crea la red de juego:

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
/ **
* Cuadrícula de diseño gráfico (3x3) en la pantalla
*
* @ Param vacío
* @ Return vacío
* @ Privado
* /
createGrid ( ) : void { createGrid función privada (): void {
/ / Puntero temporal a un clip de película
/ / Nota: aquí también se podría utilizar un Sprite
/ / Pero en este caso la necesidad de ampliar el objeto
/ / Agregando un poco de proproetà personal. El Sprite
/ / Es un círculo cerrado y tiempo de ejecución por lo tanto, no extensible, mientras que
/ / La clase MovieClip es una clase dinámica y luego hace
/ / Posibilidad de añadir tiempo de ejecución de propiedades
MovieClip , i : uint = 0 ; var tm: MovieClip , i: uint = 0;
/ / Añade el clip de película en un patrón de 3x3
; 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 = Matemáticas . piso (i / 3) * (+ PLAYER_HEIGHT PLAYER_OFFSET)
tm = i _index.;
0 ) ; drawPlayer (tm, 0);
}
/ / Dibujar el 2 líneas y 2 rangos de sincronización horizontal direccionable
this . graphics ) { con (this. gráficos) {
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));
}
}

Este meotdo realiza dos tareas: añadir un MovieClip para interceptar el clic de un ratón (el cuadro de "círculo" o "cruz") y sacar las dos horizontales y dos líneas verticales representan el Graglia (si lo hace stanghezza lápiz clásico ). , perchè quest'ultimo non permette l'aggiunta di proprietà o metodi in fase di runtime. Como se indica en el comentario del método, el objeto fue elegido MovieClip en lugar de los más sencillos Sprite , ya que no permite agregar propiedades y métodos en tiempo de ejecución.
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 . Después de crear el MovieClip es una característica especial llamada drawPlayer() que tiene la tarea de diseñar el MovieClip que acaba de crear un montón de jugadores (el cuadro de "círculo" o "cruz"), de acuerdo con el segundo parámetro en las entradas.

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
/ **
* Dibujar un círculo o una cruz dependiendo del jugador
*
* @ Param (clip de película) w = dónde trazar la MovieClip
* @ Param (uint) pl = Número de jugadores: 1 o 2 a 0 ​​si se dibuja un rectángulo para interceptar el evento click
* /
drawPlayer ( p : MovieClip , pl : uint ) : void { drawPlayer private function (p: MovieClip , pl: uint ): void {
pl ) { switch (pl) {
/ / Este es un caso especial: se dibuja un rectángulo
/ / Se utiliza para detectar el clic del ratón
: case 0:
p . graphics ) { con (p. gráficos) {
; 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;
/ / Añade el evento click de este cuadro
( MouseEvent . CLICK , onCellClick ) ; p. addEventListener ( MouseEvent CLICK, OnCellClick.);
break;
/ / El jugador 1 (o)
: caso 1:
p . graphics ) { con (p. gráficos) {
; 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;
/ / Eliminar el evento click de este cuadro
( MouseEvent . CLICK , onCellClick ) ; removeEventListener p. ( MouseEvent CLICK, OnCellClick.);
break;
/ / El jugador 2 (x)
: caso 2:
p . graphics ) { con (p. gráficos) {
; 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;
/ / Eliminar el evento click de este cuadro
( MouseEvent . CLICK , onCellClick ) ; removeEventListener p. ( MouseEvent CLICK, OnCellClick.);
break;
}
}

El case 0 corresponde a la casilla vacía. : Esta condición se produce cuando se inicializa el juego: de hecho, ver la llamada a drawPlayer() método en createGrid() :

1
0 ) ; drawPlayer (tm, 0);

En esta condición, la caja está lista para responder a la entrada del usuario. De hecho, un oyente se añade a interceptar el evento clic del ratón. Tenga en cuenta que cuando se dibuja uno de los dos jugadores (casos 1 y 2, el jugador "círculo" y "cruz"), no es más que el oyente eliminado, a fin de evitar una "doble play"!

Eventos

Como vimos anteriormente, el "vacío" responde a los clics del ratón:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/ **
* Este evento se libera cuando se hace clic en un juego de celular
* /
onCellClick ( e : MouseEvent = null ) : void { OnCellClick private function (e: MouseEvent = null): void {
/ / Comprobar que el juego no está en pausa o se detiene
! __stop ) { if (! __stop) {
/ / Incrementar el contador de clics
__clickNumber + +;
/ / Obtener el puntero para el jugador "clic"
MovieClip = e . currentTarget as MovieClip ; var p: MovieClip = y como currentTarget. MovieClip ;
/ / Dibujo (o) o (x)
__player ) ; drawPlayer (p, __player);
/ / Play refleja la matriz lineal
_index ] = ( __player== 1 ) ? PLAYER_1_WIN : PLAYER_2_WIN ; __cell [p. _index] = (__player == 1) PLAYER_1_WIN: PLAYER_2_WIN;
/ / Comprobar si alguien ha ganado
checkCell ();
/ / Cambio de turno: si el jugador ha jugado un impuesto al jugador 2 y viceversa
) ? 2 : 1 ; __player = (__player == 1) 2: 1;?
/ / La señal de video a su vez, el nuevo jugador
= "PLAYER " + __player ; . turno_txt text = "Jugador" + __player;
}
}

La bandera __stop , que corresponde a una variable global dentro de nuestra clase, es una técnica estándar que le permite comprobar el estado del juego. . En nuestro caso, yo solía decir cómo el "juego" __stop = false , y cómo "pausa" __stop = true . Al tomar el caso onCellClick() , el ratón, haga clic en la caja, sólo comprobar que el juego está "en pausa". Si aumentamos el juego variable de __clickNumber que tenga en cuenta el número de clics (o jugar) hecho. Esta "receta" que será útil más adelante para ver si todas las casillas estén marcadas.
; utilizzando sempre il meotdo drawPlayer() . A través de la propiedad e.currentTarget recuperación del puntero a la caja donde se hace clic y hacer en este diseño una de las dos posibles señales ("círculo" o "cruz"), basado en el jugador activo se indica __player , utilizando siempre el meotdo drawPlayer() . La línea:

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

es importante porque refleja la apuesta lineal matriz lógica utilizada - ver abajo - para determinar el ganador de uno de los dos jugadores. (valore 10) indicano nell'array lineare chi ha effettuato la giocata. Las constantes PLAYER_1_WIN (valor 1) y PLAYER_2_WIN (valor 10) array lineal indican que hizo la apuesta.

Ver para más información: Undolibrary MatrixArray: una extensión de la clase Array

checkCell (): El Núcleo

Deich un párrafo a este método, ya que, en el contexto de este ejemplo, el verdadero corazón del juego. El método checkCell() , de hecho, ver si había una victoria por cualquier jugador:

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
/ **
* Esta función comprueba la matriz para ver si
* Jugador ha ganado. Se llama cada vez que un jugador
* Marcas de una caja con una (x) o (o).
* Además, si la variable es igual a 9 __clickNumber medios
* Que todas las cajas están llenas y, al no haber
* Ganador, nadie ganó!
*
* @ Privado
* /
checkCell ( ) : void { checkCell función privada (): void {
/ / Con base en el valor se establece __player
/ / Comprobar el valor de asegurar una victoria
uint = ( __player== 1 ) ? 3 * PLAYER_1_WIN : 3 * PLAYER_2_WIN ; var winValue: uint = (__player == 1) PLAYER_1_WIN * 3: * 3 PLAYER_2_WIN;
/ / Comprobar que todas las filas, columnas y diagonales
: Array = __cell ; var c: matriz = __cell;
/ / Hora de las 3 primeras líneas
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 | |
/ / El 3 columnas
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 | |
/ / Los dos diagonales
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) {
/ / Si alguno de estos requisitos se comprueba
/ / Alguien ha ganado, a continuación, mostrar el panel de
/ / De "victoria" (1)
) ; showPanel (1);
{ Else {}
/ / Si nadie ha ganado, si usted marcar todas las casillas
/ / Se llenan. Si es así, mostrar el panel de
/ / Fin del juego y "no ganador" (0)
__clickNumber == 9 ) { if (__clickNumber == 9) {
) ; showPanel (0);
}
}
}

El método, en su sencillez, habla por sí mismo. Se invoca por cada clic en el tablero de decidir el destino de la partida! La matriz lógica se utiliza para "añadir" filas, columnas y diagonales en busca de un posible "tris" por el jugador actual, indicado por la variable __player . Además, como puede suceder, __clickNumber tiene en cuenta los clics realizados. Esta variable no debe alcanzar el valor 9, a menos que ningún jugador ha ganado.

La próxima vez vamos a examinar algunas de las características específicas del lenguaje ActionScript 3.0 utiliza en esta demo.

No hay comentarios para esta entrada

Deja un comentario

XHTML PERMISO TAG: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción:
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL