Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

No regresa al color azul

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Interactuando con el usuario y actividad Cambiando de color

por Anthony Montero Vargas
| 52.6k xp | 4 posts

Hola, no se cual es el error. no logro que al hacer click derecho después del color verde regrese nuevamente al azul. les agradezco su ayuda.

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

<script>

          var pantalla = document.querySelector("canvas");
           var pincel = pantalla.getContext("2d");
           var colores = ["blue","red","green"];
          var ColorActual = 0;



          pincel.fillStyle = "grey"; 
           pincel.fillRect(0,0,600,400);

          function exibiralerta(evento){
             var x = evento.pageX - pantalla.offsetLeft;
             var y = evento.pageY - pantalla.offsetTop;
             console.log(evento);
             alert(x + " , " + y);
         }  

         function dibujarCirculo(evento){
             var x = evento.pageX - pantalla.offsetLeft;
             var y = evento.pageY - pantalla.offsetTop;

             pincel.fillStyle = colores[ColorActual];
             pincel.beginPath();
             pincel.arc(x,y,10,0,2*3.14);
             pincel.fill();

             console.log(x + " , " + y);  
         }  

        // pantalla.onclick = exibiralerta;
        pantalla.onclick = dibujarCirculo;


        function alterarColor(){
           ColorActual++;
           if (ColorActual >= colores.lenght) {
           ColorActual = 0;
         }
           return false;
        }

           pantalla.oncontextmenu = alterarColor;

</script>
3 respuestas
solución!
por Estudiante
| 42.3k xp | 14 posts

Hola Anthony espero estés bien! Corregí tu función :]

Problemas en tu codigo:

1_ Tenias tu acumulador "ColorActual++" fuera de tu if cuando este debería estar dentro.

2_ Tu if tiene una condición mal planteada y nunca se ejecuta al momento de llamar a la función. La condición debió haber sido "ColorActual <..." y no ">=".

2a_ Tu if no se ejecuta pero pareciera que si, porque tu contador esta por fuera, entonces el cambio de color se produce de todas formas, pero no vuelve a 0.

3_ Tu array "Colores" contiene 3 elementos en total , los elementos se listan en este orden [0,1,2] pero haciendo Colores.length a vos te devuelve el contenido total del array, que son 3 elementos, por ende, vos vas a pasar 2 veces por el ultimo color antes de volver al primero (colorActual = 0 < colores.Length = 3)... para solucionar esto se resta "1" a colores.length dentro de tu condición. Al final te queda crear el "else" que pasa a ejecutarse cuando se deje de cumplir la condición, reseteando colorActual a "0" de nuevo.

Te deje 2 alerts para que veas el recorrido de ColorActual.

function alterarColor() {

    if (ColorActual < (colores.length - 1)) {
        ColorActual++;
        alert(ColorActual);
    }else{
        ColorActual = 0;
        alert(ColorActual);
    }
    return false;
}

No olvides marcarme como solución si mi respuesta te fue de ayuda :] Saludos!!

por Anthony Montero Vargas
| 52.6k xp | 4 posts

Hola Martín, muchas gracias por la ayuda. Me quedó muy claro con esa explicación. Saludos.

por Germán Guillermo Pappalardo
| 118.2k xp | 18 posts
it manager

Anthony, tu planteo estaba bien como lo escribiste y funciona, el error que veo es que no tenes bien identado el código, te pego como lo tengo yo y esta funcionando...y tenes mal escrito colores.length...me ha pasado muchas veces de invertir las letras finales y que quede ght en vez de gth...

function alterarColor() {
        indiceColorActual++;
        if(indiceColorActual>=colores.length){
            indiceColorActual = 0;
        }
        alert(colores[indiceColorActual]);
        return false;
    }

Lo único que cambié al final es en el alert donde en vez que me muestre un numero del array, directamente me diga el color seleccionado antes de dibujarlo, pero eso no se pedía en el ejercicio, fue una elección personal..saludos y espero haberte ayudado!