[Duda] Ayuda!! | Lógica de programación: Practicando con juegos y animaciones

Solucionado (ver solución)

Solucionado
(ver solución)

2
respuestas

por Edgar Paul Moreno Osuna

| 31.6k xp | 10 posts

<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= "red";  
    pincel.fillRect(0,0,50,50);
    pincel.fillStyle= "green";  
    pincel.fillRect(50,0,50,50);
    pincel.fillStyle= "blue";  
    pincel.fillRect(100,0,50,50);

    var puedoDibujar = false;
    var color;


    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }

    }


    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    function rojo(evento){

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

        if ((x < 50 ) && 
            (x > 0) &&
            (y < 50) &&
            (y > 0) ) {
            color="red"
        }


    }

    function verde(evento){

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

        if ((x < 100 ) && 
            (x > 50) &&
            (y < 50) &&
            (y > 0) ) {
            color = "green"
        }

    }

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

        if ((x < 150 ) && 
            (x > 100) &&
            (y < 50) &&
            (y > 0) ) {
            color = "blue"
        }
    }



    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    //pantalla.onclick = rojo;
    //pantalla.onclick = verde;
    pantalla.onclick = azul;

</script>

no se como lograr que el onclick me funcione para los 3 colores, si descomento 2 colores ya no me funciona, alguna sugerencia, se que solo puede jalar una funcion, entonces como le hago cuando estoy ocupando mas de una funcion para un click, aqui la variable seria donde estoy dando click...

2 respuestas

solución!

por Estudiante

| 111.7k xp | 22 posts

28/12/2022

<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 puedoDibujar = false;

    //Variables para dibujar la paleta
    var xRojo = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yCuadrados = 0;
    var tamanhoCuadrados = 50;
    var colorActual = "blue";

    function dibujarCirculo(x,y,colorActual ) {

        if(puedoDibujar) {

            pincel.fillStyle = colorActual;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();

        }
    }

    //Función para dibujar cada uno de los cuadrados de la paleta
    function dibujarCuadrado(x, y, tamanho, color) {

        pincel.fillStyle = color;
        pincel.fillRect(x, y, tamanho, tamanho)
        pincel.fill();

    }

    //Función para dibujar la paleta de colores
    function dibujarPaletaColores() {

        dibujarCuadrado(xRojo, yCuadrados, tamanhoCuadrados, 'red');
        dibujarCuadrado(xVerde, yCuadrados, tamanhoCuadrados, 'green');
        dibujarCuadrado(xAzul, yCuadrados, tamanhoCuadrados, 'blue');

    }

    function habilitarDibujar() {

        puedoDibujar = true;

    }

    function deshabilitarDibujar() {

        puedoDibujar = false;

    }

    //Función para delimitar el área
    function puedeDisenharArea(xCoordenada,yCoordenada){

        if ((xCoordenada >= 0 && xCoordenada < (3*tamanhoCuadrados+5)) && 
            (yCoordenada >=0 && yCoordenada < (tamanhoCuadrados+5))) {

            return false;

        } else{

            return true;

        }

    }    

    function capturarMovimientoDelMouse(evento){

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

        if (puedeDisenharArea(x,y)){

                dibujarCirculo(x,y,colorActual);

        }

    }

    function seleccionarColor(evento) {

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

        //Cada condición altera el color de la variable colorActual

        //Comenzamos por la condición del eje Y que es común para todas
        if (y > yCuadrados && y < (yCuadrados + tamanhoCuadrados)) {

            if(x > xRojo && x < (xRojo + tamanhoCuadrados)) {

                colorActual = "red";
                console.log(colorActual);

            } else if (x > xVerde && x < (xVerde + tamanhoCuadrados)) {

                colorActual = "green";

            } else if(x > xAzul && x < (xAzul + tamanhoCuadrados)) {

                colorActual = "blue";

            }            


        }


    }

    pantalla.onmousemove = capturarMovimientoDelMouse;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    dibujarPaletaColores();

    pantalla.onclick = seleccionarColor;

</script>

Revisa el código del profesor, él lo tiene todo dentro de una función

por Edgar Paul Moreno Osuna

| 31.6k xp | 10 posts

03/01/2023

Gracias si vi en el foro como aplicarlo con una funcion, saludos!