Saltar al contenido →

Diario Breakout – Parte 2

Esta es la segunda parte de una serie de artículos en la que explico cómo desarrollo el juego clon de Breakout. En esta segunda parte, explicaré cómo crear la pala, registrar los movimientos del usuario e implementar las colisiones entre pala-paredes y pala-bola.

La clase Paddle

En la primera parte, he creado el html base y la bola. De la misma forma que creé la bola, voy a crear un archivo con una clase Paddle. En esta clase pondré los métodos y propiedades que tendrá mi pala. Primero, empezaré por definir el constructor y el método «draw» para dibujar la pala.

En el constructor, hago una llamada al método «initEvents». Este método se encarga de inicializar la captura de eventos detectados en el teclado. Cuando el usuario pulsa una tecla y suelta una tecla se lanzará un evento. Asocié el cambio de estado de las propiedades «move_left» «move_right» al pulsar las teclas izquierda y derecha. Además hago una llamada al método «update» para actualizar la dirección y la posición de la pala. Cuando el usuario suelta la tecla, vuelvo a actualizar las propiedades para detener el movimiento de la pala. Para este método, he creado un nuevo archivo llamado «utils.js» en el que voy a guardar funciones útiles que pueda necesitar a lo largo del desarrollo. Podéis echar un vistazo al capítulo 4, página 75 del libro Javascript Patterns si queréis entender qué significa ese código.

El método «draw» se encarga de dibujar la pala. El método «update» se encarga de actualizar la dirección en la que se moverá la pala según el valor contenido en las propiedades «move_left» «move_right» además de la posición de la misma. El método «checkCollisions» se encarga de comprobar si la pala colisiona con las paredes laterales para evitar que salga del campo de visión del usuario.

Una vez que tengo lista la clase Paddle, necesito hacer algunos cambios en el archivo «game.js» y el html.

Cambios en game.js

En la primera parte, había hablado de gestionar las acciones de los usuarios en el bucle del juego. Esto no es necesario hacerlo a parte ya que lo gestiono directamente desde el método update de la pala. Creo la pala y hago las llamadas a los métodos «draw», «update» y «checkCollisions».

En el html, sólo debo incluir los dos nuevos scripts de javascript que he creado: utils.js y paddle.js.

Colisión entre la pala y la bola

Esto es lo último que me queda para terminar esta segunda parte. Este código debe estar en la clase bola ya que es la que va a sufrir un cambio de dirección. La pala no se va a ver afectada por chocar con la bola. Por lo tanto, voy a implementar esto en la clase bola en el método «checkCollisions». Voy a pasar como argumento la pala para poder calcular la colisión.

Para calcular la colisión con la pala, debo realizar las siguientes comprobaciones:

  • El punto más bajo de la bola debe de estar a la misma altura que la pala. Es decir la coordenada y del punto más bajo de la bola, debe de ser mayor o igual que la coordenada y de la pala y menor o igual que la coordenada y sumado al alto de la pala. Si no fuera así, la bola rebotaría a cualquier altura, sólo estando en una coordenada x  contenida en la pala.
  • Para saber si la bola está tocando la pala, debemos comprobar si cualquier punto de la bola está contenido en el rango de coordenadas x de la pala de un extremo a otro.

Este es el código de «checkCollisions» de la clase Ball:

Para que esto funcione, debo pasar como argumento la pala en la llamada al método «checkCollisions» desde game.js.

¡Listo! Ahora nuestra pala hace que la bola rebote.

Aquí os dejo la demostración del juego en esta segunda parte: VER DEMO

Algunas de las fuentes que he utilizado:

 

Este artículo forma parte de una serie:
  1. Introducción: Another Breakout game…
  2. Diario Breakout – Parte 1
  3. Diario Breakout – Parte 2
  4. Diario Breakout – Parte 3
  5. Diario Breakout – Parte 4
  6. Diario Breakout – Parte 5 y ¿última?
  7. Diario Breakout – Integrar Clay.io

He subido Breakout a GitHub.

Prueba la versión final.

Share