Entrar Ainda não tem acesso?
1
resposta

REDUÇÃO DE CÓDIGO ?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

por JOAO VICTOR COSTA SANTOS
| 53.5k xp | 8 posts
Estagiário de Desenvolvimento

Primeiro gostaria de falar que fiquei feliz porque não precisei olhar a solução do professor e consegui resolver sozinho e até adicionei mais uma cor, eu gostaria de saber se tem uma forma que posso reduzir meu código ainda mais , obrigado :D

<meta charset="UTF-8">

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

<script>

  function desenhaQuadrado(x, y, tamanho, cor) {

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

  function desenhaCirculo(x, y, raio, cor) {

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

  }

  function desenhaPaletaDeCores() {

    desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
    desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
    desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');
    desenhaQuadrado(xLaranja, yQuadrados, tamanhoQuadrados, 'orange');

  }

  function lidaComMovimentoDoMouse(evento) {

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

    if (desenha) {
      if (y > 60) {
        desenhaCirculo(x, y, 5, corAtual);
      }

    }

  }


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

    if (desenha) {
      desenhaCirculo(x, y, 5, 'red');

    }

  }


  function habilitaDesenhar() {

    desenha = true;
  }

  function desabilitaDesenhar() {

    desenha = false;
  }

  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');
  pincel.fillStyle = 'lightgray';
  pincel.fillRect(0, 0, 600, 400);

  var desenha = false;
  var corAtual = 'blue';
  var xVermelho = 0;
  var xVerde = 50;
  var xAzul = 100;
  var yQuadrados = 0;
  var tamanhoQuadrados = 50;
  var xLaranja = 150;


  desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores


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

    if (x > 0 && x < 50 && y > 0 && y < 50) {
      corAtual = 'red';
    }
    if (x > 50 && x < 100 && y < 50 && y < 100) {
      corAtual = 'green';
    }
    if (x > 50 && x < 100 && y < 50 && y < 100) {
      corAtual = 'green';
    }
    if (x > 100 && x < 150 && y < 100 && y < 150) {
      corAtual = 'blue';
    }
    if (x > 150 && x < 200 && y < 150 && y < 200) {
      corAtual = 'orange';
    }
  }

  tela.onclick = clicaCores;

  tela.onmousemove = lidaComMovimentoDoMouse;

  tela.onmousedown = habilitaDesenhar;

  tela.onmouseup = desabilitaDesenhar;

</script>
1 resposta
por Luis Fernando da Silva
| 86.1k xp | 14 posts
Assistente Fiscal - Contabilidade

Eae João, beleza?

Primeiramente parabéns pela resolução do exercício sozinho. Então eu fiz desta forma, se quiser dar uma olhada.

O que fiz de diferente do pedido no exercício, foi apenas proibir de desenhar na paleta de cores e não na primeira linha toda e deixar como primeira cor do pincel o preto.

<meta charset="utf-8">

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

<script type="text/javascript">

    function desenhaQuadrado(x, y, tamanho, cor) {
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.fill();
    }

    function desenhaCirculo(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*Math.PI);
        pincel.fill();
    }

    function desenhaPaletaDeCores(){
        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');
        desenhaQuadrado(xLaranja, yQuadrados, tamanhoQuadrados, 'orange');
    }

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

        if (x < 50 && y < 50) {
            corAtual = 'red';
        } else if (x > 50 && x < 100 && y < 50){
            corAtual = 'green'; 
        } else if (x > 100 && x <= 150 && y < 50) {
            corAtual = 'blue';
        } else if (x > 150 && x <= 200 && y < 50) {
            corAtual = 'orange';
        }

        if (x >= 0 && x <= 204 & y >= 0 && y <= 54) {
            desabilitaDesenhar();
        } else {
            desenhaCirculo(x, y, 5, corAtual);
        }
    }

    function habilitaDesenhar(){
        desenha = true;
    }

    function desabilitaDesenhar() {
        desenha = false
    }

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var desenha = false;
    var corAtual = 'black';
    var xVermelho = 0;
    var xVerde = 50;
    var xAzul = 100;
    var xLaranja = 150;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;

    desenhaPaletaDeCores();

    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

</script>