Aquí dejo el resto del código:
/* Este método tiene como entrada ladrillos_pantalla, que es el vecor de objectos ladrillo y así saber cuando una pelota toca contra alguno. */
function desplazamiento_pelota_en_tiempo(ladrillos_pantalla) {
/* Este método lo que realiza es el desplazamiento del balón de una posición actual a la de destino dependiendo de la dirección destino a la que se dirige.*/
/* Este método se va a ejecutar cada tiempo_ejecucion_incial milisegundos por defecto. */
var i = 0; // Inicializamos una variable contador.
this.x_destino = this.x_actual + this.x_direccion_destino; // Calculamos a partir de la posición actual y la direccion_destino cual será la nueva dirección destino inicial por defecto.
this.y_destino = this.y_actual + this.y_direccion_destino;
for ( i = 0; i<ladrillos_pantalla.length; i++ ){ // Comprobamos que para llegar a esa dirección destino no tengamos que pasar atraves de algún ladríllo, en caso de ser así ejecutamos rebote.
// Indicar que los ladríllos deben de estar distanciados entre si como minimo una distancia igual a el vector direccion_destino MAS la dimensión de la pelota.
// En caso de tocar contra algún ladrillo los métodos rebote_eje_y_superior_inferior_ladrillo y rebote_eje_y_inferior_superior_ladrillo corrigiran el vector de direccion_destino y la nueva posición de destino.
this.rebote_eje_y_superior_inferior_ladrillo(ladrillos_pantalla[i].obtener_x_origen_ladrillo(), ladrillos_pantalla[i].obtener_y_origen_ladrillo(), ladrillos_pantalla[i].obtener_x_final_ladrillo(), ladrillos_pantalla[i].obtener_y_final_ladrillo());
this.rebote_eje_y_inferior_superior_ladrillo(ladrillos_pantalla[i].obtener_x_origen_ladrillo(), ladrillos_pantalla[i].obtener_y_origen_ladrillo(), ladrillos_pantalla[i].obtener_x_final_ladrillo(), ladrillos_pantalla[i].obtener_y_final_ladrillo());
}
this.rebote_eje_y_superior(); // En caso de que la nueva dirección de destino sobrepase el punto del eje Y superior rebote_eje_y_superior corrigira el vector de direccion_destino y la nueva posición de destino.
this.rebote_eje_x_izquierda(); // En caso de que la nueva dirección de destino sobrepase el punto del eje X de la izquierda rebote_eje_x_izquierda corrigira el vector de direccion_destino y la nueva posición de destino.
this.rebote_eje_y_inferior(); // En caso de que la nueva dirección de destino sobrepase el punto del ej Y inferior rebote_eje_y_inferior corrigira el vector de direccion_destino y la nueva posición de destino.
this.rebote_eje_x_derecha(); // En caso de que la nueva dirección de destino sobrepase el punto del eje X de la derecha rebote_eje_x_derecha corrigira el vector de direccion_destino y la nueva posición de destino.
this.desplazar_pelota(); // Una vez calculado la nueva posición de destino y corregida correctamente, desplazamos a ella la pocición de la pelota y actualizamos la posición actual.
alert(this.x_origen);
}
function anhadir_balon() {
/* Método para añadir un nuevo balón en la pantalla, para ello crea una imagen con las propiedades de dimensiones, id, imagen y posición del objecto, y lo añade al Body del HTML.*/
var nuevo_balon = "<img id='" + this.id_balon + "' src='" + this.imagen_balon + "' style='width:" + this.pelota_dimension_x + "px; height:" + this.pelota_dimension_y + "px; position:absolute; top:" + this.min_y + "px; left:" + this.min_x + "px;' />";
var body_id = document.getElementById('mi_campo');
body_id.innerHTML = body_id.innerHTML + nuevo_balon;
}
/* Este método tiene como entradas los valores x_origen, y_origen, x_final, y_final que son los valores que dimensiona y posicionan al ladrillo en el campo de juegos. */
function rebote_eje_y_superior_inferior_ladrillo(x_origen, y_origen, x_final, y_final){
/* Este método comprueba si una pelota está chocando contra la parte inderior de un ladrillo, para ello la pelota debe atravesar el eje Y de la posición
en la que se encuentra el ladrillo y también debe de encontrarse en el segmento del eje X en el que se encuantra el ladrillo en su trayectoria.*/
if( (this.y_destino <= y_final) && (this.y_actual >= y_final) ){
/*
En ete caso vemos que estamos atravesando el nivel de Y, por lo cual es pertinente ver si tocamos con el ladrillo.
Para ello debemos de parametrizar la ecuación de una recta que pasa por dos puntos, que serán le punto de origen de la pelota
y su punto de destino, que ambos conocemos. Si por medio de esa trayectoria pasamos por un punto del eje x donde se encuentra
el ladrillo entonces existe un rebote.
Partimos de la siguiente ecuacnión:
(this.this.y_origen - this.this.y_destino) = pendeinte_de_la_recta * (this.this.x_origen - this.this.x_destino);
Donde la pendiente es la incognita a responder.
ENTONCES:
pendeinte_de_la_recta = (this.this.y_origen - this.this.y_destino) / (this.this.x_origen - this.this.x_destino);
Ahor sabiendo la pendiente lo que debemos de ver es al nivel de la "Y" del ladrillo que "X" tiene para ver si coincide
con la longitud del ladrillo, en tal caso hay rebote.
(this.this.y_origen - this.y_final) = pendeinte_de_la_recta * (this.this.x_origen - x_de_cruce);
Donde lo que lo que nos interesa es saber la x de cruce a la altura de la y del ladrillo:
ENTONCES:
x_de_cruce = ((this.this.y_origen - this.y_final)/pendeinte_de_la_recta) + this.this.x_origen;
*/
var pendeinte_de_la_recta = (this.y_actual - this.y_destino) / (this.x_actual - this.x_destino); // Sacamos la pendiente de la trayectoria de la pelota.
var x_de_cruce = ((this.y_actual - y_final)/pendeinte_de_la_recta) + this.x_actual; // Con la posición actual, la pendiente y la posición del ladrillo en el eje Y sacamos el valor de X al llegar al ladrillo.
if( (x_de_cruce > (x_origen - this.pelota_dimension_x)) && (x_de_cruce < x_final) ){ // Comprobamos que la posición de X la llegar al ladrillo no coincida con las X que ocupa el ladrillo.
this.y_destino = y_final - this.y_destino; // En caso de eser así ejecutamos e rebote, que se hace de la misma forma que los diferentes rebotes contra los limites del campo.
this.y_destino = y_final + this.y_destino;
this.y_direccion_destino = 0 - this.y_direccion_destino;
}
}
}
/* Este método tiene como entradas los valores x_origen, y_origen, x_final, y_final que son los valores que dimensiona y posicionan al ladrillo en el campo de juegos. */
function rebote_eje_y_inferior_superior_ladrillo(x_origen, y_origen, x_final, y_final ){
/* Este método comprueba si una pelota está chocando contra la parte superior de un ladrillo, para ello la pelota debe atravesar el eje Y de la posición
en la que se encuentra el ladrillo y también debe de encontrarse en el segmento del eje X en el que se encuantra el ladrillo en su trayectoria. Es totalmente semejante al anterior, solo que ahora debemos de tener en cuenta las dimensiones de la pelota. */
if( ((this.y_destino + this.pelota_dimension_y) >= y_origen) && ((this.y_actual + this.pelota_dimension_y) <= y_origen) ){
var pendeinte_de_la_recta = ((this.y_actual + this.pelota_dimension_y) - (this.y_destino + this.pelota_dimension_y)) / (this.x_actual - this.x_destino);
var x_de_cruce = (((this.y_actual + this.pelota_dimension_y) - (y_origen + this.pelota_dimension_y))/pendeinte_de_la_recta) + this.x_actual;
if( (x_de_cruce > (x_origen - this.pelota_dimension_x)) && (x_de_cruce < x_final) ){
this.y_destino = y_origen - (this.y_destino + this.pelota_dimension_y);
this.y_destino = y_origen + this.y_destino - this.pelota_dimension_y;
this.y_direccion_destino = 0 - this.y_direccion_destino;
}
}
}
/* Esta función crea la clase pelota, la cual empleamos para crear los diferentes objectos pelota. */
function Crear_clase_pelota (min_x_in, min_y_in, max_x_in, max_y_in, x_actual_in, y_actual_in, x_direccion_destino_in, y_direccion_destino_in, pelota_dimension_x_in, pelota_dimension_y_in, id_balon_in, tiempo_ejecucion_in, imagen_balon_in ){
/* Propiedades. */
this.min_x = min_x_in;
this.min_y = min_y_in;
this.max_x = max_x_in;
this.max_y = max_y_in;
this.x_actual = x_actual_in;
this.y_actual = y_actual_in;
this.x_direccion_destino = x_direccion_destino_in;
this.y_direccion_destino = y_direccion_destino_in;
this.x_destino = this.x_actual + this.x_direccion_destino;
this.y_destino = this.y_actual + this.y_direccion_destino;
this.pelota_dimension_x = pelota_dimension_x_in;
this.pelota_dimension_y = pelota_dimension_y_in;
this.id_balon = id_balon_in;
this.tiempo_ejecucion = tiempo_ejecucion_in;
this.imagen_balon = imagen_balon_in;
/* Métodos. */
this.rebote_eje_y_superior = rebote_eje_y_superior;
this.rebote_eje_x_izquierda = rebote_eje_x_izquierda;
this.rebote_eje_y_inferior = rebote_eje_y_inferior;
this.rebote_eje_x_derecha = rebote_eje_x_derecha;
this.desplazar_pelota = desplazar_pelota;
this.desplazamiento_pelota_en_tiempo = desplazamiento_pelota_en_tiempo;
this.anhadir_balon = anhadir_balon;
this.rebote_eje_y_superior_inferior_ladrillo = rebote_eje_y_superior_inferior_ladrillo;
this.rebote_eje_y_inferior_superior_ladrillo = rebote_eje_y_inferior_superior_ladrillo;
}
function crear_ladrillo(){
/* Método para crear ladrillos en el terreno de juego. se basa en crear DIV Visibles en las posiciones dadas. */
var nuevo_ladrillo = "<div style='width:" + (this.x_final - this.x_origen) + "px; height:" + (this.y_final - this.y_origen) + "px; position:absolute; top:" + this.y_origen + "px; left:" + this.x_origen + "px; border: solid 1px #000000;' />";
var body_id = document.getElementById('mi_campo');
body_id.innerHTML = body_id.innerHTML + nuevo_ladrillo;
}
function obtener_x_origen_ladrillo(){
/* Método que lanza al exterior la propiedad x_origen del ladrillo. */
return this.x_origen;
}
function obtener_y_origen_ladrillo(){
/* Método que lanza al exterior la propiedad y_origen del ladrillo. */
return this.y_origen;
}
function obtener_x_final_ladrillo(){
/* Método que lanza al exterior la propiedad x_final del ladrillo. */
return this.x_final;
}
function obtener_y_final_ladrillo(){
/* Método que lanza al exterior la propiedad y_final del ladrillo. */
return this.y_final;
}
/* Esta función crea la clase ladrillo, la cual empleamos para crear los diferentes objectos ladrillo. */
function crear_clase_ladrillo (x_origen_in, y_origen_in, x_final_in, y_final_in){
/* Propiedades. */
this.x_origen = x_origen_in;
this.y_origen = y_origen_in;
this.x_final = x_final_in;
this.y_final = y_final_in;
/* Métodos. */
this.crear_ladrillo = crear_ladrillo;
this.obtener_x_origen_ladrillo = obtener_x_origen_ladrillo;
this.obtener_y_origen_ladrillo = obtener_y_origen_ladrillo;
this.obtener_x_final_ladrillo = obtener_x_final_ladrillo;
this.obtener_y_final_ladrillo = obtener_y_final_ladrillo;
}
/* Función que mpleamos para crear el juego y arrancarlo. */
function inicio_pelotas (){
/* Creamos los diferentes objectos Ladrillo y los situamos en la pantalla. */
var i = 0;
vector_ladrillos[i++] = new crear_clase_ladrillo(300, 500, 800, 500);
vector_ladrillos[i++] = new crear_clase_ladrillo(200, 200, 600, 200);
for ( i = 0; i<vector_ladrillos.length; i++ ){
vector_ladrillos[i].crear_ladrillo();
}
/* Creamos los diferentes objectos pelota, los situamos en la pantalla y llamamos al me´tododesplazamiento_pelota_en_tiempo cada tiempo_ejecucion para su desplazamiento. */
i = 0;
vector_pelotas[i++] = new Crear_clase_pelota(min_x_incial, min_y_incial, max_x_incial, max_y_incial, x_actual_incial, y_actual_incial, x_direccion_destino_incial , y_direccion_destino_incial, 20, 20, id_balon_incial + i, tiempo_ejecucion_incial, './balon.png');
vector_pelotas[i++] = new Crear_clase_pelota(min_x_incial, min_y_incial, max_x_incial, max_y_incial, 300, 40, x_direccion_destino_incial + 2, y_direccion_destino_incial - 2, 20, 10, id_balon_incial + i, tiempo_ejecucion_incial, './rugby.png');
vector_pelotas[i++] = new Crear_clase_pelota(min_x_incial, min_y_incial, max_x_incial, max_y_incial, 300, 140, x_direccion_destino_incial-1, y_direccion_destino_incial+2, 20, 10, id_balon_incial + i, tiempo_ejecucion_incial, './rugby.png');
vector_pelotas[i++] = new Crear_clase_pelota(min_x_incial, min_y_incial, max_x_incial, max_y_incial, 300, 80, x_direccion_destino_incial+3, y_direccion_destino_incial, 20, 20, id_balon_incial + i, tiempo_ejecucion_incial, './balon2.png');
for (i = 0; i<vector_pelotas.length; i++ ){
vector_pelotas[i].anhadir_balon();
/* Creamos en modo texto la instrucción en Javascript y la ejecutamos con eval. */
eval("var mi_pelota_start_" + i + "= vector_pelotas[i] ");
eval("window.setInterval(function(){mi_pelota_start_" + i + ".desplazamiento_pelota_en_tiempo(vector_ladrillos);} , mi_pelota_start_" + i + ".tiempo_ejecucion) ");
}
}
</script>
</head>
<body id="mi_campo" onload="inicio_pelotas();">
</body>
</html>
Tema: JavaScript efecto pelotas moviendo por pantalla y rebote actualizar propiedades (Leído 14198 veces)
RSS -
WAP2