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>
