Autor Tema: Cambiar imagen en movimiento mediante switch case JavaScript  (Leído 4071 veces)

nm

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 13
    • Ver Perfil
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";
                    }
                }
           }
« Última modificación: 22 de Febrero 2015, 15:32 por nm »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Cambiar imagen en movimiento mediante switch case
« Respuesta #1 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

nm

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 13
    • Ver Perfil
Re:Cambiar imagen en movimiento mediante switch case JavaScript
« Respuesta #2 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  :)

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".