[Duda] Ayuda con código optimizado | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

2
respuestas

por Diego Alejandro Peñuela

| 35.7k xp | 30 posts

Ingeniero

Hola a todos. He leido al final del codigo del instructor que el codigo que se comparte puede optimizarse mas, me gustaria si alguien sabe o tiene un codigo opmitimizado o como puedo saber si mi codigo podria optimizarse mas. Gracias.

<meta charset="utf-8">

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


<script>    

    let pantalla=document.querySelector("canvas");
    let pincel=pantalla.getContext("2d");

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

    let color=["red","green","blue"];
    let inicio=0;

    //el for me crea los cuadros de 3 colores para que no tenga que repetir muchas mas lineas para crearlos por separado.
    for(let i=0;i<3;i++){
        pincel.beginPath();
        pincel.fillStyle = color[i];

        if(inicio===0){
            //pregunto si es el inicio, si lo es, grafico
            pincel.fillRect(0, 0, 50, 50);
            inicio=50;
        }
        else{
            //si no es el inicio sumo 50 para graficar todos unidos y con la misma medida. 
            pincel.fillRect(inicio, 0, 50, 50);
            inicio = inicio + 50;
        }

    }

//esta funcion se copio de dibujoConCursorSostenido---------------------------------------------------------
    let puedoDibujar = false;

    function dibujarCirculo(evento) {



        if (puedoDibujar) {

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

            if (x < 151 && y < 51) {
                console.log("No raye adentro");  
            }

            else{
                pincel.fillStyle = color[colorSeleccinado];
                pincel.beginPath();
                pincel.arc(x, y, 2, 0, 2 * 3.14);
                pincel.fill();
            }

        }

    }

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    function limpiarPantalla() {
            pincel.clearRect(0, 0, 600, 400);//me limpia todo el canvas desde la posicon 0,0 hasta 600,400
            pincel.fillStyle="lightgrey";
            pincel.fillRect(0,0,600,400);
    }




let colorSeleccinado;
let x;let y;

function elegirColor(evento){
//evaluo si el click en el canvas fue para cambiar el color o para dibujar

//capturo coordenadas del click=
x=evento.pageX-pantalla.offsetLeft;
y=evento.pageY-pantalla.offsetTop;

if(x<=50&&y<=50){

    colorSeleccinado=0;
    console.log("hizo click en el cuadro rojo.");

}

if(x>51&&x<=100&&y<=50){
     colorSeleccinado = 1;
    console.log("hizo click en el cuadro verde.")
}

if (x > 101 && x <= 150 && y <= 50) {
     colorSeleccinado = 2;
        console.log("hizo click en el cuadro azul.")
    }


}
pantalla.onmousemove = dibujarCirculo;

pantalla.onmousedown = habilitarDibujar;//click

pantalla.onmouseup = deshabilitarDibujar;//levantar clic

pantalla.onclick=elegirColor;


</script>

2 respuestas

por Edsel Yael Alván Ventura

| 145.9k xp | 75 posts

02/01/2023

Yo pienso que podemos generalizar varios de esos limites con un for. Para lograr esto, lo que hice fue recolectar las coordenadas iniciales de cada cuadrado, para que de ese punto tomemos los limites. Algo asi, asumiendo que el ancho es constante(es un cuadrado): Donde ahora solo le damos click a cualquier cuadrado:

x < xclick < x+50

y < yclick < y+50 Ahora lo que podemos hacer es recorrer nuestras coordenadas iniciales, de cada cuadrado de cada color, y decir esta condición. Cuando este dentro de su limite, le damos a break; para cortar el loop y se acabo. Algo asi:

function switchColor(){
    let xshot = event.pageX - pantalla.offsetLeft;
    let yshot = event.pageY - pantalla.offsetTop;
    let initLimitCoords = drawPalet();
    let width = 50;
    let color = "blue";
    for(let idx = 0; idx < initLimitCoords.length; idx++){
        let y = initLimitCoords[idx][1];
        let x = initLimitCoords[idx][0];
        color = idx == 0 ? "red" : idx ==1 ? "green" : idx == 2 ? "blue": "blue";
        let isin = (x < xshot & xshot < x+width)&&(y < yshot & yshot < y+width);
        if(isin){
            break;
        }
    }
    // alert(color+"!!");
    changeColorPincel(color);
}

Para hacer antes esto, solo debemos recolectar las coordenadas de la función que dibuja los cuadrados y que retorne las coordenadas.

Asi, si algun dia queremos mas colores, solo le agregamos uno más al lado de los que ya tenemos y no tocamos nada mas. El código completo seria este:

<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 colors = ["red","green","blue"];
    var puedoDibujar = false;
    var currentColor = colors[0];
    function changeColorPincel(color){
        pincel.fillStyle = color;
    }
    function dibujarCirculo(evento) {
        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();            
        }

    }
    function drawSquare(x,y,width,color){
        pincel.fillStyle = color;
        pincel.fillRect(x,y,width,width);
        pincel.fillStyle="grey";
        return [x,y];
    }
    function switchColor(){
        let xshot = event.pageX - pantalla.offsetLeft;
        let yshot = event.pageY - pantalla.offsetTop;
        let initLimitCoords = drawPalet();
        let width = 50;
        let color = "blue";
        for(let idx = 0; idx < initLimitCoords.length; idx++){
            let y = initLimitCoords[idx][1];
            let x = initLimitCoords[idx][0];
            color = idx == 0 ? "red" : idx ==1 ? "green" : idx == 2 ? "blue": "blue";
            let isin = (x < xshot & xshot < x+width)&&(y < yshot & yshot < y+width);
            if(isin){
                break;
            }
        }
        // alert(color+"!!");
        changeColorPincel(color);
    }
    function drawPalet(){
        let coords = [20,20];
        let initCoordsSquare = [];
        initCoordsSquare.push(drawSquare(coords[0],coords[1],50,colors[0]));
        initCoordsSquare.push(drawSquare(coords[0]+50,coords[1],50,colors[1]));
        initCoordsSquare.push(drawSquare(coords[0]+100,coords[1],50,colors[2]));
        return initCoordsSquare;
    }

    pantalla.onmousemove = dibujarCirculo;
    pantalla.onclick = switchColor;
    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>

por Jonatan Oswaldo Cervantes Martínez

| 71.2k xp | 50 posts

02/01/2023

seguiré tu post, el mío es parecido