If you're seeing this message, it means we're having trouble loading external resources on our website.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

Chocar con los palos

Ya tenemos al castor saltando, ya tenemos a los palos saliendo: solo necesitamos juntar ambos. Queremos saber si nuestro castor logra pasar justo encima de un palo, para que lo podamos contar como una captura de palo exitosa. Eso significa que debemos hacer una revisión rápida de si los dos objetos chocan. Como tiene que ver con dos objetos, hay muchos lugares donde podemos programar esto de forma que funcione: como una función global, como un método del objeto Stick (palo en inglés), como un método del objeto Beaver (castor en inglés). Por ahora vamos a dejarlo en el de Beaver:
Beaver.prototype.checkForStickGrab = function(stick) {
  // Si el castor está encima de un palo, haz algo
};
En esa función, primero necesitamos escribir una condición que será verdadera si el castor choca con un palo, y falsa en caso contrario. Podemos hacerla compleja o estricta, por ejemplo, con base en la ubicación de la mano del castor, pero por el momento sigamos con algo básico. Deberían "chocar" si:
  • La posición x del centro del palo está entre los dos lados del castor.
  • La posición y del centro del palo está entre las partes superior e inferior del castor.
El palo se dibuja usando el comando rect , así que por lo general, eso significa que sus propiedades x y y representan las coordenadas de su esquina superior izquierda. Sin embargo, para simplificar nuestro cálculo de cuando chocan, podemos cambiar a un modo en el que el rect se dibuje desde el centro:
rectMode(CENTER);
rect(this.x, this.y, 5, 40);
La imagen del castor también se dibuja desde la esquina superior izquierda, pero la dejaremos de esa forma, ya que funciona bien para nuestro cálculo. Para verificar la primera condición, en la posición x, podemos hacerlo de esta forma, donde verificamos que la x del palo sea mayor o igual al lado izquierdo del castor (x) y menor o igual al lado derecho del castor (x + 40)
stick.x >= this.x && stick.x <= (this.x + 40)
Para verificar la posición y, podemos hacerlo de forma parecida, verificamos si la y del palo es mayor o igual a la parte superior del castor (y) y menor o igual a la parte inferior del castor (y + 40):
stick.y >= this.y && stick.y <= (this.y + 40)
Ahora, ¿qué debemos hacer una vez que detectemos que el palo y el castor chocaron? Efectivamente queremos quitar el palo de la pantalla y evitar que vuelva a haber otro choque. Una manera sencilla de hacer esto es mandar el palo fuera de la pantalla, cambiando su coordenada y:
stick.y = -400;
Al mismo tiempo, queremos recordar cuántos palos ha "agarrado" el castor, así que incrementaremos la propiedad interna de los palos (sticks):
this.sticks++;
Por último, necesitamos llamar este método en un momento oportuno: ¿qué tal justo después de dibujar cada palo?
    for (var i = 0; i < sticks.length; i++) {
        sticks[i].draw();
        beaver.checkForStickGrab(sticks[i]);
        sticks[i].x -= 1;
    }
Aquí está todo junto. Revísalo: cuando saltas encima de los palos, ¡desaparecen!

¿Quieres unirte a la conversación?

¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.