Share
En este tutorial, aprenderás cómo crear tu propia versión del clásico juego Whack-a-Mole; solo, nuestras desafortunadas criaturas elegidas serán los gusanos. Podrás modificar la velocidad del juego y las casillas de éxito de los gusanos..
Usaremos clases comunes de ActionScript 3, especialmente Eventos del ratón para crear un entretenimiento Aplasta un topo como juego en flash
Abra Flash y cree un documento de 480 píxeles de ancho y 320 píxeles de alto. Establecer la velocidad de fotogramas a 24 fps.
(Nota: hay un error en la imagen de arriba, ¡el ancho y la altura son al revés! Gracias a Roel Traa por señalar esto).
Se utilizará una interfaz sencilla y amigable, con varias formas, botones y clips de película, continúe con los siguientes pasos para crear esta GUI.
Selecciona el Herramienta rectangular (R) para crear un rectángulo de 320x480px # CC9866, # BA7743 y centrarlo en el escenario.
Utilizar el Herramienta de texto (T) para agregar un título usando tu fuente favorita. También puedes usar algunos de los gráficos del juego para hacerlo mejor. El gráfico del gusano utilizado en este tutorial se descargó desde aquí bajo un Creative Commons Licencia.
Utilizar de nuevo el Herramienta de texto para crear tres botones como se muestra en la imagen de arriba. Conviértalos en botones y déles nombres de instancia descriptivos para usarlos fácilmente más adelante en el código. Convertir los gráficos en etapa a una sola. Clip de película y nombrarlo TitleView, recuerde revisar el Exportar para el cuadro de ActionScript.
Borre la última vista excepto el fondo y cree una serie de Campos de texto dinámicos como se muestra en la imagen, déles nombres de instancia descriptivos y conviértalos en botones. Utilizar el Herramienta rectangular (R) para crear un botón de flecha que se utilizará para volver al Pantalla de título.
los Creditos pantalla aparecerá delante de la Título Pantalla, utilice los gráficos y las fuentes utilizadas antes para crearla. Nombralo Creditosvista y recuerde revisar el Exportar para ActionScript caja.
Gráficos de dibujos animados simples se utilizan en el Juego Pantalla, no hay realmente un procedimiento para crear estos gráficos, solo usa tu imaginación y las herramientas de dibujo de Flash para crear algo como la imagen de arriba. Cada hoyo en la pantalla del juego es un Clip de película que contiene una animación del gusano que sale, es básicamente una animación fotograma a fotograma, asegúrese de verificar la fuente para una mejor comprensión.
Se mostrará una alerta cuando todos los gusanos hayan mostrado, se mostrará la puntuación final que alcanzó. Utilizar el Herramienta rectangular para crearlo y agregar un nombre descriptivo al campo de texto inferior, establezca su nombre de instancia en AlertView y marca el Exportar para ActionScript caja.
Usaremos un motor de interpolación diferente del predeterminado incluido en flash, esto aumentará el rendimiento y será más fácil de usar..
Puedes descargar TweenNano desde su sitio web oficial..
Usaremos los efectos de sonido para mejorar la sensación del juego, puede encontrar el sonido utilizado en este ejemplo en Soungle.com usando la palabra clave golpear.
Haremos que nuestra aplicación sea interactiva utilizando una clase externa, agregaremos su nombre a la Clase campo en el Publicar sección de la Propiedades Panel para asociar la FLA con la clase de documento principal..
Cree una nueva clase de ActionScript 3.0 (Cmd + N) y guárdela como Main.as en la carpeta de tu clase.
Crea tu estructura de clase básica para comenzar a escribir tu código.
paquete import flash.display.Sprite; clase pública Main extiende Sprite función pública Main (): void // código constructor
Estas son las clases que necesitaremos importar para que nuestra clase funcione, la importar La directiva hace que las clases y los paquetes definidos externamente estén disponibles para su código..
importar flash.display.Sprite; importar flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.MouseEvent; importar flash.net.navigateToURL; importar flash.net.URLRequest; import com.greensock.TweenNano; import com.greensock.easing.Expo;
Estas son las variables que usaremos, lea los comentarios en el código para saber más sobre ellos, algunos de sus nombres se explican por sí mismos, por lo que no habrá comentarios allí..
private var titleView: TitleView = new TitleView (); opciones de var privado: OptionsView; Créditos var privados: CreditsView; privado var lastSelected: TextField; // la última velocidad seleccionada en la pantalla de opciones private var lastSelected2: TextField; // el último área de hit seleccionada en la pantalla de opciones private var hitSize: Number = 1; // la máscara de tamaño de golpe está a escala completa al inicio privado var timer: Timer = new Timer (1400); // tiempo predeterminado para que aparezcan los gusanos privados var holes: Vector.= nuevo vector. (); // almacena los 8 agujeros en el escenario privado var currentWorms: int = 0; // gusanos que ya se muestran privados var wormsHit: int = 0; private var totalWorms: String = '10'; // total de gusanos para mostrar
El constructor es una función que se ejecuta cuando un objeto se crea a partir de una clase, este código es el primero en ejecutarse cuando se crea una instancia de un objeto o se ejecuta utilizando la clase DocumentDe.
Llama a las funciones necesarias para iniciar el juego. Comprueba esas funciones en los siguientes pasos..
función final pública Main (): void addChild (titleView); holes.push (h1, h2, h3, h4, h5, h6, h7, h8); startButtonListeners ();
Comenzaremos agregando los escuchas del mouse a los botones en la vista de título, esto nos llevará a la pantalla de juegos, opciones o créditos..
función final privada startButtonListeners (acción: String = 'add'): void if (action == 'add') titleView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.optionsB.addEventListener (MouseEvent.MOUSE_UP, addOptions); titleView.playB.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsB.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.optionsB.removeEventListener (MouseEvent.MOUSE_UP, addOptions); titleView.playB.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
los Opciones La pantalla se interpola cuando el usuario hace clic en el botón de opciones, se agrega un detector de ratón al botón de flecha para eliminarlo cuando termina.
función final privada addOptions (e: MouseEvent): void options = new OptionsView (); addChild (opciones); TweenNano.from (options, 0.3, x: stage.stageWidth, onComplete: function (): void options.backBtn.addEventListener (MouseEvent.MOUSE_UP, hideOptions);); optionsListeners ();
Estos oyentes se añaden cuando el Opciones En la pantalla que se muestra, manejan los botones en el escenario. Más de su comportamiento en los próximos pasos..
función final privada optionsListeners (action: String = 'add'): void if (action == 'add') options.slowBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.mediumBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.fastBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.smallBtn.addEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.mediumBtn1.addEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.bigBtn.addEventListener (MouseEvent.MOUSE_UP, selectHitArea);
Las opciones predeterminadas están establecidas por estas líneas, establecen los botones seleccionados actualmente que son lentos y grandes.
lastSelected = options.slowBtn.slowTF; lastSelected2 = options.bigBtn.bigTF;
Un parámetro determinará si los escuchas se agregan o eliminan, las siguientes líneas se ejecutan si ese parámetro no indica agregar los escuchas.
else options.slowBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.mediumBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.fastBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.smallBtn.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.mediumBtn1.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.bigBtn.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea);
El botón de flecha eliminará el Opciones pantalla cuando se hace clic.
función final privada hideOptions (e: MouseEvent): void TweenNano.to (options, 0.3, x: stage.stageWidth, onComplete: function (): void options.removeEventListener (MouseEvent.MOUSE_UP, hideOptions); removeChild (opciones) ; opciones = nulo;);
Esta función se ejecuta cuando se presionan los botones de velocidad, su primera parte cambia el color del texto de los botones, cambia la opción actual a blanco y el nuevo valor seleccionado a amarillo.
función final privada changeSpeed (e: MouseEvent): void / * Change Target y el último color seleccionado * / lastSelected.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966;
Esta es la segunda parte de la función de velocidad, detecta el botón que se hace clic para verificar su nombre y aumenta / disminuye la Minutero en consecuencia.
if (e.target.name == 'slowTF') timer = new Timer (1400); lastSelected = e.target como TextField; else if (e.target.name == 'mediumTF') timer = new Timer (1100); lastSelected = e.target como TextField; else if (e.target.name == 'fastTF') timer = new Timer (800); lastSelected = e.target como TextField;
La siguiente función se ejecuta cuando se hace clic en un botón en la selección del área de acceso. Se comporta de la misma manera que la última función..
función final privada selectHitArea (e: MouseEvent): void / * Cambiar objetivo y último color seleccionado * / lastSelected2.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966; / * Detectar el botón pulsado y cambiar el área de golpe en consecuencia * / if (e.target.name == 'smallTF') hitSize = 0; lastSelected2 = e.target como TextField; else if (e.target.name == 'mediumTF') hitSize = 0.5; lastSelected2 = e.target como TextField; else if (e.target.name == 'bigTF') hitSize = 1; lastSelected2 = e.target como TextField;
los Creditos La pantalla se muestra cuando el usuario hace clic en el botón de créditos, se agrega un detector de mouse a la pantalla completa. Clip de película para eliminarlo.
función final privada showCredits (e: MouseEvent): void titleView.optionsB.visible = false; titleView.creditsB.visible = false; titleView.playB.visible = false; créditos = nuevo CreditsView (); addChild (créditos); TweenNano.from (credits, 0.3, x: -credits.width, onComplete: function (): void credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Cuando el Creditos Se hace clic en la pantalla, se interpone y se elimina del escenario..
función final privada hideCredits (e: MouseEvent): void TweenNano.to (credits, 0.3, x: -credits.width, onComplete: function (): void titleView.creditsB.visible = true; titleView.playB.visible = true; titleView.optionsB.visible = true; credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credits); credits = null;);
Paremos aquí para hacer una prueba rápida y asegurarnos de que nuestro código de juego funciona:
Tenga en cuenta que algunas líneas se han comentado ya que algunas funciones aún no se han creado..
Recuerde que los hitos están incluidos en los archivos de origen, por lo que si por alguna razón su archivo no imita este, eche un vistazo a la fuente para ver qué puede estar causando que.
Las siguientes líneas eliminan el Título pantalla y deja el Juego Pantalla visible. También llama a una función para preparar el juego a jugar..
Accentsconagua
función final privada showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = nulo;); prepareWorms (); Aquí usamos una declaración for para agregar un Ratonero a cada hoyo Clip de película en el escenario Esto hará que los gusanos se puedan hacer clic.
función final privada prepareWorms (): void for (var i: int = 0; i < 8; i++) /* Add Mouse Listeners */ holes[i].addEventListener(MouseEvent.MOUSE_DOWN, wormHit);
Como el agujero Clip de película tiene más de un cuadro, debe detenerse para evitar que todos los gusanos se muestren al mismo tiempo.
/ * Stop Worms at Frame 1 * / holes [i] .gotoAndStop (1); startTimer ();
Este temporizador iniciará la cuenta atrás y hará que los gusanos aparezcan aleatoriamente en el escenario..
función final privada startTimer (): void timer.addEventListener (TimerEvent.TIMER, showWorm); timer.start ();
Este código verifica si los gusanos mostrados aún no han superado el límite y llama a un Alerta si es verdad.
función final privada showWorm (e: TimerEvent): void if (currentWorms == int (totalWorms)) alert (); else var randomHole: int = Math.floor (Math.random () * 8); // Se usa para calcular que gusano aparecerá
El área de golpe seleccionada en el Opciones La pantalla se cambiará aquí en cada gusano usando las propiedades de escala de AS3.
holes [randomHole] .addFrameScript (1, function () holes [randomHole] .worm.hArea.scaleX = hitSize; holes [randomHole] .worm.hArea.scaleY = hitSize;);
Pasarán unos pocos milisegundos donde el Gusano será visible, cuando el Clip de Película haya alcanzado su último fotograma, se detendrá y volverá al primer fotograma..
holes [randomHole] .addFrameScript (holes [randomHole] .totalFrames - 1, function () holes [randomHole] .gotoAndStop (1);); agujeros [randomHole] .play (); currentWorms ++;
Esta función se maneja cuando se hace clic en un gusano, básicamente reproduce un sonido, aumenta la puntuación y oculta el gusano nuevamente.
función final privada wormHit (e: MouseEvent): void if (e.target.name == 'hArea' || e.target.name == 'worm') var hit: Hit = new Hit (); hit.play (); gusanosHit ++; e.target.parent.gotoAndPlay (18); scoreTF.text = wormsHit + '/' + totalWorms;
Puedes agregar una bonificación personalizada si todos los gusanos fueron afectados cambiando las siguientes líneas de código.
if (totalWorms == String (wormsHit)) alert ();
Esta función detendrá el juego y revelará la puntuación final, también agrega un detector de ratón para restablecer el juego cuando se hace clic.
alerta de la función final privada (): void timer.stop (); alerta de var: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = scoreTF.text; alert.addEventListener (MouseEvent.MOUSE_UP, reinicio); addChild (alerta); TweenNano.from (alerta, 0.6, scaleX: 0.2, scaleY: 0.2, facilidad: Expo.easeOut);
La siguiente función recargará el swf, reiniciando cualquier variable, método y regresando al Pantalla de título.
reinicio privado de la función final (e: MouseEvent): void navigationToURL (nueva URLRequest (stage.loaderInfo.url), '_level0');
Como puede ver, muchas de las variables / parámetros del juego pueden modificarse y adaptarse a sus necesidades. Intenta crear tu propia versión del juego.!
Espero que te haya gustado este tutorial, gracias por leer.!
