1

me estoy iniciando en Javascript y pretendia hacer que el cuadrado pequeño (#animate) recorriera el borde interior de #container. Se me ocurrió al ver un ejemplo de W3schools.com (https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3) pero no pude conseguirlo. Luego intente hacerlo utilizando switch pero por alguna razón no me funciona. El código es el siguiente:

function myMove(){
    var elem = document.getElementById("animate");  

    //var id = setInterval(frame, 5);
    var inicio = 0;
    var movimiento =0;
 
    while (inicio == 0){      

        switch(movimiento){
        case 0:
            for(var i = 0; i >= 350; i++){
                elem.style.top = i + "px";
            }
            movimiento = 1;
        break;
        case 1:
            for(var i = 0; i == 350; i++){
                elem.style.left = i + "px"; 
            }
            movimiento = 2;
        break;
        case 2:
            for(var i = 350; i ==0; i--){
                elem.style.top = i + "px";
            }
            movimiento = 3;
        break;
        case 3:
            for(var i = 350; i ==0; i--){
                elem.style.left = i + "px";
            }
            movimiento = 4;
        break;
        case 4:
            break;
        }



        if (movimiento == 4) {
            inicio = 1;
        }

    } 
    
}
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

1
  • Las condiciones de tus bucles no se cumplen nunca, por lo que no se ejecuta su cuerpo más que una vez, con i valiendo cero Commented el 10 jul. 2020 a las 21:41

2 respuestas 2

1

Hola si entendí bien la animación que intentas conseguir es la siguiente:

  1. arriba izquierda -> abajo izquierda.
  2. abajo izquierda -> abajo derecha.
  3. abajo derecha -> arriba derecha.
  4. arriba derecha -> arriba izquierda.

El primer problema que hay en el código son los operadores, deberían ser: <=, <=, >=, >= respectivamente.

El segundo problema es que aunque se ejecute correctamente se estaría ejecutando todo en el mismo momento, es por eso que en la doc de w3schools usa un setInterval.

En vez de usar bucles propongo lo siguiente:

<html>
  <head>
    <style>
      #container {
        width: 400px;
        height: 400px;
        position: relative;
        background: yellow;
      }
      #animate {
        width: 50px;
        height: 50px;
        position: absolute;
        background-color: red;
      }
    </style>
    <script>
      var moviendo = false;
      function myMove() {
        if (moviendo) return;
        moviendo = true;
        var elem = document.getElementById("animate");
        var id = setInterval(frame, 5);
        var inicio = 0;
        var movimiento = 0;
        var i = 0;

        function frame() {
          switch (movimiento) {
            case 0:
              if (i < 350) {
                i++;
                elem.style.top = i + "px";
              } else {
                i = 0;
                movimiento = 1;
              }
              break;
            case 1:
              if (i < 350) {
                i++;
                elem.style.left = i + "px";
              } else {
                i = 350;
                movimiento = 2;
              }
              break;
            case 2:
              if (i > 0) {
                i--;
                elem.style.top = i + "px";
              } else {
                i = 350;
                movimiento = 3;
              }
              break;
            case 3:
              if (i > 0) {
                i--;
                elem.style.left = i + "px";
              } else {
                movimiento = 4;
              }
              break;
            case 4:
              break;
          }

          if (movimiento == 4) {
            clearInterval(id);
            moviendo = false;
            inicio = 1;
          }
        }
      }
    </script>
  </head>
  <body>
    <p><button onclick="myMove()">Click Me</button></p>

    <div id="container">
      <div id="animate"></div>
    </div>
  </body>
</html>

Espero que te sirva!

1

Funcionamiento básico de un ciclo for:

for(inicio, condición, acción)

Done:

  • inicio: Es una expresión generalmente usada para crear o inicializar un contador, aunque no es un requisito.
  • condición: Se evaluará en cada iteración y continuará dentro del ciclo mientras el resultado sea verdadero, terminando cuando sea falso.
  • acción: Es una expresión o sentencia que se ejecuta al final de cada iteración y, por lo general, se usa para incrementar el contador.

Entonces, como bien te comentó @PabloLozano, tus condiciones nunca se cumplen:

        for(var i = 0; i >= 350; i++){
            elem.style.top = i + "px";
        }
  • inicio: Creas un contador con valor cero, está bien
  • condición: Especificas que el ciclo se ejecute mientras i sea mayor o igual que 350, pero inicializaste la variable en cero y, desde la primera evaluación, el resultado es falso; debería ser i <=350 para que el ciclo se ejecute hasta que la variable llegue a ese valor.
  • acción: Incrementas el contador, también es correcto

Solución: Revisa y corrige las condiciones de los ciclos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.