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
2
respuestas

Problema Resuelto

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Nuestro primer juego y actividad Diseñando con el mouse

por Carlos Alberto Carranza Valiente
| 45.6k xp | 37 posts
Maestro de informática

Ufff... esto si me llevo un rato pensarlo, si alguien le sirve....

<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);


        pincel.fillStyle = "blue";
        pincel.fillRect(0,0,50,50);
        pincel.fillStyle = "red";
        pincel.fillRect(50,0,50,50);
        pincel.fillStyle = "green";
        pincel.fillRect(100,0,50,50);

    var puedoDibujar = false;


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

        if((x>=0) && (x<=50) && (y>=0) && (y<=50)){
            pincel.fillStyle = "blue";
            //alert("blue");
        }
        if((x>50) && (x<=100) && (y>=0) && (y<=50)){
            pincel.fillStyle = "red";
            //alert("red");
        }
        if((x>100) && (x<=150) && (y>=0) && (y<=50)){
            pincel.fillStyle = "green";
            //alert("green");
        }
    }

    function dibujarCirculo(evento) {

        if(puedoDibujar) {

            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;

            if((x>=0) && (x<=150) && (y>=0) && (y<=50)){

                    deshabilitarDibujar();
                }            
            else {
                    pincel.fillStyle = seleccionarColor;
                    pincel.beginPath();
                    pincel.arc(x, y, 5, 0, 2 * 3.14);
                    pincel.fill();
                }
        }

    }

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onclick = seleccionarColor;
    pantalla.onmousemove = dibujarCirculo;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;

</script>
2 respuestas
por Roosveth Yamith Yate Madrigal
| 75.8k xp | 18 posts

Hola amigo!

Me sorprendió mucho que tu lógica quedó casi que igual a la mía, pensé por un momento que lo estaba haciendo por el camino mas largo pero el del instructor era todavía más largo.

Quería comentarte que gracias a tu código pude resolver la ultima parte del reto, de restringir la paleta de colores, sin embargo, me di cuenta que cuando se esta dibujando con el mouse y se pasa por encima de la paleta de color todavía alcanza a dibujar sobre el área restricta la mitad del circulo.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Aquí te dejo la parte como lo solucioné, de pronto te sirve. Solo hay que sumarle el valor del radio a los límites del área restricta dentro de la función "dibujarCirculo" para que no se dibuje esa parte.

function dibujarCirculo(evento,color,radio) {
var radio = 10;

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

        if((x < 150 + radio) && (y < 50 + radio)){
            deshabilitarDibujar();
        } else {
        pincel.fillStyle = colores[indiceColorActual];
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2 * 3.14);
        pincel.fill();
        }
    }
}
por Estudiante
| 34.8k xp | 19 posts

Muy bien!!, ahora la pregunta es. Si el requerimiento del usuario es una paleta de 30 colores, repetirias todas esas lineas de código por cada color o intentarias hacerlo de una forma diferente? .