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

Ajuda com esta pequena elaboração que fiz no 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 Trocando de cor

por Niedson Barros Brandão
| 46.5k xp | 38 posts

Boa Tarde Pessoal!

Decidi incrementar um pouco o código referente a este exemplo. Utilizei alguns conceitos já explicados nos cursos de Lógica de programação, como o próprio usuário inserir por meio de um alert as cores que ele gostaria de utilizar. Essas cores não devem ser adicionadas quando já tiverem sido inseridas previamente. Porém, empaquei justamente no IF que vai fazer essa confirmação se a cor já existe ou não. Alguém consegue me ajudar a encontrar uma solução pra esse caso? Abaixo segue meu código:

<meta charset="UTF-8>">
<body>
<canvas width="600" height="400"></canvas>

    <script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

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

    var cores = [];
    var indiceCorAtual = 0; 

    var nome = prompt("Qual o seu nome?");
    var quantidadeCores = parseInt(prompt(nome + ", quantas cores você quer utilizar para desenhar?"));

    for(var contador = 1; contador <= quantidadeCores; contador++){
        var cor = prompt(nome + ", informe a cor " + contador + " que você deseja!");

    var existe = false;

        for(var posicao = 0; posicao < cores.length; posicao++){
            if(cores[posicao] == cor){
                alert(nome + ", atenção!! A cor " + cor + " já foi adicionada, tente outra!!");
                existe = true;
                break;  //*aqui empaquei, quando o parâmetro informado já existe, a execução não continua de onde estava (Ex.: cor 2), ela parte pra próxima tentaviva (cor 3). *//

            }

            }
            if(existe == false){
                cores.push(cor);

        } 
    }

function desenhaCirculo(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(x + "," + y);

    }

function mudaCor(){
   indiceCorAtual++;

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

   alert(nome + ", a Cor mudou!!");
   return false; 
}

tela.onclick = desenhaCirculo;

tela.oncontextmenu = mudaCor;

    </script>
</body>
3 respostas
por Estudante
| 211k xp | 88 posts

Fiz uma questão que respondia essa questão chamada (Não existe ingredientes repetidos aqui), primeiramente no meu código o cliente informava a quantidade de cores que ele queria (Assim, teríamos um caso de parada. Não ficaria em loop eterno) e depois de informar a quantidade de ingredientes que ele queria ele inseria os elementos. Para evitar repetição eu usei uma função pronta chamada "indexOf()". Usei da forma abaixo:

while( contador <= quantidade) {

        var ingrediente = prompt("Informe o ingrediente " + contador);

        if (ingredientes.indexOf(ingrediente) == -1) {
            ingredientes.push(ingrediente);
            contador++;
        } 
    }

Esse função pronta (Por debaixo dos panos) percorre a lista e verifica se o elemento existe, caso exista ele retorna o index (posição que ele está na lista), caso o elemento não exista ele retorna um "-1". Ou seja, na minha lista o item só é adicionado caso ele não esteja lá. Aí sim, eu incremento o contador e ele pede o próximo ingrediente. Nesse meu código, ele vai pedir que você insira os ingredientes (sem repetição) até temos a quantidade de elementos que você previamente perguntou. Ou seja, se você informou que deseja 3 itens na lista, e colocar "A", "B", "B" ele vai informar que o elemento já existe e que insira o novo (Até você adicionar um novo), por exemplo: "A", "B", "C" aí sim ele deixa você fazer os próximos passo.

Espero ter ajudado.

por Estudante
| 211k xp | 88 posts

No seu caso eu usei o que eu tinha mencionado, e funcionou:

    var nome = prompt("Qual o seu nome?");

    var quantidade = parseInt(prompt("Quantas cores você vai adicionar?"));

    var contador = 1;

    while( contador <= quantidade) {

        var cor = prompt("Informe a cor " + contador);

        if (cores.indexOf(cor) == -1) {
            cores.push(cor);
            contador++;
        } 
    }

function desenhaCirculo(evento){ //Resto do seu código
solução!
por Niedson Barros Brandão
| 46.5k xp | 38 posts

Boa Tarde Maria Luíza, tudo bem?

Obrigado pela dica que você me deu, esta função pronta eu não conhecia e já adicionei aqui na minha lista pra estudar sobre no futuro. Eu acabei resolvendo meu problema declarando contador = contador - 1 dentro do IF que verifica se a cor já existe no array. Desta forma quando a cor já existir o contador no próximo loop continuará na posição anterior. Segue código que alterei:

var existe = false;

        for(var posicao = 0; posicao < cores.length; posicao++){
            if(cores[posicao] == cor){
                alert(nome + ", atenção!! A cor " + cor + " já foi adicionada, tente outra!!");
                contador = contador - 1; /* alteração que fiz*/
                existe = true;
                break;  //*aqui empaquei, quando o parâmetro informado já existe, a execução não continua de onde estava (Ex.: cor 2), ela parte pra próxima tentaviva (cor 3). *//

            }

            }
            if(existe == false){
                cores.push(cor);

        } 
        console.log(cores);
    }