ya que va, que vuelva | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

2
respuestas

por Carlos Alberto Bravo Olan

| 51.8k xp | 37 posts

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");        
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400); 

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

    function limpiarPantalla(){

        pincel.clearRect(0,0,600,400);

    }

    var x = 0
    var xmax = 600;


    function actualizarPantalla(){

        limpiarPantalla();
        disenharCircunferencia(x,20,10);
        if (x <= xmax) {x++;}
        if (x > xmax-1) {xmax =0;}
        if (xmax <= x ) {x--;}
        if (x==0) {xmax=600;}
        console.log (x);
    }

    setInterval(actualizarPantalla,5);

</script>

2 respuestas

por Andrés Bonfil Tapia

| 73.2k xp | 11 posts

Soporte Técnico

10/04/2023

<body>
    <canvas width="600" height="400"></canvas>
    <a href="relog.html">Ver relog</a>
</body>
<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    function disenharCircunferencia(x,y,radio){
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();//recive 5 params
    }
    function limpiarPantalla(){
        pincel.clearRect(0,0,600,400);
        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0,0,600,400); //Aquí lo vuelve a crear
    }
    var x = 10;
    var right = true;

    function actualizarPantalla(){
        limpiarPantalla();
        disenharCircunferencia(x,20,10);
        if(x>=10 && x<=590 && right){
            x++
            if(x==590){ right = false }
        }else{
            x--;
            if(x==10){ right = true }
        }
    }

    setInterval(actualizarPantalla, 10);
</script>

por Neyberson Didi Atencio Oñate

| 121.3k xp | 6 posts

11/04/2023

Hola, interesante aporte de ambos, sin embargo anexo una solución que creo que es más sencilla de comprender y cumple con lo requerido:

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

<script>

    let pantalla = document.querySelector("canvas");
    let pincel = pantalla.getContext("2d");
    pincel.fillStyle="lightgrey";
    pincel.fillRect(0,0,600,400);

//FUNCIONES
    function disenharCircunferencia(x,y,radio) {
        pincel.fillStyle="blue";
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
    }

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

    let x=0;
    let sentido=true
    function actualizarPantalla() {
        limpiarPantalla();
        disenharCircunferencia(x,20,10);
        if (x<600 && sentido){
            x++;
            sentido=true;
        }
        if (x==600){sentido=false}
        if (sentido==false){x--;}
        if (x==0&&sentido==false){sentido=true;}
    }

//ACTIVANDO 
    setInterval(actualizarPantalla,5);

</script>