[Duda] A un paso del proyecto final (Practicando con juegos) | Lógica de programación: Practicando con juegos y animaciones

Solucionado (ver solución)

Solucionado
(ver solución)

2
respuestas

por Ulises Acosta Campuzano

| 83.4k xp | 10 posts

Hola, tengo una duda, ya realice el código donde se puede seleccionar y cambiar por cualquier color en cualquier momento en canvas, mientras no elijas un color, este permanecerá en gris o su equivalente de no realizar ningún dibujo, hasta aquí todo bien, pero no logro hacer que una vez ya elegido el color siga dibujándolo como en paint. Anexo código. Saludos

<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 dibujarCuadrado(x,y,color){
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.fillRect(x,y,50,50); 
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,50,50); 

    }

    dibujarCuadrado(0,0,"red");
    dibujarCuadrado(50,0,"green");
    dibujarCuadrado(100,0,"blue");

    var colorActual = "grey"

   function SeleccionarColor(evento){

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        console.log(evento)
        if (x>=0 && x<=49 && y>=0 && y<=50){
           colorActual= "red"
           }
            if (x>=50 && x<=99 && y>=0 && y<=50){
               colorActual = "green"
               }
               if (x>=100 && x<=150 && y>=0 && y<=50){
                  colorActual = "blue"
                  }
    }

    function HabilitadoDibujar(evento){

               var x = evento.pageX - pantalla.offsetLeft;
               var y = evento.pageY - pantalla.offsetTop;
               if( x < 150 && y > 50){
                  pincel.fillStyle = colorActual
                  pincel.beginPath();
                  pincel.arc(x,y,5,0,2*3.14);
                  pincel.fill();
                 }

                  if( x> 150 && y >= 0){
                     pincel.fillStyle = colorActual 
                     pincel.beginPath();
                     pincel.arc(x,y,5,0,2*3.14);
                     pincel.fill();
                    }
      }


     pantalla.onclick= SeleccionarColor;
     pantalla.onmousedown = HabilitadoDibujar;

</script>

2 respuestas

por Bruno Botelho de Souza

| 3933.7k xp | 14897 posts

Alura Scuba Team Scuba Team | Front-end

04/05/2023

¡Hola Ulises!

La lógica de tu código no está bien para lo que deseas hacer, por esto no se está dibujando como debería.

Sugiero que hagas la lectura https://app.aluracursos.com/course/logica-de-programacion-juegos-animaciones/task/72862 de la actividad y también de la opinión del instructor, para esto debes hacer clic en ver opinión del instructor. Analice cada etapa e intente entender lo que cada línea de código está haciendo. Compare con tu solución e intente entender las diferencias entre tu código y el código que está presentando el instructor, esto hace parte del aprendizaje.

Si aún encuentras dificultad puedes volver a publicar aquí que te ayudaré a entender cualquier parte que tengas dificultad.

Sigue estudiando y practicando que lograrás hacer los ejercicios, estás en buen camino.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!

solución!

por Ulises Acosta Campuzano

| 83.4k xp | 10 posts

04/05/2023

Buen Dia

Gracias por responder, el codigo lo solucione al siguiente dia de postear el mensaje anterior. Anexo codigo.

<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 dibujarCuadrado(x,y,color){
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.fillRect(x,y,50,50); 
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,50,50); 

    }

    dibujarCuadrado(0,0,"red");
    dibujarCuadrado(50,0,"green");
    dibujarCuadrado(100,0,"blue");

    var colorActual = "grey"
    var presionado = false
    function activar(){
        presionado =true
    }


     function desactivar(){
        presionado = false
     }

        function capturarMovimientoDelMouse(evento){

            if(presionado){
                var x = evento.pageX - pantalla.offsetLeft;
                var y = evento.pageY - pantalla.offsetTop;
                console.log(x,y)
                if(( x < 150 && y > 50) || ( x> 150 && y >= 0)){
                  pincel.fillStyle = colorActual
                  pincel.beginPath();
                  pincel.arc(x,y,5,0,2*3.14);
                  pincel.fill();
                 }
            }
            else{
                SeleccionarColor(evento)
            }

    }

   function SeleccionarColor(evento){

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        console.log(evento)
        if (x>=0 && x<=49 && y>=0 && y<=50){
           colorActual= "red"
           }
            if (x>=50 && x<=99 && y>=0 && y<=50){
               colorActual = "green"
               }
               if (x>=100 && x<=150 && y>=0 && y<=50){
                  colorActual = "blue"
                  }
    }



     pantalla.onclick= SeleccionarColor;
     pantalla.onmousedown = activar;
     pantalla.onmouseup = desactivar;
     pantalla.onmousemove = capturarMovimientoDelMouse;



</script>

Me faltaba declarar algunas variables y activar/desactivar el mouse, ademas de reducir varias lineas de codigo.

Saludos