Advertisement
  1. Code
  2. Games

Construye un juego de serpientes clásico en AS3

Scroll to top
Read Time: 29 min

Spanish (Español) translation by Juliana Carvajal (you can also view the original English article)

En este tutorial me gustaría mostrarte lo fácil que es crear un juego clásico de "Serpiente" en Flash. ¡Intentaré explicarte todo fácilmente, paso a paso, para que puedas desarrollar el juego según tus necesidades! El juego se desarrollará en AS3 y usaré el IDE de FlashDevelop.


Introducción

El juego no será complejo. Siempre que golpeemos una pared, se reiniciará el juego. Después de comer una manzana, la serpiente crecerá y aparecerá una "nueva" manzana. (En realidad, será la misma manzana, pero lo explicaré más adelante).

Uno de los aspectos más importantes del juego es la reacción del código a los eventos KEY_DOWN. La serpiente solo cambiará su dirección después de que haya pasado una marca, no inmediatamente después de presionar una tecla. Esto significa que, si la serpiente va hacia la derecha y tu presionas hacia abajo y hacia la izquierda muy rápido, la serpiente bajará, no bajará Y se irá a la izquierda. Sin esta 'característica', la serpiente nos permitiría ir a la izquierda mientras vamos a la derecha, lo que significaría que se golpea a sí misma.


¡Veamos ya el Juego!

Echemos un vistazo al resultado final hacia el que trabajaremos:


Paso 1: Creación del Proyecto

En FlashDevelop, crea un nuevo proyecto y, dentro de la carpeta 'src', crea una carpeta 'com'. En la carpeta 'com' crea una nueva clase y llámala 'Element.as'.

Establece las dimensiones del proyecto en 600x600px.

The FlashDevelop project structure

Paso 2: Espera ... ¿Qué es un Elemento?

La serpiente está formada por cuadrados azules, a los que llamo elementos. Crearemos un Element Class, que dibuja el elemento. La manzana roja también será un elemento, así que ampliaremos el código con algunas líneas más.

Por lo tanto, no crearemos una nueva clase para la manzana. (Pero si realmente lo deseas, puede hacerlo).


Paso 3: Escribir el Element Class

El Element class crea un cuadrado. No lo dibuja en el escenario, simplemente lo crea. El punto de registro del elemento, la posición a la que se refieren sus -coordenadas x y y-, está en la parte superior izquierda.

Después de abrir Element.as, verás algo como esto:

Primero, necesitamos esto para extender la clase Shape, por lo que podemos usar el objeto graphics para dibujar el cuadrado. Después de esto, crea dos variables: una para la dirección (si es parte de la serpiente) y otra para el valor de puntuación (si es una manzana), y luego cambia los parámetros de la función constructora:

Ahora completa la función con algo de código:

Ahora, cada vez que creamos un elemento, dibujará un rectángulo y establecerá el valor de puntuación del elemento en 0 de forma predeterminada. (No pondrá el rectángulo en el escenario, solo lo dibujará dentro de sí mismo. Observa que no hemos llamado a la función addChild ()).

Terminemos esta clase y luego finalmente podemos probar cuánto hemos hecho ya:

Creamos cuatro funciones para cambiar las direcciones y el valor de la manzana. Lo logramos usando setters y getters. ¡Más sobre Setters/Getters en este artículo!


Paso 4: Probar el Element Class

Abra Main.as ahora.

Importe la clase com.Element y crea un elemento en la función init ():

Primero creamos la variable testElement que contiene nuestro elemento. Creamos un nuevo elemento y lo asignamos a nuestra variable testElement. Ten en cuenta los argumentos que te pasamos: primero le damos un color, luego el alpha, el ancho y el alto. Si observas la función Element en el Element class, puedes ver cómo usa estos datos para dibujar el rectángulo.

Después de crear el elemento, lo posicionamos y lo colocamos en el escenario!


Paso 5: Configurar las Variables

Mira el siguiente código. Escribí las funciones de las variables junto a ellas (observa que también importamos las clases necesarias):

La variable más importante es snake_vector. Pondremos cada Elemento de la serpiente en este Vector.

Luego está el markers_vector. Usaremos marcadores para establecer la dirección de las partes de la serpiente. Cada objeto de este Vector tendrá una posición y un tipo. El tipo nos dirá si la serpiente debe ir a la derecha, izquierda, arriba o abajo después de "golpear" el objeto. (No chocarán, solo se comprobará la posición de los marcadores y las partes de la serpiente).

Como ejemplo, si presionamos ABAJO, se creará un objeto. La x y y de este objeto serán las coordenadas x y y de la cabeza de la serpiente, y el tipo será "Down". Siempre que la posición de uno de los elementos de la serpiente sea la misma que la de este objeto, la dirección de los elementos de la serpiente se establecerá en "Down".

¡Lee los comentarios junto a las variables para comprender qué hacen las otras variables!


Paso 6: Escribir la Función attachElement ()

La función attachElement() tomará cuatro parámetros: el nuevo elemento serpiente, las coordenadas x y y, y la dirección de la última parte de la serpiente.

Antes de poner el elemento en el escenario debemos colocarlo. Pero para esto necesitamos la dirección del último elemento de la serpiente, para saber si el nuevo elemento tiene que estar encima, debajo o al lado de este.

Después de verificar la dirección y establecer la posición, podemos agregarlo al escenario.

Ahora podemos usar esta función en la función init():

Creamos los primeros 10 elementos y establecemos la dirección de ellos en 'R' (derecha). Si es el primer elemento, llamamos attachElement() y cambiamos un poco su alpha (por lo que la "cabeza" es de un color ligeramente más claro).

Si deseas establecer la posición en otro lugar, ten en cuenta lo siguiente: la serpiente debe colocarse en una cuadrícula, de lo contrario se vería mal y no funcionaría. Si deseas cambiar la posición x y y puedes hacerlo de la siguiente manera:

Estableciendo la posición x(snake_vector[0].width+space_value)*[UINT], donde debes reemplazar [UINT] con un número entero positivo.

Estableciendo la posición y:  (snake_vector[0].height+space_value)*[UINT], donde debes reemplazar [UINT] con un número entero positivo.

Vamos a cambiarlo a esto:

Y el primer elemento de la serpiente se coloca en el espacio 20 en la cuadrícula x- y en el décimo espacio en la cuadrícula y.

Esto es lo que tenemos hasta ahora:


Paso 7: Escribir la Función placeApple()

Esta función hace lo siguiente:

  1. Comprueba si la manzana fue atrapada. Para esto usaremos el parámetro caught y estableceremos su valor predeterminado en true, en caso de que no pasemos ningún valor como parámetros en el futuro. Si fue detectado, agrega 10 al valor de puntuación de la manzana (por lo que la siguiente manzana vale más).
  2. Después de esto, la manzana debe reposicionarse (no creamos manzanas nuevas) en una posición de cuadrícula aleatoria.
  3. Si se coloca sobre la serpiente, debemos colocarla en otro lugar.
  4. Si aún no está en el escenario, la colocamos allí.

Habrá algunas matemáticas aquí, pero si lo piensas bien, debes entender por qué es así. Simplemente dibújalo en un papel si es necesario.

  • boundsX contendrá cuántos elementos se pueden dibujar en una fila.
  • randomX toma este boundsX, lo multiplica por un Número entre cero y uno, y lo reduce. Si boundsX es 12 y el número aleatorio es 0.356, entonces el floor(12*0.356) es 4, por lo que la manzana se colocará en el cuarto lugar de la cuadrícula x.
  • boundsY contendrá cuántos elementos se pueden dibujar en una columna.
  • randomY toma este boundsY, lo multiplica por un Número entre cero y uno, y lo reduce.
  • Luego establecemos la posición x y y en estos números.

En el ciclo for, verificamos si las nuevas posiciones x y y de la manzana son idénticas a cualquiera de los elementos snake_vectors. Si es así, volvemos a llamar a la función placeApple() (función recursiva) y establecemos el parámetro en false. (Lo que significa que la manzana no fue atrapada, solo necesitamos reposicionarla)

(apple.stage) devuelve verdadero si la manzana está en el escenario. Usamos el '!' operador para invertir ese valor, por lo que si NO está en el escenario, lo colocamos allí.

Lo último que debemos hacer es llamar a la función placeApple() al final de la función init().

Observe que pasamos false como parámetro. Es lógico, porque todavía no capturamos la manzana en la función init(). Solo lo capturaremos en la función moveIt().

Ahora solo quedan tres funciones más para escribir: las funciones directionChanged(), moveIt() y gameOver().


Paso 8: Iniciar la función moveIt()

La función moveIt() es responsable de todo el movimiento. Esta función comprobará los límites y comprobará si hay un objeto en la posición x y y de la cabeza de la serpiente. También buscará la manzana en esta posición.

Para todo esto, usaremos nuestra variable de temporizador.

Agrega dos líneas más al final de la función init():

Mira los comentarios en el código fuente para ver qué bloque de código hace qué.

Ahora necesitamos codificar el movimiento. Para esto, saltamos al bloque de switch, que se ejecutará en cada parte de la serpiente, debido al ciclo for.

Primero necesitamos verificar la dirección del elemento actual.

Cuando la dirección de la parte se establece en "R", por ejemplo, necesitamos agregar algo a su posición X actual (el space_value más el ancho de la parte de la serpiente).

Con esto en mente, podemos completarlo:

Después de probar el código, deberías ver que la serpiente se mueve, sale del escenario y nunca se detiene. (Es posible que debas actualizar la página, o simplemente hagas clic aquí para cargarla en una nueva ventana).

Entonces tenemos que detener a la serpiente


Paso 9: Escribir la Función gameOver()

Esta función será la más corta. Simplemente limpiamos el escenario y lo reiniciamos:

Eso es. Establecemos la variable dead en verdadera, detenemos el movimiento con el temporizador, eliminamos todos los elementos secundarios de la clase y llamamos a la función init(), como si recién comenzáramos el juego.

Ahora, volvamos a la función moveIt().


Paso 10: Continuación de la función moveIt()

Usaremos la función gameOver() en dos lugares. La primera es cuando comprobamos si la cabeza está fuera de límites, y la segunda es cuando la serpiente se golpea a sí misma:

Este es el código que tenemos ahora:


Paso 11: La Función directionChanged()

Queremos escuchar el teclado para poder controlar a la serpiente. Para esto, necesitamos poner algo de código en la función init() y la función gameOver().

Pon esto al final de la función init() (configurando la función de escucha):

Y esto al final de la función gameOver():

Ahora crea una nueva función:

¿Qué entra en el bloque if?

  • La dirección de la cabeza debe reescribirse.
  • El objeto marker debe configurarse correctamente.
  • La variable last_button debe establecerse en el último botón presionado.

Repite esto tres veces más, y tendremos esto:

Necesitamos una cosa más para probarlo. En la función moveIt() tenemos algo como esto:

Aquí necesitamos otro ciclo for, para verificar la parte de cada serpiente con cada marcador en el escenario y verificar si chocan. Si lo hacen, debemos establecer la dirección de la parte de la serpiente según el tipo de marcador. Si es la última parte de la serpiente que choca con el marcador, también debemos quitar el marcador del vector markers_vector, para que las partes de la serpiente no choquen más con él.

Ahora, si juegas con él, se ve bien, pero hay un error allí. ¿Recuerdas lo que dije al principio del tutorial?

Por ejemplo, si la serpiente va hacia la derecha y presionas el combo abajo-izquierda muy rápido, se golpeará a sí misma y reiniciará el juego.

¿Cómo corregimos esto? Bueno, es fácil. Tenemos nuestra variable de flag y la usaremos para esto. Solo podremos cambiar las direcciones de la serpiente cuando se establezca en verdadero (el valor predeterminado es falso, verifica la función init() para eso).

Entonces necesitamos cambiar un poco la función directionChanged(). Las cabezas de los bloques if deben cambiarse: agrega una cláusula de && flag al final de cada 'if'.

Si lo pruebas ahora, no funcionará porque la bandera siempre es falsa.

Entonces, ¿Cuándo debemos configurarlo como verdadero?

Después de un movimiento/marca, podemos permitir que los usuarios cambien de dirección, pero no queremos cambiarlo dos veces en una marca. Así que pon esto al final de la función moveIt():

Ahora pruébalo y ya no habrá ningún error.


Paso 12: Finalización del Juego

Ahora lo único que tenemos que hacer es el 'apple-check'

¿Recuerdas esto al principio de la función moveIt()?

Esto es lo que debemos hacer allí:

  • Llama la función placeApple(). (No establecemos el parámetro en falso; lo dejamos como está. El valor predeterminado es verdadero).
  • Mostrar la puntuación actual
  • Adjunta un nuevo elemento a la última parte de la serpiente.

Ahora todo debería funcionar bien. Pruébalo:

Aquí está toda la clase principal nuevamente:


Paso 13: Resumiendo Todo

¡Felicidades! Acabas de crear un buen juego. Ahora puedes desarrollarlo más y crear una súper manzana o algo así. Para eso recomiendo usar otra función llamada placeSuperApple() y una nueva clase llamada SuperApple. Siempre que atrapes una súper manzana, las partes de las serpientes podrían alargarse en tres elementos, tal vez. Esto podría establecerse con setters/getters en la clase SuperApple.

Si deseas hacer esto y te quedas atascado en algún lugar, déjame un comentario aquí.

¡Gracias por tu tiempo!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.