Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: nm en 22 de Febrero 2015, 13:20

Título: Cambiar imagen en movimiento mediante switch case JavaScript
Publicado por: nm en 22 de Febrero 2015, 13:20
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?

Código: [Seleccionar]

        <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";
                    }
                }
           }
Título: Re:Cambiar imagen en movimiento mediante switch case
Publicado por: Alex Rodríguez en 22 de Febrero 2015, 14:59
Hola, te recomiendo que consultes este curso: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Para hacer evolucionar la imagen no veo cómo haces evolucionar la x, es decir, en cada llamada a la función practicas() tendrías que hacer que el valor de la x vaya cambiando, el código podría ser algo como esto:

 function practicas( )
            {
            if (x<3){x=x+1;}else{x=0;}

Si no haces que el valor de la x vaya cambiando, siempre se te mostrará la misma imagen... porque la x siempre tendrá el mismo valor y en el switch siempre tomará el mismo camino.

Saludos
Título: Re:Cambiar imagen en movimiento mediante switch case JavaScript
Publicado por: nm en 22 de Febrero 2015, 15:20
Hola Alex,
muchas gracias por responder tan rápido. Efectivamente, el problema que tenía era que aún haciendo uso de switch case sabía que los valores no estaban variando pero no sabía cómo conseguir que x fuera variando y así conseguir que las imágenes fueran cambiando. Con el código que me has puesto de ejemplo ya funciona a la perfección.
Ah, y gracias por recomendarme el curso. Lo iré revisando para poder reforzar los conocimientos según avancemos en clase.
Saludos  :)