Que es snake

 

Introducción

 

El juego "serpiente" (tiene varios nombres) es uno de los conceptos más simple juego de la historia, y al igual que Tetris es muy adictivo. Hay muchas variaciones de este juego escrito en Flash, y este tutorial se explica una manera de crear. Es un juego relativamente fácil de código, pero no llegan a asegurarse de que cuando se presiona una tecla en rápida sucesión que están registrados. Esto es necesario si desea tener un control total de la serpiente en todo momento.

 

Voy a suponer que usted sabe por lo menos algunos de ActionScript. Si usted es un principiante algunas técnicas probablemente son nuevas. En este tutorial se incluyen el almacenamiento de información en una matriz de dos dimensiones, el concepto de una cola, utilizando un detector de claves,adjuntando los clips de película en tiempo de ejecución y algunas otras cosas como la muy útil operador de módulo (%).

 

Probablemente la versión más común del juego es la de arriba. Su objetivo es mover la serpiente y comer tantas "alimento" bloques como sea posible.Sólo hay un bloque de alimentación en un momento dado. Cuando el alimento se come, la serpiente crece en longitud. Si golpeas una pared o la propia serpiente del juego ha terminado. Otras variaciones incluyen varios bloques de alimentos visibles al mismo tiempo y la capacidad de moverse a través de las paredes y aparecen de la pared de enfrente. Ambas variaciones se explican también.

Descargar 

 

snakeTutorialMX.zip (en zip FLA de Flash MX, 7 Kb)
Descargar 

 

snakeGameWithHighscore.zip (archivos comprimidos, 33 Kb)

 

Ejecución

 

Vamos a saltar en la aplicación del juego. Está escrito en Flash MX. El código se encuentra en el fotograma 1 (la línea de tiempo principal es sólo una imagen). Los números de línea en el texto se refiere a los números de línea en los fragmentos de código en esta página, no en el archivo del fla..

Lo primero que debe hacer es definir algunas variables:

01. tamaño de bloque = 8;   / / el ancho del bloque / altura en número de píxeles

02. gameHeight = 30; / / la altura del juego en número de bloques de

03. gameWidth = 45; / / el ancho de juego en el número de bloques de

04. SNAKE_BLOCK = 1; / / tiene el número que se usa para marcar bloques de serpiente en el mapa

El juego se divide en bloques, o un patrón de cuadrícula. El tamaño de bloque variable contiene el tamaño de un bloque de píxeles. En este caso el tamaño del bloque es de 8, lo que significa que los bloques de construcción de la serpiente y la comida debe ser de 8x8 píxeles, si queremos que cada uno cubre un bloque (en mi ejemplo la serpiente y los bloques de 7x7 píxeles son los alimentos que crea un borde fino alrededor de cada bloque. Tiene mejor creo).

El gameWidth y gameHeight variables tienen la dimensión del área de juego. Dado que el juego se bloquea en tamaño 45x30, y cada bloque es de 8x8 píxeles, el área de juego entero toma (45 * x (30 * = 360x240 píxeles. El SNAKE_BLOCK variable se utiliza para marcar una posición en el área de juego como ocupada por la serpiente. El uso de SNAKE_BLOCK directamente en vez de 1 es puramente para hacer el código más legible.

La siguiente parte es la KeyListener objeto. Tiene una onKeyDown método definido, que se llama cada vez que el usuario presiona una tecla:

01.  KeyListener = nuevos objetos(); / / oyente clave

02.  KeyListener.onKeyDown = función() (

03.         var keyCode = clave.getCode(); / / obtener el código de clave de

04.

05.         si (keyCode> 36 & & keyCode <41) ( / / presiona las teclas de flecha (37 = izquierda, 38 = arriba, 39 = derecha, 40 = hacia abajo) ... 06.                 si (game.onEnterFrame ! = undefined) ( / / sólo permiten movimientos si el juego es en ejecución, y no se detiene 07.                          si (keyCode-37! = [turnQueue 0]) ( / / ... y es diferente de la última tecla presionada 08.                                                       turnQueue.unshift(keyCode-37); / / guardar la clave (o más bien la dirección) en el turnQueue 09.                             )

10.                      )

11.         ) demás si (keyCode == 32) ( / / iniciar el juego si no está iniciado (32 = SPACE) 12.                 si (! gameRunning) (

13.                         startGame ();

14.                 )

15.         ) demás si (keyCode == 80) ( / / pausa / retomar (80 = 'P') 16.                 si (gameRunning) (

17.                         si (game.onEnterFrame) ( / / pausa 18.                                 eliminar juego.onEnterFrame; / / eliminar bucle principal 19.                                 textMC.gotoAndStop("pausa");

20.                         ) más ( / / modo de pausa de la salida 21.                                 juego.onEnterFrame = principal; / / inicio del bucle principal 22.                                 textMC.gotoAndStop("ocultar");

23.                         )

24.                 )

25.         )

26. );

27. clave.addListener(KeyListener);

Llegamos pasado la clave de código y guárdelo en la variable local llamada keyCode (línea 3). Entonces comprobamos si el código es de 37, 38, 39 o 40 (línea 5). Esa es la clave para los códigos de las teclas de flecha hacia la izquierda, arriba, derecha y hacia abajo. Si una tecla de dirección ha sido pulsamos insertar la pulsación de tecla resta un 37 hasta el comienzo de la matriz turnQueue. De esta forma 0-3 representa las curvas diferentes. Antes de que se añade a la cola nos aseguramos de que el cambio no es ya al principio de la cola (línea 7). No tiene sentido tener varias vueltas a la misma clase, uno tras otro en la cola.

Como se verá más adelante, una vez se tomó cada imagen desde el final de la turnQueue y girar a la que se realiza. De esta manera podemos salvar a todos los giros de este "amortiguador" si el jugador hace gira más rápido que la velocidad de fotogramas. Digamos que la cola contiene: 0, 1 y 3 se añade a la misma: 3, 0, 1. El siguiente cuadro vamos a subir (1), el bastidor después de que gire a la izquierda (0) y después hacia abajo (3). Si introducimos nuevos valores a la parte delantera (unshift), entonces debemos elegir entre la espalda (pop). Podríamos insertar hasta el final (push) y luego elige alguno de la parte delantera (turno). La idea es que los valores de salir de la cola en el mismo orden en que entraron (a diferencia de una fila de personas en el pub donde algunos cortes bastardo borracho delante de ti ...).

Las siguientes dos partes en el método onKeyDown por encima de asegurar que el juego comienza cuando el jugador presiona <espacio> y hace una pausa / reanuda cuando la tecla 'P' es presionado.

Un MouseListener objeto se define también para iniciar el juego cuando el usuario hace clic, el juego no es si se ejecuta. Un juego no está en ejecución desde el principio o cuando el juego sobre el texto en la pantalla.

01. MouseListener = nuevos objetos();

02. MouseListener.onMouseDown = función() (

03.         si (! gameRunning) ( / / queremos ser capaces de iniciar el juego haciendo clic en

04.                 startGame ();

05.         )

06 . );

07. Ratón.addListener(MouseListener);

Ésta función es la inicialización del juego. Esto se llama una vez para iniciar un nuevo juego:

01. función startGame () (

02.         x = int(gameWidth / 2); / / posición inicial x en el medio

03.         y = gameHeight-2;     / / y la posición de arranque en la parte inferior

04.

05.         xVelocity = [- 1, 0, 1, 0]; / / velocidad de x cuando se mueve la izquierda, arriba, derecha, abajo

06.         yVelocity = [0, -1, 0, 1]; / / velocidad y cuando se mueve a la izquierda, arriba, derecha, abajo

07.

08.         map = nuevo array(); / / crear una matriz para almacenar los alimentos y la serpiente

09.         de (var n = 0; <gameWidth n, n + +) ( / / hacer un mapa tridimensional de matriz 2

10.                 mapa [n ] = nuevo array();

11.         )

12.

13.         turnQueue = nuevo array(); / / una cola para almacenar pulsaciones de teclas (de modo que x número de pulsaciones de teclas en un marco están repartidas en x número de fotogramas)

14.

15.         juego.createEmptyMovieClip("alimentos", 1); / / crear MC para almacenar los alimentos

16.         juego.createEmptyMovieClip("s", 2); / / crear MC para almacenar la serpiente

17.         scoreTextField.texto = "Puntuación : 0"; / / tipo de información puntuación de

18.

19.         foodCounter = 0; / / realiza un seguimiento del número de clips de película de alimentos

20.         snakeBlockCounter = 0; / / realiza un seguimiento de los bloques de la serpiente, el aumento en cada fotograma

21.         currentDirection = 1; / / tiene la dirección del movimiento (0 = izquierda, 1 = arriba, 2 = derecho, 3 = abajo)

22.         snakeEraseCounter = -1; / / incrementado en cada fotograma, borra la cola de serpiente (estableciendo este a -3 dará lugar a una larga serpiente bloque 3 al principio)

23.         puntuación = 0; / / realiza un seguimiento de la puntuación de

24.

25.         placeFood ("nuevo"); / / Colocar un bloque de nuevos alimentos

26.

27.         textMC .gotoAndStop("ocultar"); / / asegurarse de que no aparezca el texto (como "game over")

28.         juego.onEnterFrame = principal; / / iniciar el bucle principal

29.         gameRunning = cierto; / / indicador que si el juego se está ejecutando. Si es verdad que no significa necesariamente que la principal se llama (el juego podría ser una pausa)

30. )

Se define la posición de partida (la línea 2, 3) de la serpiente, y luego definir cómo la serpiente se mueve dependiendo de la dirección (línea 5, 6). Los números -1, 0, 1, 0 de la matriz xVelocity son los pasos para mover la serpiente horizontal cuando se mueve a la izquierda, arriba, derecha y abajo, respectivamente. El yVelocity define los pasos en sentido vertical. Puede cambiar -1 y -2 a 1 y 2 en xVelocity y yVelocity para crear un resultado interesante. La serpiente se mueve dos pasos cada fotograma, lo que resulta en el futuro serpientes como una línea de puntos.

Creamos una matriz llamada mapa en el que cada elemento contiene otro array (línea 8-11). Esto se conoce como una matriz de dos dimensiones.También definimos / restaurar algunas otras variables como el puntaje y establecer la dirección de mudarse a 1 (arriba).

En la línea 25 creamos un clip de la nueva película de los alimentos y colocarlo en un lugar al azar. Usted puede llamar a esto más de una vez si desea tener varios bloques de alimentos visibles al mismo tiempo.

En la línea 28 en startGame () empezamos el bucle. La función principal será llamado una vez cada cuadro mientras que el juego dura. Para detener un juego (pausa) que dejen de llamar principal retirando los onEnterFrame evento.

El siguiente bloque de código es el núcleo del juego:

01. función main () ( / / un llamamiento a todos los marcos que si el juego se está ejecutando y los que no se detuvo

02.         si (turnQueue.longitud > 0) ( / / si tenemos un turno para realizar ...

03.                 var dir = turnQueue.pop(); / / ... escoger el siguiente turno en la cola ...

04.                 si (dir% 2! =% currentDirection 2) ( / molestos / no de 180 grados a su vez un (a ser capaz de convertirse en la serpiente con una sola tecla)

05.                         currentDirection = dir; / / cambiar de dirección actual hasta el nuevo valor

06.                 )

07.         )

08.

09.         x + = xVelocity] currentDirection [; / / mover la posición de serpiente en x

10.         + y = yVelocity] currentDirection [; / / mover la posición de serpiente y

11.

12.         si ([mapa x] y] [! = SNAKE_BLOCK & & x> -1 & & x <gameWidth & &> -1 & & y <gameHeight y ) ( / / asegurarse de que no están golpeando a la serpiente o salir de la zona de juego

13.                 game.s.attachMovie("snakeMC", snakeBlockCounter, snakeBlockCounter, (_x: * tamaño de bloque x, _y: y tamaño de bloque *)); / / adjuntar un clip de bloque de películas de serpiente

14.                 snakeBlockCounter + +; / / incrementar el contador de la serpiente

15.

16.                 si (typeof(mapa [x] [y]) == "clip de película") ( / / si es un no es un bloque de vacantes luego es un bloque de comida en la posición

17.                         + La puntuación = 10; / / suma puntos para anotar

18.                         scoreTextField.texto = "Puntuación: "La puntuación de +; / / tipo de información puntuación de

19.                         snakeEraseCounter -= 5; / / hacer el serpiente no quitar la cola durante cinco bucles

20.                         placeFood ([mapa x] [y]); / / colocar el clip de película de alimentos que se hace referencia en el mapa [mapa x] [y]

21.                 )

22.

23.                 [mapa x] [y] = SNAKE_BLOCK; / / establece la posición actual de ocupados

24.

25.                 var = tailMC game.s] snakeEraseCounter [; / / obtener "la última" MC de acuerdo a snakeEraseCounter (puede no existir)

26.                 si (tailMC) ( / / si el bloque existe serpiente

27.                         eliminar mapa [tailMC._x/ tamaño de bloque] [tailMC._y/ tamaño de bloque]; / / borrar el valor de la matriz m

28.                         tailMC.removeMovieClip(); / / borrar el MC

29 .                 )

30.                 snakeEraseCounter + +; / / Incremento borrar serpiente contra

31.         ) más ( / / GAME OVER si está en un bloque de serpiente o fuera del mapa

32.                 GameOver ();

33.         )

34. )

El código anterior es probablemente la parte más compleja. Lo primero que hacemos cada fotograma es comprobar si hay alguna gira guardan en la cola (línea 2). Si lo hay, tomamos el último (línea 3). Pero sólo el cambio de dirección si no es a su vez un giro de 180 grados. Es decir, no queremos ser capaces de mover hacia la izquierda y luego, si se presiona la derecha se mueven hacia la derecha y por lo tanto chocan directamente con la cola de serpiente. Así, si la dirección de la corriente que queda (0) queremos ser capaces de subir (1) o hacia abajo (3). Si nos estamos moviendo arriba (1) queremos ser capaces de girar a la izquierda (0) o derecha (2). Como puede ver, la regla es que si la dirección actual y la nueva orientación son pares o impares, tanto entonces eso es un giro de 180 grados.

El operador% calcula el saldo de un número dividido por otro número. Por lo tanto, un número par 2% de devolución y un 0% 2 número impar devolverá 1.Si dir 2% es diferente a 2% currentDirection luego uno de ellos es par y el otro es impar, y que a su vez se permite.

Después nos trasladamos a la serpiente a una nueva posición (línea 9-10). Para llegar a la nueva posición se añade un número que es -1, 0 o 1. ¿Qué añadir depende de la dirección de serpiente.

Una vez que hemos pasado a una nueva posición, nos aseguramos de que la nueva posición no contiene un bloque de serpiente y que no es fuera del área de juego (línea 12). Si esta prueba falla que llamamos GameOver (). Si es cierto, adjuntamos un bloque de nueva serpiente de la "s" de clip de película en el juego "" imagen en movimiento (línea 13-14). Nos mueve el clip de película adjunta a la posición de la derecha directamente al pasar un objeto con el derecho _x e _y valores a la attachMovie método.

Una variación de las reglas es hacer el movimiento de serpiente al lado opuesto cuando está a punto de abandonar el área de juego. Podemos lograr esto añadiendo el código siguiente entre la línea 10 y 12:

si (x <0) ( / / Mover a través de paredes

        x + = gameWidth;) demás si (x> = gameWidth) (x -= gameWidth;)

si (y <0) (y + = gameHeight;) demás si (y > = gameHeight) (y -= gameHeight;)

Si usamos el código a continuación, sólo tenemos que compruebe los bloques serpiente en la sentencia if en la línea 12 desde la única forma de perder el juego es golpear a la serpiente.

Después de haber conectado la serpiente nuevo bloque que comprobar para ver si hay una referencia impidiendo que los alimentos guardados en la matriz de mapa en la nueva posición (line16). Si lo hay, se añade a la puntuación de 10 (línea 17) e imprimir la partitura en la instancia de campo de texto llamadoscoreTextField (línea 18). A continuación, disminuir la snakeEraseCounter por 5, que tendrá el resultado de que la cola de serpiente no se borre los siguientes 5 fotogramas, lo que hará es crecer a 5 cuadras de longitud. La última cosa que hacer si un bloque se come el alimento es para moverlo a una nueva posición (línea 20).

Se podría añadir estas 3 líneas después de la línea 20 para desovar un bloque nuevo alimento decir que cada 300 puntos:

si (puntuación de 300% == 0) (placeFood ("nuevo"); / / Colocar un bloque de nuevos alimentos

)

Después de verificar los alimentos en la nueva posición, hay que marcar la nueva posición como ahora ocupada por la serpiente (línea 23).

La última parte es para quitar la cola con un bloque de cada cuadro (a menos que se supone que debe crecer por comer alimentos). Elegimos el "último" clip de película de tamaño reducido (línea 25). No siempre es la última, porque digamos que el bloque de la serpiente del último número de orden 50, y un alimento ha sido comido. Luego snakeEraseCounter será tal vez de 50 - 5 = 45 y el bloque no se elimina. Pero si el bloque existía (línea 26) que lo quite del mapa (línea 27) y, finalmente, retire el clip de película en sí (línea 28). El snakeEraseCounter son siempre superadas por 1 (línea 30).

Dado que queremos añadir un bloque de serpiente en la parte delantera de la serpiente y quitar el de la parte de atrás, ¿por qué una se adhieren al frente y luego retire la una en la parte trasera en lugar de mover el bloque de la cola al frente? Claro, usted podría hacer eso, pero cuando hice el juego de la serpiente en 1Kb llegué a la conclusión de que esta forma requiere la menor cantidad de código, y si se mueve el bloque de la cola hacia el frente que todavía tienen que adjuntar los clips de película para hacer crecer la serpiente. Con esta solución usted obtiene el cultivo de la serpiente de forma automática, con sólo compensar el snakeEraseCounter. Esta solución también resuelve el problema cuando un bloque se come el alimento, mientras que la serpiente está creciendo. Digamos que comemos un bloque de alimentos y la serpiente se supone un crecimiento del 5 de longitud, en cada bloque de los alimentos. Después de 2 cuadros, cuando la serpiente ha crecido 2 bloques de 5, otro bloque que comemos alimentos. Esto debería dar lugar a la serpiente no está creciendo en los próximos 5 marcos, pero en lugar los próximos 8 marcos.

El GameOver () función siguiente sólo muestra el juego "sobre" el texto y se detiene el bucle principal:

01. función GameOver () (

02.         textMC.gotoAndStop("GameOver"); / / muestra "game over" texto

03.         eliminar juego.onEnterFrame; / / quit principal función de bucle

04.         gameRunning = falso; / / el juego es ya no se publican

05. )

GameOver () sólo se le llama en main () cuando llegamos a la serpiente o salir del área de juego.

La última función lugares un bloque nuevo alimento en un lugar al azar si "nuevo" se le pasa, o se mueve un bloque de alimentos existentes, si un clip de película de referencia se pasa a la misma:

01. función placeFood (foodMC) (

02.         hacer (

03.                 var = xFood al azar(gameWidth);

04.                 var = yFood al azar(gameHeight);

05.         ) mientras ([mapa xFood] [yFood]); / / mantener levantado un lugar hasta que sea una vacante (que no quiere poner la comida en una posición ocupada por la serpiente)

06.

07.         si (foodMC == "nuevo") ( / / crear un clip de la nueva película de los alimentos

08.                 foodMC = game.food.attachMovie("foodMC", foodCounter, foodCounter);

09.                 foodCounter + +;

10.         )

11.

12.         foodMC._x * xFood = tamaño de bloque; / / colocar los alimentos

13.         foodMC._y * yFood = tamaño de bloque; / / colocar los alimentos

14.

15.         [mapa xFood] [yFood] = foodMC; / / guardar una referencia a este clip de película de alimentos en el mapa

16. )

Lo primero que debe hacer es encontrar un lugar libre para colocar la comida en. Esto se hace usando un bucle while hacer ... (línea 2-5). Simplemente elige una al azar x coordinar y una al azar y coordinar en el área de juego y, a continuación seguir haciéndolo siempre y cuando el lugar elegido contiene un bloque de alimentos o la propia serpiente. De esta manera vamos a terminar con un sistema de coordenadas que no está ocupado en el que podemos poner la comida.

Si el "nuevo" se pasa como argumento a la función, se adjunta un nuevo clip de la nueva película de los alimentos en el clip de película llamado "alimento".

Después nos trasladamos el clip de película de alimentos (ya sea el uno o el que hemos creado una referencia que se aprobó) a la ubicación, que se escogió al azar. Luego guardar una referencia a este clip de película de alimentos en la matriz del mapa.

Agregar a la sala de juego

Es posible que desee agregar a la sala de juego. En ese caso, puede utilizar esta función:

función placeWall (x, y, tipo) (wallMC = game.wall.attachMovie(tipo, wallCounter, wallCounter); wallCounter + +; wallMC._x = x * tamaño de bloque; wallMC._y = y * tamaño de bloque; [mapa x] [y] = 1;)

Sólo tienes que pegar el código anterior en el fla.. Los argumentos de la función son: un bloque de la columna, una fila de bloques y un tipo de bloque. El tipo es una cadena, y que atribuirá el clip de película de la biblioteca con el nombre de vinculación idéntico al tipo.

También es necesario crear un contenedor de clip de película nuevo para las paredes y un par de bloques de pared. En la función startGame, agregue estas líneas:

juego.createEmptyMovieClip("pared", 3); / / crear MC para almacenar las paredes

wallCounter = 0; placeWall (10, 10, "wallMC"); placeWall (11, 10,"wallMC"); placeWall (12, 10 "wallMC");

Aquí he añadido tres bloques de pared. Asegúrese de que tiene un clip de película en la biblioteca con una vinculación id "wallMC" (clic derecho sobre el símbolo y seleccione Propiedades). O simplemente puede utilizar "snakeMC".

Agregar un gráfico diferente para la cabeza de serpiente

Hay una adición muy simples que usted puede hacer para tener la serpiente "cabeza" un aspecto diferente. En el snakeMC, añadir un nuevo marco, a fin de que se compone de 2 cuadros. En el cuadro 1 se coloca el gráfico que desea utilizar para la cabeza. En el cuadro 2, se colocan los gráficos utilizados para el resto de la serpiente. También, ponga un stop () de acción en el fotograma 2, de lo contrario toda la serpiente parpadeará.

Eso es todo. Como usted probablemente ha notado, el juego ejemplo en la parte superior de esta página tiene una tabla de puntuaciones máximas. He decidido no incluirlo en este tutorial por la razón que se requiere un script del lado del servidor escrita en asp, php o similares. Hay un montón de libros de visita libre / fila (básicamente la misma cosa al codificar) las secuencias de comandos en otros lugares y la información disponibles sobre la manera de usarlos con Flash.