Mostrar Mensajes
1
Aprender a programar desde cero / JavaScript efecto pelotas moviendo por pantalla y rebote actualizar propiedades
« en: 01 de Abril 2015, 09:35 »
Hola,
estoy practicando Javascript y a partir de un código base debo conseguir que un div se mueva y una serie de imágenes reboten contra él. El problema que tengo es que aunque consiga que el div se mueva las posiciones contra las que rebotan las imágenes son siempre las iniciales del div. Revisando el código he visto una serie de funciones llamadas:
obtener_x_origen, obtener_y_origen, obtener_x_final y obtener_y_final que quizá sean la causa del problema. Sin embargo, cómo consigo actualizar dichas variables para que, en el caso de que el div (asignándole a su left el valor de x_origen = x_origen + velocidad) las imágenes reboten contra las nuevas posiciones del div?
Aquí dejo el código:
estoy practicando Javascript y a partir de un código base debo conseguir que un div se mueva y una serie de imágenes reboten contra él. El problema que tengo es que aunque consiga que el div se mueva las posiciones contra las que rebotan las imágenes son siempre las iniciales del div. Revisando el código he visto una serie de funciones llamadas:
obtener_x_origen, obtener_y_origen, obtener_x_final y obtener_y_final que quizá sean la causa del problema. Sin embargo, cómo consigo actualizar dichas variables para que, en el caso de que el div (asignándole a su left el valor de x_origen = x_origen + velocidad) las imágenes reboten contra las nuevas posiciones del div?
Aquí dejo el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplos de javascript. </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function sacar_x_pantalla(){
/* Obtenemos el tamaño de la forma normal de la pantalla total por defecto, y lo guardamos en una variable temporal de memoria que llamamos myWidth */
var myWidth = screen.width;
/* Comprobamos casos escepcionales. */
if( typeof( window.innerWidth ) == 'number' ) {
/* IE>7 Caso de los navegadores compatibles con HTML5. */
myWidth = window.innerWidth;
}
else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
/*IE 6 o superior que no cumple con HTML5. */
myWidth = document.documentElement.clientWidth;
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
/*IE 4 o compatibles. */
myWidth = document.body.clientWidth;
}
/* Enviamos al exterior el resultado de leer la propiedad. */
return myWidth;
}
function sacar_y_pantalla(){
/* Obtenemos el tamaño de la forma normal de la pantalla total por defecto, y lo guardamos en una variable temporal de memoria que llamamos myHeight */
var myHeight = screen.height;
/* Comprobamos casos escepcionales. */
if( typeof( window.innerHeight ) == 'number' ) {
/* IE>7 Caso de los navegadores compatibles con HTML5. */
myHeight = window.innerHeight;
}
else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
/*IE 6 o superior que no cumple con HTML5. */
myHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
/*IE 4 o compatibles. */
myHeight = document.body.clientHeight;
}
/* Enviamos al exterior el resultado de leer la propiedad. */
return myHeight;
}
/* Valores x e y mínimos de la pantalla por donde se mueve la pelota.*/
var min_x_incial = 0; // Indicamos el punto minimo a donde deben de ir las pelotas por defecto.
var min_y_incial = 0; // Indicamos el punto minimo a donde deben de ir las pelotas por defecto.
/* Valores x e y máximos de la pantalla por donde se mueve la pelota.*/
var max_x_incial = sacar_x_pantalla(); // Obtenermos el punto máximo a donde deben de ir las pelotas por defecto.
var max_y_incial = sacar_y_pantalla(); // Obtenermos el punto máximo a donde deben de ir las pelotas por defecto.
/* Valores de nuestra posición actual. */
var x_actual_incial = 0; // Indicamos el punto de partida de las pelotas por defecto.
var y_actual_incial = 0; // Indicamos el punto de partida de las pelotas por defecto.
/* Valores de nuestra dirección y destino. */
var x_direccion_destino_incial = 6; // Indicamos la dirección y destino de las pelotas por defecto.
var y_direccion_destino_incial = 10; // Indicamos la dirección y destino de las pelotas por defecto.
/* Valores del siguiente punto de destino. */
var x_destino_incial = x_actual_incial + x_direccion_destino_incial; // Indicamos el punto de llegada de las pelotas por defecto.
var y_destino_incial = y_actual_incial + y_direccion_destino_incial; // Indicamos el punto de llegada de las pelotas por defecto.
var pelota_dimension_x_incial = 300; // Indicamos la dimension de las pelotas por defecto.
var pelota_dimension_y_incial = 300; // Indicamos la dimension de las pelotas por defecto.
var id_balon_incial = 'id_balon_'; // Indicamos id de las pelotas por defecto.
var tiempo_ejecucion_incial = 1000/50; // Indicamos el tiempo de ejecución por defecto, en base a este tiempo y del desplazamiento las pelotas ambian de velocidad.
var vector_pelotas = new Array(); // Inicio el vector de pelotas con ninguna pelota activa.
var vector_ladrillos = new Array(); // Inicio el vector de ladrillos con ningún ladrillo activo.
/* Función para autollamada. */
/* Los métodos quedarán así.*/
function rebote_eje_y_superior(){
/* Este método comprueba si la pelota ha llegado a la parte superior de la pantalla máxima, y en caso de ser así ejecuta elrebote. */
if( this.y_destino < this.min_y ){
/* Encaso de que la pelota se va a desplazar por encima de la posición mínima ejecutamos el rebote. */
this.y_destino = this.min_y - this.y_destino; // Vemos cuanto se desplaza por encima de la posición minima.
this.y_destino = this.min_y + this.y_destino; // Este desplazamiento se lo sumamos a la posición minima.
this.y_direccion_destino = 0 - this.y_direccion_destino; // Cambiamos el signo al vector de desplazamiento en el eje Y, que es el que marca arriba y abajo.
}
}
function rebote_eje_x_izquierda(){
/* Este método comprueba si la pelota ha llegado a la parte izquierda de la pantalla máxima, y en caso de ser así ejecuta elrebote. */
if( this.x_destino < this.min_x ){
/* Encaso de que la pelota se va a desplazar por la izquierda de la posición mínima ejecutamos el rebote. */
this.x_destino = this.min_x - this.x_destino; // Vemos cuanto se desplaza por la izquierda de la posición minima.
this.x_destino = this.min_x + this.x_destino; // Este desplazamiento se lo sumamos a la posición minima.
this.x_direccion_destino = 0 - this.x_direccion_destino; // Cambiamos el signo al vector de desplazamiento en el eje X, que es el que marca izquierda y derecha.
}
}
function rebote_eje_y_inferior(){
/* Este método comprueba si la pelota ha llegado a la parte inferior de la pantalla máxima, y en caso de ser así ejecuta elrebote. */
if( (this.y_destino + this.pelota_dimension_y) > this.max_y ){
/* Encaso de que la pelota se va a desplazar por debajo de la posición máxima ejecutamos el rebote. Hay que tener en cuenta en este caso las dimensiones de la pelota.*/
this.y_destino = this.max_y - (this.y_destino + this.pelota_dimension_y); // Vemos cuanto se desplaza por debajo de la posición máxima.
this.y_destino = this.max_y + this.y_destino - this.pelota_dimension_y; // Este desplazamiento se lo restamos a la posición máxima.
this.y_direccion_destino = 0 - this.y_direccion_destino; // Cambiamos el signo al vector de desplazamiento en el eje Y, que es el que marca arriba y abajo.
}
}
function rebote_eje_x_derecha(){
/* Este método comprueba si la pelota ha llegado a la parte derecha de la pantalla máxima, y en caso de ser así ejecuta elrebote. */
if( (this.x_destino + this.pelota_dimension_x) > this.max_x ){
/* Encaso de que la pelota se va a desplazar por la derecha de la posición máxima ejecutamos el rebote. Hay que tener en cuenta en este caso las dimensiones de la pelota.*/
this.x_destino = this.max_x - (this.x_destino + this.pelota_dimension_x); // Vemos cuanto se desplaza por la derecha de la posición máxima.
this.x_destino = this.max_x + this.x_destino - this.pelota_dimension_x; // Este desplazamiento se lo restamos a la posición máxima.
this.x_direccion_destino = 0 - this.x_direccion_destino; // Cambiamos el signo al vector de desplazamiento en el eje X, que es el que marca izquierda y derecha.
}
}
function desplazar_pelota(){
/* Este método recoge la imagen con el ID oportuno y cambia dicha imagen a la posición destino. Al final del prceso actualiza las propiedades de la posición actual de la pelota. */
document.getElementById(this.id_balon).style.position = "absolute"; // Marcamos la posicón absoluta de la pelota.
document.getElementById(this.id_balon).style.top = this.y_destino + "px"; // Desplazamos la imagen a la nueva posición en Y.
document.getElementById(this.id_balon).style.left = this.x_destino + "px"; // Desplazamos la imagen a la nueva posición en X.
this.x_actual = this.x_destino; // Actualizamos los datos de la posición actual de la pelota.
this.y_actual = this.y_destino; // Actualizamos los datos de la posición actual de la pelota.
}
RSS