Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
7
respuestas

vuelta completa de la pelota con contador de vueltas y cambios de color de fondo y pelota

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

<script>
    function dibujarCanvas(){
        pincel.fillStyle = colorCanvas[marcadorCanvas];
        pincel.strokeStyle = "black";
        pincel.fillRect(0,0,800,600);
        pincel.strokeRect(0,0,800,600);
    }

    function dibujarCirculo(x,y,radio){
        pincel.fillStyle = colorCirculo[marcadorCirculo];
        pincel.strokeStyle = "black";
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
        pincel.stroke();
    }

    function limpiarPantalla(){
        pincel.clearRect(0,0,800,600);
        dibujarCanvas();
    }

    function escribitTexto(frase){
        pincel.font = "70px Georgia";
        pincel.fillStyle = "white";
        pincel.strokeStyle = "black";
        pincel.fillText(frase,100,300);
        pincel.strokeText(frase,100,300);
    }

    function alternarColorCirculo(){
        marcadorCirculo ++;
        if (marcadorCirculo==colorCirculo.length){
            marcadorCirculo=0;
        }
        return false;
    }

    function alternarColorCanvas(){
        marcadorCanvas ++;
        if (marcadorCanvas==colorCanvas.length){
            marcadorCanvas=0;
        }
        return false;
    }

    function actualizarPantalla(){
        limpiarPantalla();
        dibujarCirculo(x,y,radio);
        escribitTexto(contadorVueltas + texto);

        if(banderaX){
            x++;
            if(x==limiteX){
                banderaX=false;
                banderaY=true;
            }
        }
        if(banderaY){
            y++;
            if(y==limiteY){
                banderaY=false;
                banderaXflip=true;
            }
        }
        if(banderaXflip){
            x = x - 1;
            if(x==radio){
                banderaXflip=false;
                banderaYflip=true;
            }
        }
        if(banderaYflip){
            y = y - 1;
            if(y==radio){
                banderaYflip=false;
                banderaX=true;
                contadorVueltas++;
            }
        }
    }

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    var radio = 90;
    var texto = " vueltas completas";
    var colorCirculo = ["blue","red","green","purple"];
    var colorCanvas = ["orange","lightgrey","lightblue","pink"];

    var x = 1 * radio;
    var y = 1 * radio;
    var limiteX = 800 - radio;
    var limiteY = 600 - radio;

    var marcadorCanvas = 0;
    var marcadorCirculo = 0;
    var contadorVueltas = 0;

    var banderaX = true;
    var banderaY = false;
    var banderaXflip = false;
    var banderaYflip = false;

    setInterval(actualizarPantalla,5);
    pantalla.onclick = alternarColorCanvas;
    pantalla.oncontextmenu = alternarColorCirculo;

</script>
7 respuestas

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Ojala le sirva a alguien con dudas o con ganas de agregar cosas a la animación. Use solo lo enseñado en el curso, ni mas ni menos, ya que no tengo conocimientos avanzados en el tema.

super bien Mari, gracias por el aporte a la comunidad, pues funciones en Javascript ya es un tema intermedio!

si quieres ir un poco más allá puedes refactorizar usa do operador ternario para reducir la expresiones if a una linea de código, peor no es obligatorio

como seria un operador ternario? me encantaria mejorar asi que es mas que bienvenido tu consejo. hay posibilidad de que me pases algun ejemplo por favor?

var edad = 20; var estado = (edad >= 18) ? "mayor de edad" : "menor de edad";

ese es un ejemplo de operador ternario, en pocas palabras es un if más pequeñito. Lo que esta despues del signo "?" es la caso sea true la condicion, despues del ":" se encuentra el caso si la condicion es false

asi resolvi ese bucle con sus aportes, el incremento del contadorVueltas me daba error asi que ese lo deje como estaba, cuando sepa bien la estructura del operador ternario mejorare esa parte.

<script>
function actualizarPantalla(){
        limpiarPantalla();
        dibujarCirculo(x,y,radio);
        escribitTexto(contadorVueltas + texto);

        if(banderaX){
            x++;
            banderaX = (x == limiteX) ? false : true;
            banderaY = (x == limiteX) ? true : false;
        }
        if(banderaY){
            y++;
            banderaY = (y == limiteY) ? false : true;
            banderaXflip = (y==limiteY) ? true : false;
        }
        if(banderaXflip){
            x = x - 1;
            banderaXflip = (x==radio) ? false : true;
            banderaYflip = (x==radio) ? true : false;
        }
        if(banderaYflip){
            y = y - 1;
            banderaYflip = (y==radio) ? false : true;
            banderaX = (y==radio) ? true  : false;
            if(y==radio){contadorVueltas++;}
        }
    }
    </script>

Si Mari,

la funcion limpiar pantalla con operador ternario ( funcion ? return : return if false)

function limpiarPantalla(){ return pincel.clearRect ? (pincel.clearRect(0,0,800,600), dibujarCanvas()) : null; }

queda así