Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Vale. El problema más concretamente creo que esta relacionado con las funciones que lanzan al exterior x_origen y demás propiedas del div, es decir, relacionado con las coordenadas del div. He intentado varias cosas pero sigue actuando igual. Espero que podamos dar con la solución pronto. Gracias por ayudar.

Veo que tenemos las líneas numeradas de forma diferente, al parecer. Te adjunto el archivo modificado.

Hola, aquí te dejo el archivo.

Buenas,
en las modificaciones que hice simplemente añadí funciones que le indicaran a esos div que x_origen += velocidad y que esto se lo añadiera al left del div. Haciendo, por otra parte, lo propio pero restando para que se muevan hacia el otro lado. El problema que tengo es que se supone que al tomar x_origen en la posición y movimiento del div esta debería variar para que las pelotas reboten contra las nuevas posiciones del div, pero rebotan únicamente contra la posición inicial.

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>

Buenas,

he comenzado a trabajar creando una calculadora básica con HTML y Javascript y hasta ahora no encontrado problemas con el funcionamiento de eventos usados, funciones, operaciones, etc. Sin embargo, no consigo introducir un símbolo que indique que el número es negativo y que no reste. Es decir, no quiero una operación sino que lo que deseo obtener es un símbolo (-) que indique que el número es negativo de forma que, por ejemplo, 5-(-)5 se pueda obtener sin que Javascript alerte de un Sintax error.
Cabe mencionar que el operar el número introducido por (-1) para obtener el numero negativo correspondiente al usado no me resulta útil ya que, al multiplicar, ya se hace una operación y, por ello, la calculadora resetea los valores.
¿Alguna idea?
Saludos.

Hola. Hace unas semanas he empezado a aprender un poco de Javascript: partiendo de diagramas de flujo, pseudocódigo y, finalmente, código. Tras hacer varios ejemplos, nos han propuesto uno nuevo que no consigo solucionar. El ejemplo en sí consiste en tomar una imagen de una persona y hacer que dicha imagen se mueva a lo largo de la pantalla. Ahora bien, esa parte la he logrado, así como indicar, también, que dicha imagen cambie a otra (usando if y else) diferente para simular que esa persona anda. Mi pregunta es que, si quiero cambiar esa imagen varias veces, es decir, no tener solo 2 poses de esa persona sino cuatro, ¿cómo podría cambiar esas imágenes mientras se está moviendo? Lo he intentado con un switch case pero no me ha dado resultado. ¿Alguna solución?


        <script type="text/javascript">
            var x       = 0;
            var minimo  = 200;
            var maximo  = 1000;
            var despl_actual = minimo;
            var incremento = 20;
            var elemento_1 = 0;
            var elemento_2 = 0;
            var elemento_3 = 0;
            var imagen = null;

            function practicas( )
            {
                imagen = document.getElementById( "img_script" );
                switch (x) {
                    case 0: imagen.src = "./css/imagenes/walk_2.jpg"; break;
                    case 1: imagen.src = "./css/imagenes/walk_1.jpg"; break;
                    case 2: imagen.src = "./css/imagenes/walk_3.jpg"; break;
                    case 3: imagen.src = "./css/imagenes/walk_4.jpg"; break;
                }
                if (minimo <= despl_actual){
                    if (maximo>=despl_actual){
                        despl_actual = despl_actual + incremento;
                        imagen.style.left = despl_actual + "px";
                    }
                }
           }