Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Ejercicio Circulo cambio Color

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 Juan Esteban Garibello Giraldo
| 118.5k xp | 33 posts
A.P.H

Ejercicio

Ahora que ya recapitulamos lo que hicimos en este capítulo, tengo una propuesta de alteración del código de arriba con el objetivo que apliques los conocimientos adquiridos hasta aquí, lo más importante es que desarrolles tu lógica de programación. Intenta resolverlo y de todas maneras puedes ver la solución del ejercicio haciendo clic en el botón Ver opinión del instructor.

Bueno el desafío es el siguiente, vamos a liberar que el usuario pueda alterar el color de los círculos que son diseñados en la pantalla. Los colores que liberaremos serán azul, rojo y verde (blue, red y green). Esa lista de colores te debe recordar algo que ya vimos, los arrays en el anterior curso.

¿Cómo dejaremos al usuario escoger el color? A cada clic del botón DERECHO del mouse, el color padrón que es blue, deberá cambiarse a red. Si el usuario realiza otro clic del botón DERECHO, el color del círculo se cambiará a green, debes respetar el orden de alteración de los colores (blue, red y green). En caso de que el usuario vuelva a presionar el botón DERECHO el color debe volver a ser blue.

Para que las circunferencias aparezcan seguimos manteniendo la misma lógica, ellas aparecerán con cada clic IZQUIERDO del mouse.

La instrucción para capturar el evento cuando el usuario hace clic en el botón derecho todavía no fue enseñada, pero es fácil de ser implementada, el comando a ser usado es oncontextmenu. La sintaxis es igual al evento onclick que usamos para capturar el clic del botón izquierdo del mouse, de todas formas te muestro a continuación cómo puedes usar esa instrucción:

1 respuesta
solución!
por Juan Esteban Garibello Giraldo
| 118.5k xp | 33 posts
A.P.H 
<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 colores = ["blue", "red", "green"];
    var indiceColorActual = 0; // comienza con blue

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

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
       indiceColorActual++;
       if (indiceColorActual >= 2)
       {
        indiceColorActual= 0;
       }
       alert(indiceColorActual);
       return false; //menú contextual padrón de `canvas` no sea exhibido
    }

    pantalla.oncontextmenu = alterarColor;

</script>

Aunque me funcionó el instructor capta el indice de la manera .length que me parece mejor, pero bueno, pa eso estamos pa aprender.