Incrementada no código e dúvidas sobre break

Fala Victor,

Não sei se entendi a ideia do seu programa, mas resolvi desenvolver o que entendi da sua proposta. kkk

Ficou bem diferente do que você fez e não ficou tão simples como parecia ser. kkkk

E ainda não está finalizado, pq eu ainda não consegui fazer com que o sistema não permita que a pessoa escreva errado o nome da cor. Se você for testar, não erre quando for escrever os nomes das cores.

Mas valeu pelo treinamento.

Vlw! Abraço.

Espero ter ajudado. Sucesso na sua jornada!!

<canvas width="1000" height="400"></canvas>
<script>

    function desenhaQuadrado(x, cor) {

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

        pincel.fillStyle = cor;
        pincel.fillRect(x, 0, 50, 50);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, 0, 50, 50);

    }
    var numeroCaixas = parseInt(prompt("Digite a quantidade de caixas que você quer desenhar.")); // 13
        while (isNaN(numeroCaixas) || numeroCaixas == 0){ // Com esse código eu digo que só aceito números 
            numeroCaixas = parseInt(prompt("ERRO: Digite um número válido. \nDigite a quantidade de caixas que você quer desenhar."));
        }
    var possibilidadesNumeroCores = numeroCaixas;
    if (numeroCaixas > 6){
        possibilidadesNumeroCores = 6;
    }
    var numeroCores = parseInt(prompt("De 1 até " + possibilidadesNumeroCores + ", digite quantas cores você gostaria de pintar as caixas?")); //3
        if (isNaN(numeroCores) || numeroCores == 0  || numeroCores > possibilidadesNumeroCores) {
            while (isNaN(numeroCores) || numeroCores == 0 || numeroCores > 6){
            numeroCores = parseInt(prompt("ERRO: Didite de 1 até " + possibilidadesNumeroCores + " para determinar as quantidades de cores que você gostaria de pintar as caixas?"));
            } 
        }
        if (numeroCores > possibilidadesNumeroCores) {
            while (numeroCores > possibilidadesNumeroCores) {  // Enquanto a pessoa digitar um valor maior do que o número de caixas eu pergunto novamente quantas 
                    numeroCores = parseInt(prompt("ERRO: Didite de 1 até " + possibilidadesNumeroCores + " para determinar as quantidades de cores que você gostaria de pintar as caixas?"));
            }
        }
    function fazendoCaixaPorCaixa () {

        var contaCaixasPorCor = 0;

        while (contaCaixasPorCor < caixasPorCor) { // 0 > 6

            desenhaQuadrado(x, coresIN[contadorBlocosPorCor]);
            x = x + 50;
            contaCaixasPorCor++;
        }
    }

    var x = 0;

    var coresOfertadas = [];

    var coresPT = [];

    var coresIN = [];

    var coresDisponiveisIN = ["blue", "purple", "green", "pink","yellow","red"];
    var coresDisponiveisPT = ["\nazul", "\nroxo", "\nverde", "\nrosa","\namarelo","\nvermelho"];


     var cont = 0;

     while (cont < numeroCores) { 
          var corEntrada = coresDisponiveisPT[cont];
           coresOfertadas.push (corEntrada);
           cont++;
      }

     var contador = 1;

while (contador <= numeroCores) {

       var corEscolhida = prompt("Digite a " + (contador) + "ª cor das caixas entre as opções: " + coresDisponiveisPT + ".");

        var i = 0;

        while (corEscolhida == coresPT[i]) {
                if (corEscolhida == coresPT[i]) {
                    corEscolhida = prompt("Digite a " + (contador) + "ª cor das caixas entre as opções: " + coresDisponiveisPT + "."); 
                } else {
                    i++;
                }
         }

        coresPT.push (corEscolhida);
        if (corEscolhida == "azul") {
        coresIN.push("blue");
        }
        if (corEscolhida == "roxo") {
            coresIN.push("purple");
        }
        if (corEscolhida == "verde") {
            coresIN.push("green");
        }
        if (corEscolhida == "rosa") {
            coresIN.push("pink");
        }
        if (corEscolhida == "amarelo") {
            coresIN.push("yellow");
        }
        if (corEscolhida == "vermelho") {
            coresIN.push("red");
        }
        contador++;
} 

    if (numeroCaixas%2 == 0) { // Verifico se o número é par
        var caixasPorCor = numeroCaixas / numeroCores;

        var contadorBlocosPorCor = 0;
        while (contadorBlocosPorCor < numeroCores){ 
            fazendoCaixaPorCaixa ();
            contadorBlocosPorCor++;
        }
    } else {
        numeroCaixas = numeroCaixas - 1;

        var caixasPorCor = numeroCaixas / numeroCores;

        var blocosPorCor = numeroCaixas / caixasPorCor; 

        var contadorBlocosPorCor = 0;

        while (contadorBlocosPorCor < blocosPorCor){
            fazendoCaixaPorCaixa ();
            contadorBlocosPorCor++;
        }
            var ultimaPosicao = numeroCores - 1;
            desenhaQuadrado (x, coresIN[ultimaPosicao]);
    }
</script>      

Salve Diógenes.

Cara, tenho que admitir que eu não entendi muito bem o seu código kkkkk mas achei muito legal, sua lógica é mais desenvolvida. Eu testei seu código, e acho que tem bugs pq sempre mostrava mais quadrados do que o usuário pedia.

E posso ter explicado mal minha dúvida no meu post acima. A minha principal dúvida era como implementar o break caso o número da fração fosse maior que o número total (por exemplo, o usuário disse que quer 10 quadrados no total, mas quer 20 quadrados de outra cor). Caso o usuário fizesse isso a pergunta deveria ser feita novamente

Estou com dúvidas de como implementar o break desde o lógica I kkkkkk

Mas obrigado pela ajuda! Tinha esquecido completamente do isNaN e você me lembrou

Acho que agora eu entendi o que você queria fazer.

Você queria que a pessoa dissesse quantas caixas no total ela queria desenhar, vamos supor: 5 caixas.

Depois ela ia falar: quero pintar 2 caixas.

Depois ela ia falar: quero pintar essas 2 caixas de amarelo.

(faltam 3 caixas ainda para ela decidir as cores)

Depois ela ia falar: quero pintar 1 caixa.

Depois ela ia falar: quero pintar essa 1 caixa de verde.

(faltam 2 caixas ainda para ela decidir as cores)

Vamos supor que ela tenha dito: quero pinta 4 caixas.

// Nessa hora que você queria que o sistema não permitisse que ela colocasse 4 caixas, pq só faltam 2 para ela escolher, certo?

Se foi meio que isso que eu falei, ok Entendi. Mas ainda assim difícil de te responder pq o seu código está confuso já no início, tanto as nomenclaturas que vc usa como as regras do seu programa.

Vou fazer um outro post e nesse outro post vou te dar um exemplo pontual de como que seria essa regra. Só não vai funcionar no seu código pq o seu código está meio bagunçado.

Você tem que arrumar as regras do seu sistema e arrumar seu código para depois conseguir aplicar essa regra de não permitir que o usuário escreve uma quantidade maior do que a permitida.

Veja abaixo os pontos que ficaram confuso já no início. Quando vc consertar esses pontos, por consequência irá mudar o restante do seu código para baixo.

Espero ter ajudado. Sucesso na sua jornada!!

var numeroTotal = prompt("Digite o total de casas."); // Primeiro, o que são as essas casas? Coloquei: 6 e Entendi que isso é o total de tudo.

var cor1 = prompt("Digite a cor que quer o número total de casas. \nblue \npurple \nred"); // Se eu falar blue, vão ser pintadas as 6 casas de azul? Entendo isso pq vc fala "número total de casas"

var numeroFracao = prompt("Digite a fração do total. "); // Fração do que? "Fração é uma parte de algo que foi divido, mas eu não dividi nada. Posso entender que tenha se confundido, o que vc queria era saber por quanto se queria dividir as 6 casas. Vamos supor, quero dividir por 2, então 6 / 2 = 3

var cor2 = prompt("Digite a cor que quer a casas fracionadas. \npink \nyellow \nwhite"); // Na varicável cor2 vc vc me pergunta outra cor, mas eu já não tinha escolhido a cor das 6 casa na variável cor1? Posso entender que tenha se confundido, e queria saber qual cor eu queria pintar essas outras 3  últimas casas. Das 6 casas,as primeiras seriam pintadas de azul e as outras 3 última de amarelo. 

var numeroResultado = 0;
var x = 0;
var quadrado = 0;

Fiz ai um código onde uso as regras que você queria ter feito no seu programa.

Nele eu coloquei a regra de não permitir que o usuário coloque um valor maior de caixas para pintar maior do que a quantidade de caixas que ele criou no início.

Você pode ver isso nas linhas 53 e 91. Onde eu fiz uns WHILEs com a condição de que se o usuário colocar determinado valor a mais do que o estipulado, então o sistema deve perguntar novamente.

Veja o código que eu escrevi. Eu coloquei várias anotações para que pudesse entender a aplicação do while na criação regras/condições para os valores do que o usuário coloca.

Isso meio que condiciona desde o início o seu usuário a colocar os dados que são permitidos de acordo na sua regra de negócio.

Espero ter ajudado. Sucesso na sua jornada!!

Não coube todo o código em um post, então terei que dividir em 2 posts.

PARTE 1:

<meta charset="UTF-8">

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

<script>

    var x = 0;

    function desenhaQuadrado(x, cor) {

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

        pincel.fillStyle = cor;
        pincel.fillRect(x, 0, 50, 50);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, 0, 50, 50);

    }


    // pergunto quantas caixas a pessoas quer desenhar
    var qtdCaixas = parseInt(prompt("Quantas caixas você gostaria de criar?"));

            //Você tem que pensar na regra do seu sitema para poder depois fazer seu código em cima disso.
            //Como na Regra do meu sistema eu irei fazer com a pessoa pinte com 3 cores, então eu não posso deixar com que a pessoa desenhe menos de 3 caixas, pois será no mínimo 1 caixa para cada cor.
            //Para isso eu criei um while:
            // Na sequência do código, será lido esse While para verificar a condição 
            while (qtdCaixas < 3) {  //a condição é: se o valor de qtdCaixas for Menor do que 3, então irá executar o bloco de comando da função while.
                qtdCaixas = parseInt(prompt ("Digite um número maior do que 2. Quantas caixas você gostaria de criar?")); // Se ela digitou, na primeira vez que foi feita a perguntada sobre a quantidade de caixas, um número maior do que 2, então será feita a pergunta novamente até ela dizer um número maior do que 2.
            }

            console.log(qtdCaixas);


    // As perguntas já são uma forma de você criar regras para o seu programa, falo que a pessoa tem que escolher entre 3 cores, então crio só 3 variáveis para as cores.
    // Eu já uso as perguntas para condicionar o usuário a seguir a minha regra de negócio que já foi previamente estabelecida.
    var cor1 = prompt ("Você irá pintar com 3 cores. \nCom qual cor você gostaria de pintar a primeira parte? \nblue \npink \nred");
        // Crio um while para repetir a perunta se a pessoa escrever errado umas das 3 cores
        while (cor1 != "blue" && cor1 != "pink" && cor1 != "red"){
            cor1 = prompt ("Digite corretamente a cor. \nCom qual cor você gostaria de pintar a primeira parte? \nblue \npink \nred");
        }


    //Aqui eu quero já saber quantas caixas a pessoa quer desenhar com a primeira cor.
    //Se a pessoa falou que irá fazer uma quantidade X de caixas, então eu não posso permitir que ela queira pintar mais do que a quantidade de caixas que ela criou.
    //Como ainda tenho 2 cores a serem pintadas, então irei reservar no mínimo 2 caixas. Para isso eu já indico o limite de caixas que ela poderá usar para a primeira cor.
    var quantidade1 = parseInt(prompt ("Digite um número menor do que " + (qtdCaixas - 1) + ". \nQuantas caixas você gostaria de pintar com a cor " + cor1 + " ?")); //Aqui ela só pode responder quantidade menor do que a da variável caixas

            //Aqui eu crio a regra para a pessoa não colocar a quantidade de caixas que ela quer pintar maior do que a quantidade de caixas que ela criou e não permito que ela coloque um valor que garanta no mínimo 2 as caixas para serem pintadas pelas outras 2 cores.
            //Para isso eu criei um while:
            // Na sequência do código, será lido esse While para verificar a condição 
            while (quantidade1 > qtdCaixas-2) {  //a condição é: se a quantidade1 foi maior a quantidade de caixas - 3 , então irá executar o bloco de comando da função while.
                quantidade1 = parseInt(prompt ("Digite um número menor do que " + (qtdCaixas - 1) + ". \nQuantas caixas você gostaria de pintar com a cor " + cor1 + " ?")); // Se ela digitou, na primeira vez que foi feita a perguntada sobre a quantidade que gostaia de printar com a 1ª cor, um número maior do que qtd de caixas, então será feita a pergunta novamente até dizer um número menor do que a quantidade de caixas.
            }



    // Seguindo minha regra de negócio
    // não posso permitir que queira pintar mais do que a quantidade que ainda tem disponível, então eu crio um limite. E irei usar esse dado para condicionar a perguntar da quantidade2
    var limiteQuantidade2 = (qtdCaixas - quantidade1)-1; //5-1 = 4

PARTE 2:

    if (limiteQuantidade2 == 1) {

            //Pergunto a segunda cor
            var cor2 = prompt ("Restam apenas " + (qtdCaixas - quantidade1) + " caixas. \nQual será a cor da sua segunda caixa? \ngreen \nblack \npurple");
                while (cor2 != "green" && cor2 != "black" && cor2 != "purple"){
                    cor2 = prompt ("Digite corretamente a cor. \nCom qual cor você gostaria de pintar a primeira parte? \ngreen \nblack \npurple");
                }

            var cor3 = prompt ("Qual será a cor da sua terceira e últma caixa? \ngrey \nbrown \norange");
                while (cor3 != "grey" && cor3 != "brown" && cor3 != "orange"){
                    cor3 = prompt ("Digite corretamente a cor. \nCom qual cor você gostaria de pintar a primeira parte? \ngrey \nbrown \norange");
                }

    } else {

            //Pergunto a segunda cor
            var cor2 = prompt ("Com qual cor você gostaria de pintar a segunda parte? \ngreen \nblack \npurple");
                while (cor2 != "green" && cor2 != "black" && cor2 != "purple"){
                    cor2 = prompt ("Digite corretamente a cor. \nCom qual cor você gostaria de pintar a primeira parte? \ngreen \nblack \npurple");
                }

            //Pergunto quantas caixas a pessoa quer desenhar com a segunda cor.
            var quantidade2 = parseInt(prompt ("Você poderá pintar até " + limiteQuantidade2 + " caixas com a cor " + cor2 + ". \nQuantas caixas você gostaria de pintar com a cor " + cor2 + " ?")); //Aqui ela só pode responder quantidade menor do que o limiteQuantidade2

                //Não posso permitir que ela queira pintar mais do que a quantidade de caixas ainda disponíveis.
                //Para isso eu criei um while:
                // Na sequência do código, será lido esse While para verificar a condição 
                while (quantidade2 > limiteQuantidade2) {  //a condição é: se a quantidade2 foi maior do que limiteQuantidade2, então irá executar o bloco de comando da função while.
                        quantidade2 = parseInt(prompt ("Você poderá pintar até " + limiteQuantidade2 + " caixas com a cor " + cor2 + ". \nQuantas caixas você gostaria de pintar com a cor " + cor2 + " ?")); // Se ela digitou, na primeira vez que foi feita a perguntada sobre a quantidade que gostaia de printar com a 2ª cor, um número maior do que limiteQuantidade2, então será feita a pergunta novamente até dizer um número menor do que limiteQuantidade2.
                }


            // Seguindo minha regra de negócio
            // Como é a última cor, então irá pintar as últimas caixas que sobraram
            //Crio um cálculo para eu saber quantas restaram.
            var quantidade3 = qtdCaixas - (quantidade1+quantidade2);

                console.log(quantidade3);


            //Pergunto sobre a terceira cor

            var cor3 = prompt ("Com qual cor você gostaria de pintar a(s) " + quantidade3 + " última(s) caixa(s)? \ngrey \nbrown \norange");
                while (cor3 != "grey" && cor3 != "brown" && cor3 != "orange"){
                    cor3 = prompt ("Digite corretamente a cor. \nCom qual cor você gostaria de pintar a primeira parte? \ngrey \nbrown \norange");
                }
    }

    console.log(cor1);
    console.log(cor2);

    for (var i = 1; i <= quantidade1; i++){
        desenhaQuadrado(x, cor1);
        x = x + 50;
    }

    for (var ii = 1; ii <= quantidade2; ii++){
        desenhaQuadrado(x, cor2);
        x = x + 50;
    }

    for (var iii = 1; iii <= quantidade3; iii++){
        desenhaQuadrado(x, cor3);
        x = x + 50;
    }


</script>