Ya que va, que vuelva - Duda con mi código

!Para empezar tenias algunos errores en donde dentro de tus condicionales no le estabas asignando ningún comportamiento a x, te falto agregar x = x + dirección o x = x - dirección dado el caso necesario,debido a esto el circulo no se movería por que no estamos alterando el comportamiento de x, es decir no la estamos aumentando ni decrementando, también al usar el condicional if (x == 0) e if( x ==600) tu programa solo moveria el ciruculo cuando x tenga los valores específicos x = 600 y x == 0. Dándole solución al problema hagamos un ejercicio manual para entender lo que queremos hacer:

Primero definamos el problema actual, lo que necesitamos es que cuando la posición x sea menor a 600, x se incremente en 1 hasta llegar a 600 y cuando llegue a 600 x comience a disminuir en 1 hasta llegar a 0, una vez en 0 tiene que volver a aumentar en 1

Ya que entendimos el problema, analicemos las posibles soluciones si usamos los condicionales if( x <600) e if (x > 600) veamos lo que pasa.

if (x<600){ dirrección=1; x = x + direccion; }

if (x>600){ direccion = 1; x = x - direccion; }

Aquí podemos notar que el programa contiene un gran error, recordemos que los programas leen instrucciones de arriba hacia abajo, el comportamiento al llegar a 600 seria el esperado, reduciría el numero en 1, es decir nuestra x final seria 599, pero al ejecutar la siguiente instrucción en lugar de incrementarlo lo va a aumentar debido a que realizara las instrucciones contenidas dentro del if(x <600).

Para solucionar este problema yo agregue una variable nueva de tipo boolena a la que llame "sentido" y cambie el condicional lógico "if", inicie la variable en falso para indicar que el sentido va a la derecha, mientras sentido sea falso x va a aumentar en 1, después de realizar el aumento a través de otro condicional verificamos si es igual a 600, cuando sea igual a 600 va a cambiar el valor de sentido a verdadero, cuando sentido sea verdadero x va a ser disminuido en 1 y nuevamente verificaremos si es igual a 0, cuando x sea igual a 0 cambiamos el valor de sentido a falso nuevamente para que la x aumente en 1 y la bola vaya en sentido a la derecha. if (sentido == false){ x = x++ if (x == 600){ sentido = true; } }

if (sentido == true){ x--; if (x == 0){ sentido = false; } }

también te recomiendo no olvides usar los ";" (punto y coma) practicar el uso te sera de mucha ayuda mas adelante.

Te dejo mi numero de whats por cualquier duda 2225273110, solo dime tu nombre y que eres de alura para que te identifique.

En la siguiente respuesta esta el código ya que aquí ya no cupo.

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

<script>

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

pincel.fillStyle = "lightgrey";  // es una propiedad o característica no una función
pincel.fillRect(0,0,600,400); //es una funcion a la que le paso parámetros

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

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

var x=0;
var sentido = false;//identificador de direccion de vuelta
//si el indicador es falso el sentido sera hacia la derecha
//si es positivo el sentido sera opuesto
// lo iniciamos en falso por que sabemos que x vale 0 y tiene que aumentar para llegar a 600, cuando x llegue a 600 lo volveremos verdadero para saber que ya dio una vuelta y tiene que decrementar para volver a llegar a 0

function actualizarPantalla(){

    borrarPantalla();
    dibujarCircunferencia(x,20,10);


    if (sentido == false){ // comprobamos que el sentido sea a la derecha
        x++; //al ser verdad aumentamos en 1 x
        console.log(x);} //te recomiendo usar este tipo de impresiones de consola para ver el funcionamiento de tu progama.
        if (x == 600){
            sentido = true; // si x llega 600 cambiamos el indicador, para cambiar el sentido

    }


    if (sentido == true){ // comprobamos que el sentido sea a la izquierda 
        x--;
        console.log(x);
        if (x == 0){ 
            sentido = false;// cuando x llegue a 0 nuevamente cambiamos el indicador para volver a cambiar el sentido
        }
    }

}

setInterval(actualizarPantalla,50);

</script>

Muchísimas gracias Francisco por tu tiempo. Tu explicación y desarrollo fue de gran ayuda para mi! Quiero destacar tu gesto! Quise enviarte un msj por Whats pero quizás el nro. que me pasaste está mal. te dejo el mío si no te molesta para que me escribas así puedo agendarte y seguir molestándote :) +54 3541 660602

Hola coincido con Clara, gran explicación y desarrollo de Francisco, gracias por tomarte el tiempo de asistirnos. Saludos cordiales