Recuerda los 80's? Haga un juego de tenis con muy pocas líneas

Quizás algunos de ustedes aun no nacían, pero en los ochenta el juego de la pelotita nos volvió locos. (Después, uno de los primeros virus para PCs, era una pelotita en nuestras pantallas ASCII, también nos volvía locos). En fin, ahora es facilísimo hacer un juego similar con muy pocas líneas gracias a los ActionScripts, el mejor invento después del Playboy Channel.

 

Para ello necesitamos conocer el comando “onClipEvent”, ya que con pequeñas variaciones, este comando nos permitirá hacer juegos de disparos o de evasión de objetos. Empecemos con un simple movimiento horizontal. Cree una pelotita pequeña en la escena vacía. Selecciónela con el cursor y pulse la tecla F8 para hacer un símbolo nuevo. Llámelo “Pelotita” (o como usted desee). Sin dejar de seleccionarla, pulse CTRL+I, y nombre la instancia como “pelota”.

 

Este es un punto crítico. Tenemos dos opciones: 1) cargar de código los objetos o 2) poner todo el código en unos cuantos objetos. Después de tres o cuatro símbolos, cinco escenas y varios “capas” con código, casi cualquiera se vuelve loco (a excepción de los que ya están locos). Yo prefiero crear un solo objeto en el escenario y ahí cargarlo con todo el código.

 

Así que escriba la leyenda “ActionScripts” en el escenario y hágalos un MovieClip (MC) con la tecla de función F8. Abra el editor de actionScripts y en modo experto teclee el siguiente código:

 

onClipEvent(load){

_root.attachMovie("Pelotita","pelota",1);

_root["pelota"]._x = 100;

_root["pelota"]._y = 100;

dx = 5;

dy = 0;

}

 

onClipEvent(enterFrame){

_root.pelota._x += dx;

_root.pelota._y += dy;   

}

 

Ejecute la película. Con tan poco código, usted hace que la pelotita  se mueva de izquierda a derecha de la pantalla. La función “onClipEven(enterFrame)” es evaluada dependiendo de la velocidad de su película, es decir, si tiene una velocidad de 12 cuadros por segundo, la función es evaluada 12 veces cada segundo. Esto hace que la pelotita se mueve en forma horizontal hasta desaparecer de la pantalla.  Esto es bastante bonito (¿se imagina hacerlo en C?), pero poco útil. Modifique la variable “dy” a 5 y “dx” a cero. El movimiento ahora es vertical!

 

Hagamos que la pelotita bote de izquierda a derecha, y viceversa. Solo necesitamos dos condicionantes “ifs” y multiplicar la variable de dirección (dx) por menos uno, es decir, en lugar de sumar, restaremos 5 a la posición. (Nota: de preferencia meta las coordenadas máxima y mínima en variables).

 

onClipEvent(load){

   _root.attachMovie("Pelotita","pelota",1);

   _root["pelota"]._x = 100;

   _root["pelota"]._y = 100;

   dx = 5;

   dy = 0;

}

 

onClipEvent(enterFrame){

   if(_root.pelota._x>400) dx *= -1;

   if(_root.pelota._x<100) dx *= -1;

_root.pelota._x += dx;

   _root.pelota._y += dy;   

}

 

Por pura curiosidad, cambie la relación de variables (incremente “dy” y deje en cero las “dx”) y obtendrá un movimiento vertical. Incluya también las otras condiciones, para tener una función parecida a la siguiente:

 

onClipEvent(load){

   _root.attachMovie("Pelotita","pelota",1);

   _root["pelota"]._x = 100;

   _root["pelota"]._y = 100;

   dx = 5;

   dy = 0;

}

 

onClipEvent(enterFrame){

   if(_root.pelota._x>300) dx *= -1;

   if(_root.pelota._x<100) dx *= -1;

   if(_root.pelota._y>50)   dy *= -1;

   if(_root.pelota._y<300) dy *= -1;

   _root.pelota._x += dx;

   _root.pelota._y += dy;

}

 

Para tener un juego de tenis necesitamos los movimientos diagonales de la pelota: para ello es necesario que ambas variables de dirección tengan valor, por ejemplo el número cinco, y listo, tenemos una pelota que rebota en la pantalla, sin embargo, para tener un verdadero juego de tenis hace falta dos cosas:

 

1)      Dos raquetas que se muevan y que golpeen a la pelotita, y

2)      Detectar cuando la pelota se pasa y NO es golpeada por ninguna de las raquetas.

 

Así que abordaremos ambos temas mas adelante:

 

1)      Una raqueta: Haga un rectángulo delgado (no muy largo, ni muy ancho).  Ubique la raqueta en la posición 100, 100 dentro del escenario y nombre la instancia como “raqueta”. Lo siguiente es incluir una instrucción en nuestra rutina “motor”:   “_root.raqueta._y = _ymouse;” Con esto hacemos que la raqueta suba y baje con el movimiento del ratón, pero nuestra raqueta aun no “golpea” a la pelota.

 

2)      Golpeando a la pelotita: Para ello podríamos utilizar a nuestra socorrida función “hitTest”.

 

if (_root.raqueta.hitTest(_root.pelota._x, _root.pelota._y)){

            dy *= -1;
}

 

Si ejecuta la película, podrá observar que la pelota tiene un comportamiento un tanto “extraño”, ya que la función hitTest evalúa los “centros” de los objetos. Para resolver este problema puede haber muchas maneras de hacerlo: una es mover el dibujo de los MovieClips de la raqueta y de la pelota a la derecha e izquierda de sus centros, pero los movimientos se ven poco naturales. Otra forma es mejor evaluar los “anchos” de los objetos y “ajustar” el golpe.

 

Necesitamos dos variables de trabajo, algo así como “x” e “y” para almacenar la coordenada de la bolita, y otras dos variables para los medios anchos:

 

anchoPelota = (_root.pelota._width/2);

anchoRaqueta = (_root.raqueta._width/2)

x = _root.pelota._x;

y = _root.pelota._y;



 

Ahora ya sabemos las “fronteras” de ambos objetos. Ya no necesitamos a nuestra vieja amiga “hitTest”, aunque aumentamos un poco la complejidad. Ahora sabemos que la línea del centro de la raqueta, mas la mitad de la raqueta, mas la mitad de la pelotita, es la distancia en la que tiene que rebotar la pelota, es decir:
 
 
<![endif]>
 
if (_root.pelota._x<=100+anchoPelota+anchoRaqueta){

            dx *= -1;

}

 

El siguiente paso es cambiar las coordenadas por variables. El lugar adecuado es en la función “onClipEvent”

 

onClipEvent(load){

_root.attachMovie("Pelotita","pelota",1);

_root["pelota"]._x = 150;

_root["pelota"]._y = 100;

dx = 5;

dy = 5;

            anchoPelota = (_root.pelota._width/2);

            anchoRaqueta = (_root.raqueta._width/2);

            pared_izquierda = 30;

            pared_derecha = 520;

            pared_arriba = 5;

            pared_abajo = 390;

            Mouse.hide()

}

 

Estas variables también pueden ser declaradas en la línea de tiempo principal, pero tendría que accesarlas con el prefijo “_root.”

 
Juegue un poco con lo que llevamos de película, y es una especie de frontón, donde todo lo que enviamos nos lo regresa. El próximo paso es crear el contrincante manejado por la computadora. Hasta el momento solo tenemos una pelotita rebotando en una pared. El primer paso es crear una segunda raqueta. Simplemente copiamos la primera raqueta y la colocamos a la derecha de la pantalla. Un punto importante es cambiar el nombre de la instancia. En este caso yo use “raqueta2”.

 
El siguiente paso verificar si la pelota fue golpeada o no por la raqueta. Para ello necesitamos añadir el código correspondiente en la función “onClipEvent(enterFrame)”:

 

if (_root.pelota._x>=pared_derecha-anchoPelota-anchoRaqueta){

            raqueta_arriba = _root.raqueta2._y - (_root.raqueta2._height/2);

            raqueta_abajo = _root.raqueta2._y + (_root.raqueta2._height/2);

            y = _root.pelota._y;

            if((y>raqueta_arriba) and (y<raqueta_abajo)){

                        dx *= -1;

            } else {

                        dx = 0;

                        dy = 0;

            }

            //Aurmenta la velocidad

            dx *= 1.05;

            dy *= 1.05;

}

 

Como puede observar, por encontrarse la raqueta2 a la derecha, restamos el ancho de la pelota y de la raqueta, y a la izquierda las sumamos. Pero esto solo le indica a la pelota donde rebota, y no sabemos si esta fue golpeada o no por la paleta. Un truco para detectarlo, es identificar si la coordenada “y”, es decir, la que mide la altura de MC, coincide con la longitud de la raqueta. En  números esto significa:

 

raqueta_abajo = _root.raqueta2._y - (_root.raqueta2._height/2);

raqueta_arriba = _root.raqueta2._y + (_root.raqueta2._height/2);

y = _root.pelota._y;

if((y>raqueta_abajo) and (y<raqueta_arriba)){

            ……

}

 

Para esto utilizamos “_height”, que nos proporciona la longitud del MC. Se divide entre dos, ya que la opción “._y” nos proporciona el centro del movieClip. Si el centro de la pelota se encuentra en este rango, significa que la pelota fue golpeada por la raqueta de la computadora. En este caso, cambiamos la dirección de las x (con el signo contrario), de lo contrario detenemos la pelota y el juego termina. En este punto es donde se puede trabajar mas: incrementar un contador, lanzar alguna animación o algún letrero para volver a repetir el juego. Note que si la pelota es golpeada por la raqueta de la computadora, las velocidades se incrementan en 1.05. Obviamente usted puede variar esta constante a su gusto (pero siempre varíe las dos velocidades, de lo contrario la pelota se moverá en ángulos raros.

 

Bien, ¿pero como se mueve la arqueta de la computadora? Pues haciendo un poco de trampa, copiamos simplemente la coordenada “y” de la pelota. Esto es bastante fácil con un par de variables:

 

            coordenada_y =  _root.pelota._y;

            _root.raqueta2._y = coordenada_y;

 

(Si usted era de los que sospechaba que la computadora le hacia trampa al jugar, pues ahora puede estar seguro).

 

Por ultimo queda verificar si la raqueta del jugador golpeo o no a la pelota. Para ello utilizamos una rutina muy similar a la anterior:

 

if (_root.pelota._x<=pared_izquierda+anchoPelota+anchoRaqueta){

            raqueta_arriba = _root.raqueta._y - (_root.raqueta._height/2);

            raqueta_abajo = _root.raqueta._y + (_root.raqueta._height/2);

            y = _root.pelota._y;

            if((y>raqueta_arriba) and (y<raqueta_abajo)){

                        dx *= -1;

            } else {

                        dx = 0;

                        dy = 0;

            }

}

 

Y listo, ya tenemos un juego de tenis. Puede observar que realmente utilizamos muy poco código. Claro que aun le puede aumentar muchas cosas, como que el juego se repita cada vez que una de las partes pierda. También puede incluir un marcador con un par de variables o animaciones y sonidos para darle mayor vida al juego.

 

Flasheros del mundo ¡unios!