Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
El videojuego original del Pong fue creado en 1972 por la empresa Atari, pionera en la industria del videojuego. Su creador fue el ingeniero Al Alcorn.
¿Cómo se juega?
En este videojuego dos jugadores se enfrentan en una cancha virtual. Cada jugador controla una pala ubicada en los extremos de la pantalla. En el videojuego que vamos a desarrollar estas palas han sido sustituidas por manos. Una pelota rebotará al colisionar contra las palas y los bordes de la cancha. Tenemos que intentar que el rival no llegue a tiempo a golpear la pelota y esta se pierda por su lado de la pantalla.
Pasos en la realización del juego Pong con PhaserJS
Primeros pasos
Lo primero que haremos será cargar la imagen de fondo y cargar el spritesheet de la pelota brillando. Ambas cosas (cargar una imagen y cargar un spritesheet) las hemos realizado en ejercicios anteriores.
La pelota gira
Vamos a hacer que la pelota, ademas de brillar utilizando el spritesheet del paso anterior, de vueltas. Para ello, utilizaremos el siguiente código (teniendo en cuenta que this.ball sería el objeto correspondiente a la pelota que añadimos en el centro de la pantalla en el paso anterior.)
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
La pelota se mueve
Para que la pelota se mueva, debe tener físicas. Para lograrlo, las debemos activar en el main.js.
Vamos a definir una función llamada placeBall que colocará la pelota en pantalla, le dará un ángulo inicial en el que comenzará a moverse y una velocidad en la coordenada x e y que estará en función de dicho ángulo y de una velocidad inicial. Para hacer esto, necesitaremos un poco de trigonometría. Conociendo el ángulo en el que se moverá la pelota y la velocidad en la que lo hará podemos obtener los valores de la velocidad que aplicaremos en los ejes x e y.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Rebote contra las paredes
Para que la pelota pueda rebotar sobre objetos llamaremos al método setBounce. Cuanto mayor sea el parámetro de entrada de este método, mayor será la capacidad de rebote. Además, para que la pelota pueda rebotar contra los límites de la pantalla estableceremos el colliderWorldBound a true.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Poner un jugador
El Pongo tendrá dos jugadores representados por el sprite de una mano. Precargaremos la imagen de la mano en la escena Boot.js y la colocaremos en pantalla utilizando físicas, para que la pelota pueda rebotar al colisionar contra ella.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Mover al jugador con el teclado
El objeto this.cursors nos pemitirá evaluar que teclas del teclado va pulsando el jugador. Si pulsa la tecla de ir hacia arriba, desplazaremos la mano 5 unidades hacia arriba y viceversa.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Controles visuales
Vamos a definir una función llamada visualControls que vincularemos al jugador y que colocará dos botones en pantalla que el jugador podrá pulsar para mover al jugador. Esto permiriá que el jugador pueda jugar utilizando una pantalla tactil como la del móvil, además de utilizando el teclado del ordenador.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Funcionalidad de los controles visuales
Los botones que colocamos en el paso anterior no hacen nada. En este paso vamos a añadirles la capacidad de desplazar al jugador. Para ello, vincularemos al objeto player una propiedad llamada verticalDirection utilizando el método setData.
Luego, completaremos el método update para comprobar tanto si el jugador ha pulsado los botones de dirección como el valor de la propiedad Data que hemos seteado, para decidir si debemos desplazar al jugador hacia arriba o hacia abajo.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Colisión con el player
Para que pueda existir colisión entre la pelota y el jugador debemos especificar el siguiente collider.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Ladrillo inamovible
El el paso anterior establecimos la colisión entre la mano y la pelota. Sin embargo, cuando esta se produce, la mano sale desplazada. Estableciendo el cuerpo de la mano como immovable podemos hacer que en caso de colisión la mano no salga despedida.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Dos jugadores
Utilizando un código similar al que utilizamos para el jugador 1, vamos a añadir un segundo jugador, y los controles correspondientes para gestionarlo. Este segundo jugador será controlado con las teclas ASDW.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Problema controles táctiles para varios jugadores
Por defecto Phaser solo detecta la pulsación sobre la pantalla de un único dedo. Esto quiere decir que si el usuario pulsa sobre la pantalla con varios dedos a la vez, solo la primera pulsación será detectada. Afortunadamente, añadir puntos de detección sobre la pantalla es muy fácil.
Debemos añadir al principio del método create la siguiente línea.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
La añadiremos tantas veces como puntos de detección queramos. Como ya tenemos un punto de detección sobre la pantalla, si la añadimos una vez, realmente ahora tendríamos dos puntos de detección. En este juego he decidido que quería cuatro puntos de detección, así que he añadido la línea tres veces:
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Perder
Vamos a desactivar la colisión de la escena por la parte izquierda y derecha. De esta forma, si la pelota colisiona contra los laterales, en lugar de rebotar, seguirá avanzando.
También vamos a evaluar si la pelota se pierde por el lado izquierdo (this.ball.x < 0) o derecho (this.ball.x > gameWidth) de la pantalla. Si esto ocurriese, mostraríamos un mensaje de alerta informando que el jugador ha perdido.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Escena de fin de juego
En lugar de mostrar un mensaje de alerta cuando un jugador pierda, mostraremos la escena de fin de juego.
Poner marcador
En lugar de que los jugadores pierdan cuando la pelota se pierda por su lado de la pantalla, vamos a añadir un marcador de puntos que contabilice cuantas veces ha ocurrido eso.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Aumentar el marcador
Ahora que tenemos un marcador, vamos a modificarlo para incrementarlo.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Ajustar areas de colisión
Queremos que la pelota se introduzca ligeramente en la mano en el momento de la colisión. Para ello, modificaremos su caja de colisión.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Limitar el rango de movimiento de las manos
Con esta acción haremos que la mano que representa a cada jugador no pueda salir de los límites de la pantalla.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.