[Sugerencia] [Como lo harian??] Ejercicio del Circulo que va y regresa | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pacman lineal</title>
</head>
<body>
    <canvas id="a" width="600" height="600"></canvas>
    <script type="text/javascript">

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

function dibujoCircunferencia(x,y,radio,x2,y2,radio2) {
                    pincel.fillStyle="blue";
                    pincel.beginPath();
                    pincel.arc(x,y,radio,0,2*Math.PI);
                    pincel.fill();

                    pincel.beginPath();
                    pincel.arc(x2,y2,radio2, 0, 2 * Math.PI, false);
                    pincel.fillStyle = "rgb(255, 255, 255)";
                    pincel.fill();
            }

            function dibujoCircunferencia2(x,y,radio,x2,y2,radio2){


/////////////////////////////// dibujamos la primera mitad de circunferencia
                    pincel.beginPath();
                    pincel.arc(x, y, radio, 0.25 * Math.PI, 1.25 * Math.PI, false);
                    pincel.fillStyle = "blue";
                    pincel.fill();
                    pincel.beginPath();
///////////////////////        digujamos la segunda mitad de circunferencia, de tal manera que al unirse las dos se pueda ver una pacman con la voca abierta con vista a la derecha        
                    pincel.arc(x, y, radio, 0.75 * Math.PI, 1.75 * Math.PI, false);
                    pincel.fill();
                    pincel.beginPath();
                    pincel.arc(x2,y2,radio2, 0, 2 * Math.PI, false);
                    pincel.fillStyle = "rgb(255, 255, 255)";
                    pincel.fill();
/////////////////////////
            } 


            function dibujoCircunferencia3(x,y,radio,x2,y2,radio2){


/////////////////////////////// dibujamos la primera mitad de circunferencia
                    pincel.beginPath();
                    pincel.arc(x, y, radio, 1.75 * Math.PI, 0.75 * Math.PI, false);
                    pincel.fillStyle = "blue";
                    pincel.fill();
                    pincel.beginPath();
///////////////////////        digujamos la segunda mitad de circunferencia, de tal manera que al unirse las dos se pueda ver una pacman con la voca abierta    con vista a la izq        
                    pincel.arc(x, y, radio, 1.25 * Math.PI, 0.25 * Math.PI, false);
                    pincel.fill();
                    pincel.beginPath();
                    pincel.arc(x2,y2,radio2, 0, 2 * Math.PI, false);
                    pincel.fillStyle = "rgb(255, 255, 255)";
                    pincel.fill();
/////////////////////////
            }    

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

            var x = 0;

            function actualizarPantalla(){

                    limpiarPantalla();
                      if (x%2==0){
                                     limpiarPantalla();
                                     dibujoCircunferencia(x,50,15 ,x,43,3);
                                      x++;
                                }else{
                                      limpiarPantalla();
                                      dibujoCircunferencia2(x,50,15  ,x,43,3);
                                      x=++;
                                }
            }        

            setInterval(actualizarPantalla,20);
    </script>


</body>
</html>

Este es el codigo donde dibuje un pacman azul(azul porque el amarillo no se veia bien por el fondo blanco, no se como cambiar el fondo) Este pacman solo va a la derecha. Mi curiosidad es como harian para que vaya a la derecha y regrese como pide el ejercicio de la clase. Trate de hacerlo...... pero........ no pude(vaya que lo intente ), Ayudenme!!! no quiero quedarme con la duda, que dificil es manejar los if´s anidados. Y_Y

Si lo analizamos, en realidad es fácil. el círculo va hasta el final, entonces cada vez que la función lo dibuja podemos preguntar si la localización ya es la ultima posible (x=maxima posible) si esto es cierto entonces debemos darle la indicación. creamos una variable "dirección" y cuando x = maximo entonces a direccion le asigamos un valor y lo mismo hacemos cuando x = mínimo (x=1). esto lo hacemos con un segundo "if" dentro de la función que dibuja el circulo. entonces quedas con dos "if". entonces ya sabemos cuando x es lo mínimo y lo máximo ahora vamos a utilizar la información .

La función que llama a limpiar el canvas y crear el círculo nuevo, siendo estas dos acciones dos funciones también, es perfecto para indicarle a nuestro programa hacia donde va la circunferencia dibujada. aqui preguntamos dentro de esta función por el valor de la variable dirección y dependiendo de su valor entonces procedemos a restar o sumar posiciones a la variable x

function dibujar{.

//aqui va su código para dibujar.

if x == 1{dirección=1}.

if x ==máximo {direccion=2}.

function limpiarCanvas{.

//aqui va su código .

function animar{.

//aqui llama las funciones de arriba. if dirección==1 {x++}.

if dirección==2{x--}.

var dirección = 1// hay que iniciarla afuera de las funciones con un valor predeterminado //aqui su setInterval.