Exercício Obra de Arte | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Estudante

| 153.8k xp | 5 posts

Pessoal,

No último exercício proposto, não tive problema nenhum para criar a função de troca de cor.

Entretanto, fiz um pouco diferente a condição para que não fosse desenhado sobre a paleta, conforme abaixo:

// início do código suprimido

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

        if (desenha) {
            desenhaCirculo(x, y, 5, corAtual);
            if((x >= xRed) 
                && (x < xBlue + tamanhoQuadrados + 10) 
                    && (y >= yQuadrados) 
                        && (y < tamanhoQuadrados + 10)) {
                desenha = false;
            }
        }
    }

// restante do código segue abaixo

Há dois pequenos problemas com esta forma:

Se o pincel chega no limite da paleta e continuamos com o traço, o programa não continua pintando automaticamente após deixar os limites dela. No código do Flávio, o traço parava quando o cursos estava sobre a paleta, mas continuava quando saía dela sem precisarmos clicar e segurar novamente o botão do mouse;
Da forma que está, quando clico sobre a paleta para selecionar uma cor, aparece um único círculo com a cor antiga antes que o navegador aborte a pincelada e troque efetivamente a cor.

Não sei se consegui explicar direito, mas gostaria de compreender porque isso acontece.

2 respostas

solução!

por Maison Galvão

| 1029.1k xp | 1128 posts

Moderador Desenvolvedor de Sistemas

12/11/2018

Oi Felipe, o que tá acontecendo é que está sendo permitido o desenho sobre a paleta que é justamente o que não queremos nesse exercício. Por isso existem duas verificações que são feitas durante a execução do algoritmo a primeira envolve se podemos ou não desenhar.

function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

A príncipio não podemos desenhar até que clicamos com o botão esquerdo do mouse (onmousedown) aí desenhar fica true certo, só que somente isso não basta também temos que garantir que não possamos desenhar sobre a paleta de cores, por isso temos mais uma verificação:

function podeDesenharNaArea(x, y) {

        if(x >= 0 && x < 600 && y >= 0 && y < 80) {
            return false;
        } else {
            return true;
        }

    }

Que verifica se estamos fora da paleta de cores se sim pode desenhar caso contrário não.

Quando estamos lidando com o movimento do mouse checamos as duas verificações (uma só não basta) para então desenharmos:

if(desenha && podeDesenharNaArea(x,y)) {
      desenhaCirculo(x, y, 5, corAtual);
}

Se você verificar o que desabilita o desenho é somente se o mouse deixar de ser pressionado(onmouseup), já no seu código ocorre uma desabilitação aqui:

if (desenha) {
            desenhaCirculo(x, y, 5, corAtual);
            if((x >= xRed) 
                && (x < xBlue + tamanhoQuadrados + 10) 
                    && (y >= yQuadrados) 
                        && (y < tamanhoQuadrados + 10)) {
                desenha = false;
            }
        }

Ná técnica de coalisão por isso o botão precisa ser clicado novamente.Para que o desenha volte a ser true.

Esses trechos de códigos que apresentei mais acima, são essenciais para que o comportamento que você citou aconteça normalmente.

Espero ter ajudado e bons estudos.

por Vinicius Bortoletto

| 115.3k xp | 81 posts

13/11/2018

É como o Maison disse, por você estar declarando desenha = false no final, o programa entende que você quer parar de desenhar completamente, e não apenas evitar desenhar nos quadrados.

Por isso deve-se criar a função (podeDesenharNaArea) com os limites da área onde pode ser desenhado. Assim esse limite já é criado antes mesmo de clicar o mouse.