Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

[Projeto] Trocando de cor - 4 versões (do fixo ao aleatório)

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 Trocando de cor

por Carlos Braga de Paiva Neto
| 632.1k xp | 441 posts

Fala, comunidade!!!

Todos bem por aí?

Mais uma aula show!!

Bem interessante este recurso de comandos com cliques do mouse, botão esquerdo, direito...

Mais um comando pra guardar e ter sempre à mão.

Fiz a proposta da aula, o código ficou desta maneira:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>trocar cor #1</title>

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

<script>

/*
    Programa desenhar círculo com clique do mouse no canvas
        Proposta do aula:
            botão esquerdo desenha círculo;
            botão direito muda cor.
*/

//    Trazer o canvas lá do HTML para o JS
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

//    preenchimento do canvas
    pincel.fillStyle = 'tan';
    pincel.fillRect(0, 0, 600, 400);

//    array para armazenar lista de cores
    var cores = ['olive', 'chocolate', 'sienna'];
    var indiceCorAtual = 0;

// função desenhar círculo com click do mouse na tela
    function desenharClick(evento){

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

        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log("posição x " + x + " y " + y);

    }

    tela.onclick = desenharClick;

//    função para mudar cor e repetir mudanças
  function mudarCor() {

        indiceCorAtual++;

        if (indiceCorAtual >= cores.length){
            indiceCorAtual = 0;
        }

//    para evitar exibir menu padrão do canvas
        return false;
  }
//    para alterar cor com clique do botão direito
  tela.oncontextmenu = mudarCor;

</script>

Aí, fiquei pensando que poderia fazer umas mudanças...

5 respostas
por Carlos Braga de Paiva Neto
| 632.1k xp | 441 posts

E cheguei na versão 0.2 do programa, que desenha e muda a cor sem precisar clicar com o botão da direita.

A cor muda a cada clique do botão esquerdo, desenha e muda a cor no mesmo clique.

O código é este:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>trocar cor #2</title>

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

<script>
/*
    Desenhar círculo com clique do mouse no canvas
    Programa Versão 0.2
            botão esquerdo desenha círculo e muda cor,
            sem precisar clicar com botão direito.
*/

//    Trazer o canvas lá do HTML para o JS
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

//    preenchimento do canvas
    pincel.fillStyle = 'tan';
    pincel.fillRect(0, 0, 600, 400);

//    array para armazenar lista de cores
    var cores = ['olive', 'chocolate', 'darkolivegreen', 'darkgoldenrod', 'sienna'];
    var indiceCorAtual = 0;

//     função desenhar círculo no click do mouse na tela
    function desenharClick(evento){

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log("posição x " + x + " , y = " + y);

        indiceCorAtual++;

//        repetição para alterar as cores e voltar ao início
        if (indiceCorAtual >= cores.length){
            indiceCorAtual = 0;
        }

//        para evitar exibir menu padrão do canvas
        return false;

    }

    tela.onclick = desenharClick;

</script>

Aí, achei que ainda poderia ser diferente...

por Carlos Braga de Paiva Neto
| 632.1k xp | 441 posts

E fiz a versão 0.3, que altera tanto a cor quanto o tamanho do círculo a cada clique do botão esquerdo.

  • Um array para cor (5 cores na lista)
  • e um array para tamanho (4 tamanhos)

O código ficou assim:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>trocar cor #3</title>

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

<script>
/*
    Desenhar círculo com clique do mouse no canvas
    Programa Versão 0.3
        a cada clique com botão esquerdo:
            muda cor conforme lista de cores;
            muda tamanho conforme lista de tamanhos.
*/

//    Trazer o canvas lá do HTML para o JS
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

//    preenchimento do canvas
    pincel.fillStyle = 'tan';
    pincel.fillRect(0, 0, 600, 400);

//    array para armazenar lista de cores
    var cores = ['olive', 'chocolate', 'darkolivegreen', 'darkgoldenrod', 'sienna'];
    var indiceCorAtual = 0;

// array para armazenar diferentes tamanhos
    var tamanho = [11, 5, 7, 3];
    var tamanhoAtual = 0;


// função desenhar círculo no click do mouse na tela
    function desenharClick(evento){

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, tamanho[tamanhoAtual], 0, 2 * 3.14);
        pincel.fill();
        console.log("posição x " + x + " , y = " + y);

        indiceCorAtual++;
        tamanhoAtual++;

        if (indiceCorAtual >= cores.length){
            indiceCorAtual = 0;
        }

        if (tamanhoAtual >= tamanho.length){
            tamanhoAtual = 0;
        }

//        para evitar exibir menu padrão do canvas
        return false;

    }

    tela.onclick = desenharClick;

</script>

bacaninha, né?

Mas ainda achei que poderia ter mais uma variação...

solução!
por Carlos Braga de Paiva Neto
| 632.1k xp | 441 posts

E assim, por enquanto, estou na versão 0.4 do programa (já justifica fazer um push lá pro GitHub!).

Uma proposta mais dadaísta, onde o acaso interfere no resultado.

A novidade desta versão é a mudança aleatória do tamanho do círculo. As cores continuam percorrendo a lista com o for.

Pra fazer a estrutura do número aleatório recuperei o Math.random lá daquela aula do sorteio do número.

Criei a função para gerar o número aleatório e também fiz um for para repetição e aninhei dentro da função desenharClick, onde já estava a repetição da cor.

Captura de tela com as janelas do navegador e do editor de código.

Eis o código:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>trocar cor #4</title>

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

<script>
/*
    Desenhar círculo com clique do mouse no canvas
    Programa Versão 0.4
        a cada clique com botão esquerdo:
            - muda cor [lista fixa de cores]
            - muda tamanho aleatoriamente (0 a 10).

*/


//    Trazer o canvas lá do HTML para o JS
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

//    preenchimento do canvas
    pincel.fillStyle = 'tan';
    pincel.fillRect(0, 0, 600, 400);

//    array para armazenar lista de cores
    var cores = ['olive', 'chocolate', 'darkolivegreen', 'darkgoldenrod', 'sienna'];
    var indiceCorAtual = 0;

//    função para gerar tamanho aleatoriamente
    function tamanho(n){
        return Math.round(Math.random() * n);
    }

    var tamanhoAtual = 0;

// função desenhar círculo no click do mouse na tela
    function desenharClick(evento){

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, tamanho(20), 0, 2 * 3.14);
        pincel.fill();
        console.log("posição x " + x + ", y " + y);

        indiceCorAtual++;
        tamanhoAtual++;

        if (indiceCorAtual >= cores.length){
            indiceCorAtual = 0;
        }

        if (tamanhoAtual >= tamanho.length){
            tamanhoAtual = 0;
        }

//        para evitar exibir menu padrão do canvas
        return false;

    }

    tela.onclick = desenharClick;

</script>

Este é o resultado que alcancei, consegui realizar o programa que imaginei, utilizando os conhecimentos adquiridos no curso até agora. Ainda tem alguns pontos que quero rever, mas ficam para a próxima versão.

O mais bacana é que, com certeza, iremos aprender uma maneira bem mais fácil de fazer um programa como este.

Heheheheheh

por Renan Cezar Wuicik
| 3166.9k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Olá Carlos, Tudo bem como você?

Gostaria de pedir desculpas pelo retorno tardio!

Eu estava analisando seus jogos, a estrutura, organização, formação, indentação, etc, e está tudo muito bom, eu não tenho nenhum ponto para citar sobre eles, todos estão muito bons!

PARABÉNS POR TODOS ELES, ELES ESTÃO MAGNIFÍCOS!

Eu testei todos eles e me diverti com todos eles, todas as ideias e versões que foram postadas aqui no fórum, eu tenho certeza que irão ser muito boas para o desenvolvimento e apoio para vários alunos, pois você é uma inspiração, seus projetos são muito bons, eu sempre me surpreendo quando vejo um tópico seu, todos os códigos seus que vi até o momento estavam tão bons que me tiraram todas as palavras, e novamente me vejo quase sem palavras diante de seus projetos.

Todos os seus tópicos são inspiradores e agregam muito para o meu próprio desenvolvimento também como parte da equipe da Alura, portando gostaria de lhe agradecer por toda a sua dedicação e empenho colocados nos nossos cursos e projetos.

Continue se dedicando e com todo esse empenho incrível.

Um grande abraço e bons estudos.

por Carlos Braga de Paiva Neto
| 632.1k xp | 441 posts

Valeu, Renan!!

Está sendo uma boa diversão realizar os projetos das aulas. Quando a obrigação vira diversão atingimos o nirvana, né?

Agradeço muito todo o apoio recebido de vocês, foram fundamentais, além do conteúdo de alto nível. Assim fica bem fácil realizar os exercícios da aulas.

Agora, é hora de encarar o challenge proposto. Focar nesta realização e se precisar venho pedir socorro a vocês.

Ah! E este projeto aqui dos círculos coloridos, pode ser uma boa "ferramenta de meditação", para aqueles momentos que precisa relaxar e encontrar solução aos problemas, clicar na tela despreocupadamente pode ser uma boa.

Abs e bom trabalho!!