Saltar al contenido →

Diario Breakout – Parte 3

Este artículo es la tercera parte de la serie diario Breakout. En esta parte, voy a crear la clase Brick que será la clase encargada de gestionar los bloques del juego. También añadiré unos bloques a la pantalla e implementaré las colisiones entre bola y bloques. Además, mejoraré el sistema de colisiones entre la bola y la pala para hacer más interesante el juego.

La clase Brick

La clase Brick es la encargada de gestionar los bloques del juego. Esta clase es la más sencilla de las que he creado hasta ahora, este es el código javascript:

Esta clase sólo tiene un método: «draw». No necesita más métodos, ya que no modifica su posición y la gestión de colisiones se hará en la clase Ball. Ahora debo crear bloques en el canvas para mostrarlos.

Crear los bloques en game.js y dibujarlos

Así quedará el archivo game.js con los cambios.

Las líneas 14 hasta 35 y 66 hasta 70 contienen el código que he añadido. Con el primer código (líneas 14 a 35), creo 3 filas de 10 columnas de bloques. Cada bloque medirá 38.9 de ancho y 20 de alto. Entre cada bloque hay una separación de 1. Cada bloque creado se almacena en un array. Con el segundo cacho de código (líneas 66 a 70) recorro el array de bloques y los dibujo uno a uno. En la línea 62, añado el array bricks a la llamada al método «checkCollisions» de mi clase Ball. De esta forma, en ese método, puedo comprobar las colisiones entre bola y bloques.

Colisión entre bola y bloques

Este es el código responsable de comprobar las colisiones entre bola y bloques:

Recorro el array de bloques y para cada bloque hago una llamada a un nuevo método «intercept». Si este método devuelve verdadero, elimino el bloque del array.

El nuevo método «intercept»

Este método es el más complicado que he tenido que implementar hasta ahora y es que he tenido que leer muchas posibles soluciones para entender cómo detectar la colisión entre la bola y un rectángulo y además implementar la respuesta a esta colisión. Este método recibe como parámetro un rectángulo «rectangle» que es un objeto que tiene las siguientes propiedades:

  • Coordenada x.
  • Coordenada y.
  • Ancho width.
  • Alto height.

El otro parámetro es «isPaddle». Un simple booleano que será verdadero si la colisión a comprobar es con la pala y falso en caso de que comprobemos la colisión con un bloque. Explicaré más adelante el por qué de este parámetro. Este método ha sido implementado gracias a esta respuesta dada por e. James. Traduzco a continuación la explicación del método: Colisión entre círculo y rectángulo

  1. Las líneas 8 y 9 calculan el valor absoluto de la coordenada x y la coordenada y que es la diferencia entre el centro del círculo y el centro del rectángulo. Esto hace que sólo deba hacer los cálculos sobre un cuadrante y no sobre los cuatro cuadrantes posibles. En la imagen, el color gris representa el rectángulo, el color rojo representa donde debe de estar el centro del círculo si hay colisión.
  2. Las líneas 11 a 18 eliminan los casos sencillos en los que el círculo está lo suficientemente lejos como para no colisionar con el rectángulo. Esto es representado por las zonas de color verde en la imagen.
  3. Las líneas 20 a 53 resuelven el caso en los que el círculo está en el color gris o naranja. Esto es decir que está suficientemente cerca del rectángulo como para estar colisionando con él. Además en mi código, el caso de la colisión con el borde inferior es resuelta de forma sencilla invirtiendo el sentido en el que se dirige la bola, pero en el caso de la colisión con el borde superior de la pala, lo he complicado un poco. Lo que he hecho es dividir la pala en 4 secciones:
    • La sección izquierda (Sección 1) que tiene un ancho de 1/5 del ancho de la pala y que va desde el borde izquierdo hasta 1/5 del ancho de la pala.
    • La sección central (Sección 3) que tiene un ancho de 1/5 del ancho de la pala y que va desde 2/5 del ancho de la pala a 3/5 del ancho de la pala.
    • La sección derecha (Sección 5) que tiene un ancho de 1/5 del ancho de la pala y que va desde 4/5 del ancho de la pala hasta el borde derecho de la misma.
    • Las secciones centrales (Secciones 2 y 3) que van de 1/5 a 2/5 y 3/5 a 4/5.

    El siguiente dibujo aclara este tema:
    paddle

    El significado de mi código es que según el cuadrante en el que la bola impacte con la pala, cambiaré el ángulo de respuesta a la colisión. Si la bola impacta en la sección 1 o 5, invertiré el ángulo de respuesta hacia ese mismo lado del que viene. Si la bola impacta en la sección 3, la bola verá como el ángulo se endereza ligeramente. Si la bola impacta en la sección 2 o 4, el ángulo se invertirá normalmente. Esto es para hacer el juego más interesante sino la bola iría rebotando siempre hacia el mismo lado siendo muy previsible.

  4. Las líneas 55 a 68 resuelven el mismo caso que el anterior pero cuando la colisión se produce en vez de en uno de los lados superior o inferior, en un lado lateral.
  5. Desde la línea 70 a 145, se resuelve el caso más complicado que es el caso en el que la bola colisiona con una de las esquinas del rectángulo. Se examina caso por caso para calcular la respuesta a cada posibilidad. En cada esquina, existe un ángulo que es imposible de tener por ejemplo es imposible que una bola viaja con un ángulo entre 0º y 90º colisione con la esquina inferior derecha de un rectángulo.

Cambios en la detección de colisiones entre bola y pala

Ahora puedo utilizar el nuevo método intercept para gestionar las colisiones entre bola y pala.

Y ya está, sólo necesito añadir en mi index.html como siempre la nueva clase que he creado brick.js.

Cada día estoy más cerca de tener una versión que se parece a un juego de verdad. En esta parte, he implementado un sistema de colisiones más avanzado para la pala y la clase Brick. En la siguiente parte, necesitaré trabajar en hacer de esto un juego de verdad (por ejemplo, ahora mismo nunca hay Game Over…).

Aquí os dejo la versión demo de esta tercera 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