Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
El siguiente juego que haremos consiste en seleccionar en un tiempo limitado la imagen que es igual a la imagen que aparece en grande en la parte superior de la escena. Al acertar la imagen, se mostrará otra diferente e incrementaremos un marcador de puntos. Si fallamos, iremos a la escena de partida perdida.
Pasos en la resolución del juego de acierta imagen con PhaserJS
Carga fondo
En la escena principal del juego, Game.js, cargamos la imagen de fondo que habremos precargado previamente en el Boot.js.
create() {
this.add.image(0, 0, "back").setOrigin(0, 0);
}Carga caras
A continuación cargamos las caras que se verán en cada uno de los televisores que aparecen en la fila inferior.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Cara pulsada
Queremos que las caras de los televisores reaccionen a nuestra pulsación sobre ella. Por tanto, hacemos cada cara susceptible de ser pulsada (utilizando setInteractive), y les añadimos el evento pointerdown, que llamará a la función clickedFace que mostrará un mensaje de alerta indicando que imagen hemos pulsado.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Caras aleatorias
En la fila inferior no siempre aparecerán las mismas imágenes. Para aleatorizarlas he desordenado un array con tantos números como imágenes hay disponibles. Desordeno el array y utilizo los tres primeros números (que ahora serán aleatorios), para concatenarlos con el nombre del sprite que queremos cargar.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Imagen solución random
La imagen del televisor superior también debe ser aleatoria. El siguiente código utiliza una de las imágenes obtenidas en el paso anterior para pasársela al televisor superior.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Evalúa solución
Al pulsar en una de las caras de la fila inferior debemos evaluar si la cara pulsada coincide con la cara que se muestra en el televisor superior de la pantalla. Si coinciden, mostraremos el texto éxito y si no fracaso.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Marcador
Para cargar una tipografía externa en nuestro proyecto:
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Para hacer el marcador, podemos crear dos objetos. Uno que será el texto que mostraremos por pantalla (this.scoreTXT) y otro que será una variable que se incrementará cuando el usuario acierte(this.score).
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
El siguiente código establece el nuevo marcador cada vez que el usuario acierta
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
También es interesante que creemos un nuevo objeto de texto para mostrar la palabra pts (puntos) al lado del objeto del marcador de puntos.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Temporizador
El jugador tendrá un tiempo limitado para seleccionar la solución correcta. Controlaremos este tiempo con la variable this.timing. Esta variable irá decrementándose a cada segundo. Para ello, llamaremos a la función timer() utilizando this.time.delayedCall. Esta función recibe como parámetro de entrada el margen de tiempo (1000 milisegundos en nuestro caso) con el que iremos llamando a la función this.timer.
Además de modificar la variable this.timing, la función timer(), va a utilizar el nuevo valor de de this.timing para actualizar el monitor de tiempo que tenemos en pantalla (this.timeTXT). Cuando el tiempo se agote (this.timming === 0), mostraremos un mensaje de alerta.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Si acertamos la imagen, vamos a resetear el tiempo para que vuelva a comenzar en 10 segundos.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Escena de perder
En el caso de que el tiempo se agote o que el jugador seleccione una opción incorrecta, cargaremos la escena de partida perdida.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.