0

Necesito hacer estos dos efectos en mi código:

  1. Los caballos en vez de desplazarse directamente 20px, se desplaza con un efecto animate.

  2. Al llegar el primer caballo al extremo derecho de la pantalla, los otros desaparecen con un efecto.

Solo sé hacerlo con el 20px. ¿Podéis decirme cómo sería?

Lo estoy haciendo con librería de jQuery, no es nativo. Éste es mi código:

//Efecto para los caballos.
$(document).ready(function() {
  $("div#carrera").fadeOut(0);
  $("div#carrera").fadeIn(1000);
});

function jugar() {
  var aleatorio = Math.floor(Math.random() * 7);
  var pos = parseInt(document.getElementById("caballo" + aleatorio).style.left) + 20;
  document.getElementById("caballo" + aleatorio).style.left = pos + "px";
  if (pos >= window.innerWidth - 50) {
    if (elegir.value == "caballo" + aleatorio) {
      alert("El caballo ganador es: " + aleatorio + " ¡WINNER!");
      aciertos.value = parseInt(aciertos.value) + 1;
    } else {
      alert("El caballo ganador es: " + aleatorio + " ¡LOSER!");
      fallos.value = parseInt(fallos.value) + 1;
    }
    elegir.disabled = false;
    boton.disabled = false;
  } else
    setTimeout(jugar, 10);
}


function comienzo() {
  elegir.disabled = true;
  boton.disabled = true;
  resultado.innerHTML = "";
  for (var i = 0; i < 7; i++)
    document.getElementById("caballo" + i).style.left = "50px";
  jugar();
}

function iniciar() {
  for (var i = 0; i < 7; i++)
    carrera.innerHTML += "<IMG id='caballo" + i + "' src='caballo" + i + ".png' style='position: absolute; left: 50px; top:" + parseInt(100 + i * 50) + "px;'>";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onLoad="iniciar()">
  Aciertos: <input type="text" id="aciertos" value="0" readonly size="1"><br> Fallos: <input type="text" id="fallos" value="0" readonly size="1"><br><br> Elige apuesta:
  <select id="elegir">
    <option value='caballo0'>Caballo negro</option>
    <option value='caballo1'>Caballo amarillo</option>
    <option value='caballo2'>Caballo gris</option>
    <option value='caballo3'>Caballo naranja</option>
    <option value='caballo4'>Caballo rosa</option>
    <option value='caballo5'>Caballo rojo</option>
    <option value='caballo6'>Caballo verde</option>
  </select>
  <input type="button" id="boton" value="¡JUGAR!" onClick="comienzo()">
  <div id="resultado"></div>
  <div id="carrera"></div>

</body>

8
  • Buenas tardes Rebeca, tu pregunta es valida, pero debes asegurarte de ponernos todo tu codigo en texto y no una parte en imagenes, puesto que nosotros no podemos copiar el texto de las imagenes, considera editar la pregunta y ponernos esa misma imagen pero en texto (copiar y pegar ese codigo en la pregunta), en vez de ponernos la imagen.
    – Layer
    el 7 jun. 2020 a las 21:18
  • ya está corregido :)
    – Rebeca
    el 7 jun. 2020 a las 21:40
  • Seguramente vas a tener que cambiar un poco el código si no quieres que se vea a saltos. Tal y como está ahora, se están realizando operaciones cada muy poco tiempo (10 milisegundos) y el tiempo de refresco de las pantallas suele ser alrededor de 16 milisegundos (60Hz), por lo que vas a estar haciendo cambios antes de que le de tiempo a refrescar. Casi sería mejor realizar todos los cálculos de golpe y entonces animar todos los caballos a la vez dándoles un tiempo similar. De ese modo, no se verían saltos en la animación. Y si le das diferentes funciones de easing, no sería obvio quién ganará.
    – Alvaro Montoro
    el 7 jun. 2020 a las 23:33
  • No quiero eso, no sé si es que no me explicado bien en el ejercicio.. Necesito un efecto animate para el desplazamiento de los caballoz en vez de usar (px) y un efecto que cuando lleguen al extremo,los que han perdido desaparezcan.
    – Rebeca
    el 7 jun. 2020 a las 23:37
  • Puedes usar animate pero la animación no se va a ver por lo que mencionaba en el otro comentario: le tendrías que poner un tiempo igual o menor que el del timeout que es menor que el tiempo de refresco de la pantalla. Aparte de eso, hacer que el resto de caballos desaparezca es sencillo porque animate tiene una función que se llama al terminar la animación. ¿Qué problemas estás encontrando al usar animate?
    – Alvaro Montoro
    el 8 jun. 2020 a las 0:00

1 respuesta 1

0

Pensando en no complicar tanto las animaciones, el atributo transition de CSS puede ser útil, solo inicializa la propiedad sobre la que se aplicará. Agrega la clase al crear cada caballo en iniciar().

.caballos {
  left:50px;  // <-- Esta propiedad es la que se va a animar
  transition:all 0.2s ease; // <-- propiedad duración tipo-efecto
}

Para agilizar un poco la carrera, en lugar de solo avanzar un caballo, que todos se muevan al mismo tiempo, pero con diferente "velocidad", creando un ciclo para seleccionar al azar el desplazamiento de cada uno y analizando si hay ganador en cada iteración:

//Efecto para los caballos.
$(document).ready(function() {
  $("div#carrera").fadeOut(0);
  $("div#carrera").fadeIn(1000);
});

function jugar() {
    let fin = false;
    for(let i = 0; i < 7; i++) {
        let caballo = document.querySelector('#caballo' + i);
        let pos = parseInt(caballo.style.left) + (Math.random() * 20);
        caballo.style.left = pos + 'px';
        if(pos >= window.innerWidth - 50) {
            fin = true;
            if(elegir.value == 'caballo' + i) {
                alert("El caballo ganador es: " + i + " ¡WINNER!");
                aciertos.value = parseInt(aciertos.value) + 1;
            } else {
                alert("El caballo ganador es: " + i + " ¡LOSER!");
                fallos.value = parseInt(fallos.value) + 1;
            }
            elegir.disabled = false;
            boton.disabled = false;
            // Evitar más mensajes
            break;
        }
    }
    if(!fin)
        setTimeout(jugar, 20);
}


function comienzo() {
  elegir.disabled = true;
  boton.disabled = true;
  resultado.innerHTML = "";
  for (var i = 0; i < 7; i++) {
      document.getElementById("caballo" + i).style.left = "50px";
  }
  // Pausa para ejecutar hasta que los caballos regresen a su posición
  // Sí, la transición también aplica aquí
  setTimeout(jugar, 500);
}

function iniciar() {
  for (var i = 0; i < 7; i++)
    carrera.innerHTML += "<IMG id='caballo" + i + "' src='caballo" + i + ".png' style='position: absolute; left: 50px; top:" + parseInt(100 + i * 50) + "px;' class='caballos'>";
}
.caballos {
  left:50px;
  transition:all 0.2s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onLoad="iniciar()">
  Aciertos: <input type="text" id="aciertos" value="0" readonly size="1"><br> Fallos: <input type="text" id="fallos" value="0" readonly size="1"><br><br> Elige apuesta:
  <select id="elegir">
    <option value='caballo0'>Caballo negro</option>
    <option value='caballo1'>Caballo amarillo</option>
    <option value='caballo2'>Caballo gris</option>
    <option value='caballo3'>Caballo naranja</option>
    <option value='caballo4'>Caballo rosa</option>
    <option value='caballo5'>Caballo rojo</option>
    <option value='caballo6'>Caballo verde</option>
  </select>
  <input type="button" id="boton" value="¡JUGAR!" onClick="comienzo()">
  <div id="resultado"></div>
  <div id="carrera"></div>

</body>

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.