[Duda] No cambian los colores! | Lógica de programación: Practicando con juegos y animaciones

Hola! Intenté hacerlo de esta forma y solo entra el color rojo, no entiendo por qué. Alguien sabe que sucede con mi código?

Gracias por su atención.

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

<script>

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

    function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;    
        pincel.fillStyle = alterarColor;
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        var x = 0;
        while (x < 3) {
            if(x=0) {
                pincel.fillStyle = "blue";
                x = x + 1;
                console.log("azul")
                break;
            }
            if(x=1) {
                pincel.fillStyle = "red";
                x = x + 1;                
                console.log("rojo")
                break;
            }
            if(x=2) {
                pincel.fillStyle = "green";
                x=0;
                console.log("verde")
                break;
            }
        }
    }

    pantalla.oncontextmenu = alterarColor;

</script>

¡Hola, compañera! (oﾟvﾟ)ノ

Lo que puedo notar en tú código es lo siguiente:

→ Los colores cambian haciendo click derecho y el círculo se dibuja haciendo click izquierdo. → Los clicks asociados a la variable "x" son los click derechos. → Tienes 2 variables nombradas "x*", cambiarlas de nombre facilitaría su lectura. → No hay un contador donde se acumulen los clicks, como inicializas en 0 cuando el click ocurre le suma 1 entonces se va al caso descrito en *if(x=1) que corresponde al color rojo. → Veo que tomaste la opción de anidar un while y varios if en lugar de definir un array.

Siguiendo la idea de tu estructura dí con esto:

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400);
    // ***
    var iX = 1;

    function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;    
        pincel.fillStyle = alterarColor;
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        if (iX <= 3) {
            switch(iX) {
            case 1 :
                pincel.fillStyle = "blue";
                iX++;
                console.log("azul")
                break;

            case 2 :
                pincel.fillStyle = "red";
                 iX++;                
                console.log("rojo")
                break;

            case 3 :
                pincel.fillStyle = "green";
                 iX++;
                console.log("verde")
                break;
            }
        }

        else {

        iX=1;

        }
    }




    pantalla.oncontextmenu = alterarColor;




</script>

→ Definí un contador "iX" que ayudará a almacenar los clicks para que pueda saltar de casos. → Al ser varios ifs anidados opté por una estructura switch para saltar de casos de acuerdo al valor almacenado en clicks. El contador está inicializado en 1, por lo tanto el primer click se asociará al valor 1 asignado al caso 1 en nuestra estructura switch. → A la estructura switch la condicioné con un if si el número de clicks es mayor a nuestro número de casos (3) entonces se reiniciará en un else a 1 nuevamente para poder seguir dibujando círculos.

Un array definitivamente haría este ejemplo más compacto aunque el explorar estructuras es interesante.

Espero te sea útil.

Cualquier retroalimentación es bienvenida (～￣▽￣)～