Hace poco comencé a desarrollar un juego que consiste en tirar una pelota y conseguir que ésta se enceste (en este caso en un rectángulo), lo que viene siendo un tiro parabólico en toda regla.
En el juego hay distintos objetos:
· La canasta (un simple rectángulo)
· Los objetos que actúan como obstáculos (más rectángulos).
· La pelota
· Y las paredes (el área del juego)
Pues bien, el lío que tengo es que a veces no se detecta el choque con el objeto y esto ocurre solo cuando la pelota va muy rápido y esto sucede porque entre cada fotograma el objeto avanza más píxeles (de golpe) que cuando la velocidad es menor, me explico:
Tengo un objeto que contiene los niveles:
var selLevel = 1;
var level = {
1: {
basketPos: [600,500], //Basket pos
basketSize: [200], //The width of the basket
ballRad: 20, //ballRad
ay: 25, //Aceleration y
ax: 0, //Aceleration x
bR: 0.2, //Bounce reduction
objects: { //External objects (obstacles)
1: [200,280,50,1000],
2: [450,200,400,25]
}
}
};
Este es el loop:
function animation() {
//Se que hay variables y otras cosas que no aparecen en la función, pero para esto no son necesarias
//Current speed
vx = v0x+(ax*t);
vy = -v0y+(ay*t);
//Current position
x=x0+(v0x*t)+(0.5*ax*Math.pow(t,2));
y=y0+(-v0y*t)+(0.5*ay*Math.pow(t,2));
//Este es el sistema que estoy usando para detectar los objetos
for (var i = 1; i <= otherObjects.length; i++) {
oX = level[selLevel]["objects"][i][0]; //Posición del obstáculo en el eje x
oY = level[selLevel]["objects"][i][1]; //Posición del obstáculo en el eje y
oW = level[selLevel]["objects"][i][2]; //Ancho del objeto
oH = level[selLevel]["objects"][i][3]; //Alto del objeto
//Adaptar posiciones y tamaños a la pantalla actual
oX = (oX * windowWidth) / scaleSize[0];
oY = (oY * windowHeight) / scaleSize[1];
oW = (oW * windowWidth) / scaleSize[0];
oH = (oH * windowHeight) / scaleSize[1];
if (oW <= ballRad * 2) {
oW = ballRad * 2;
}
if (oH <= ballRad * 2) {
oH = ballRad * 2;
}
//Left object bounce
if (x + ballRad >= oX &&
x + ballRad <= oX + oW &&
y >= oY &&
y <= oY + oH &&
vx > 0) {
//Aquí está llamando a una función que se encarga de cambiar los valores para simular el rebote
bounceLeft(fix);
break;
}
//Right object bounce
if (x - ballRad <= oX + oW &&
x - ballRad >= (oX + oW) - oW &&
y >= oY &&
y <= oY + oH &&
vx < 0) {
bounceRight(fix);
break;
}
//Top object bounce
if (y + ballRad >= oY &&
y + ballRad <= oY + oH &&
x >= oX &&
x <= oX + oW &&
vy > 0) {
bounceUp(fix);
break;
}
//Bottom object bounce
if (y - ballRad <= oY + oH &&
y - ballRad >= oY &&
x >= oX &&
x <= oX + oW &&
vy < 0) {
bounceDown(fix);
break;
}
}
//Aquí hay una adición del tiempo
t=t+0.16; //Aquí lo he ocultado pero en el programa de verdad calculo el tiempo que tarda en hacer el loop y luego sumo el tiempo respecto a ese valor
window.requestAnimationFrame(animation);
}
Estoy simplificando mucho los guiones para ser lo menos denso posible
Pues bien, dicho esto, imaginemos que hay un objeto en la posición (200,300)
y su tamaño es de (100,50)
respectivamente, cuando la velocidad de la pelota es muy alta y se aplican las comprobaciones hay una diferencia de píxeles entre un fotograma y otro superior al alto del objeto, con lo cual es imposible que las condiciones se cumplan, entonces se me ocurrió hacer el cálculo de las operaciones en un intervalo independiente, y las acciones de pintar que se ejecutaran usando requestAnimationFrame()
en otra función, y de este modo logré que funcionara pero el juego comenzó a tener mucho lag (por así decirlo) y la animación iba a saltos y daba trompicones. Entonces claro, no sé muy bien que hacer al final, si alguien me pudiera ayudar le estaría muy agradecido, y también me gustaría saber si estoy usando un método más o menos correcto para la detección de estos objetos.
Gracias.