Entrar Ainda não tem acesso?
1
resposta

Como melhorar meu código

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Desenhando com o mouse com infinitas cores

por Mayla Siqueira
| 14.7k xp | 6 posts

Olá, Resolvi brincar e coloquei uma variável para cada botão do mouse. Os botões Shift e Alt funcionaram bem, porém não consigo fazer com que o botão "guarde" uma cor única e ao escolher a cor, ela acaba valendo para os dois.

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

Escolha uma cor! <input type="color">

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var corDireito = document.querySelector('input');
    var corEsquerdo = document.querySelector('input');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var raioDireito = 10; //se a variável estiver dentro da função, assim que soltar o shift, ela retorna à 10, porém se ela estiver fora da função ela incrementa.
    var incremento = 5;
    var raioEsquerdo= 10

    function botaoEsquerdo(evento) {

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

        if (evento.shiftKey && evento.altKey){
            alert ('Só uma tecla por vez, por favor!');
        } else if (evento.shiftKey && raioEsquerdo + incremento <= 40){
            raioEsquerdo = raioEsquerdo + incremento;
        } else if (evento.altKey && raioEsquerdo - incremento >= 10){
            raioEsquerdo = raioEsquerdo - incremento;

        }
        pincel.fillStyle = corEsquerdo.value;
        pincel.beginPath();
        pincel.arc(x, y, raioEsquerdo, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);


    }
    function botaoDireito(evento) {

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

        if (evento.shiftKey && evento.altKey){
            alert ('Só uma tecla por vez, por favor!');
        } else if (evento.shiftKey && raioDireito + incremento <= 40){
            raioDireito = raioDireito + incremento;
        } else if (evento.altKey && raioDireito - incremento >= 10){
            raioDireito = raioDireito - incremento;

        }
        pincel.fillStyle = corDireito.value;
        pincel.beginPath();
        pincel.arc(x, y, raioDireito, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

        return false

    }

    tela.onclick = botaoEsquerdo;

    tela.oncontextmenu = botaoDireito;

</script>

Como posso fazer para que cada botão "se lembre" da sua própria cor? E gostaria de saber como posso otimizar meu código, para que não fique tão grande. Obrigada

1 resposta
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Mayla tudo bem?

Ajustei o seu código para funcionar o pincel como pediu. Com relação ao tamanho do código tem como deixar menor usando javascript orientado a objetos que é um assunto que você vai ver lá pra frente em javascript no curso de javascript avançado.

Guarde seu código e depois revisite ele no futuro e tente atualizar usando javascript orientado a objetos.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <canvas width="600" height="400"></canvas>
<br>

Escolha uma cor para o botão direito: <input id="corDireito" type="color">
<br>
Escolha uma cor para o botão esquerdo: <input id="corEsquerdo" type="color">

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var corDireito = document.querySelector('#corDireito');
    var corEsquerdo = document.querySelector('#corEsquerdo');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var raioDireito = 10; //se a variável estiver dentro da função, assim que soltar o shift, ela retorna à 10, porém se ela estiver fora da função ela incrementa.
    var incremento = 5;
    var raioEsquerdo= 10

    function botaoEsquerdo(evento) {

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

        if (evento.shiftKey && evento.altKey){
            alert ('Só uma tecla por vez, por favor!');
        } else if (evento.shiftKey && raioEsquerdo + incremento <= 40){
            raioEsquerdo = raioEsquerdo + incremento;
        } else if (evento.altKey && raioEsquerdo - incremento >= 10){
            raioEsquerdo = raioEsquerdo - incremento;

        }
        pincel.fillStyle = corEsquerdo.value;
        pincel.beginPath();
        pincel.arc(x, y, raioEsquerdo, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);


    }
    function botaoDireito(evento) {

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

        if (evento.shiftKey && evento.altKey){
            alert ('Só uma tecla por vez, por favor!');
        } else if (evento.shiftKey && raioDireito + incremento <= 40){
            raioDireito = raioDireito + incremento;
        } else if (evento.altKey && raioDireito - incremento >= 10){
            raioDireito = raioDireito - incremento;

        }
        pincel.fillStyle = corDireito.value;
        pincel.beginPath();
        pincel.arc(x, y, raioDireito, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

        return false

    }

    tela.onclick = botaoEsquerdo;

    tela.oncontextmenu = botaoDireito;

</script>
</body>
</html>

Espero ter ajudado!!!