Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

¿Cómo puedo detener un setInterval o modificar su velocidad?

Hola!! Quise experimentar modificando la velocidad del blanco a medida que el usuario va acertando. Tuve dos ideas inicialmente:

Opción 1: Modificar la velocidad mediante una variable:

<canvas width="600" height="400"></canvas>

<script>

    var lienzo = document.querySelector("canvas");
    var pincel = lienzo.getContext("2d");
    var rX = Math.round((Math.random()*500)+40);
    var rY = Math.round((Math.random()*300)+40);
    var radio = 10;
    var velocidad = 1000;

    pincel.fillStyle = "Black";
    pincel.fillRect(0,0,600,400);



    function dibujarCirculo(x,y,radio,color)
    {
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
    }

    function limpiar()
    {
        pincel.clearRect(0,0,600,400);
        pincel.fillStyle = "black";
        pincel.fillRect(0,0,600,400);
        rX = Math.round((Math.random()*500)+50);
        rY = Math.round((Math.random()*300)+50);

    }

    function avanzar()
    {
        limpiar();
        dibujarCirculo(rX,rY,radio + 20,"red");
        dibujarCirculo(rX,rY,radio + 10,"white");
        dibujarCirculo(rX,rY,radio,"red");

    }

    function disparar(medidas)
    {
        var x = medidas.pageX - lienzo.offsetLeft;
        var y = medidas.pageY - lienzo.offsetTop;

        if((x > rX - radio)&&( x < rX + radio)&&(y < rY + radio)&&(y > rY - radio))
        {
            alert("Excelente, ahora intentalo con más velocidad");
            velocidad -= 50;
        }
    }

    setInterval(avanzar,velocidad);

    lienzo.onclick = disparar;

</script>

Pero veo que no funciona ya que set Interval está ejecutando la acción primero que disparar, entonces no se puede modificar de esta manera.

Opcion 2: Detener el setInterval e inicializarlo con otra velocidad.

Esta opción puede ser más viable pero no sé si exista algun comando o método para detener esta función.

Alguien me podría indicar qué paso puedo desarrollar? Muchas gracias

1 respuesta
solución!

Hola Santiago! Sí, podés detener el setInterval() con clearInterval().

Cuando llamás a setInterval(), éste, además de hacer su función, devuelve un valor de retorno con su ID. Luego, podés detenerlo llamando a clearInterval con el ID como argumento.

Te pongo un ejemplo para ser más claro:

var id_interval = setInterval(avanzar,velocidad);

clearInterval(id_interval);

La última parte de tu código podría ser así:

    function disparar(medidas)
    {
        var x = medidas.pageX - lienzo.offsetLeft;
        var y = medidas.pageY - lienzo.offsetTop;

        if((x > rX - radio)&&( x < rX + radio)&&(y < rY + radio)&&(y > rY - radio))
        {
            alert("Excelente, ahora intentalo con más velocidad");
            velocidad -= 50;

            clearInterval(interval_id);
            interval_id = setInterval(avanzar, velocidad);
        }
    }

    var interval_id = setInterval(avanzar,velocidad);
    lienzo.onclick = disparar;