Frações melhorada 2

Boa, Róger! Mandou bem novamente!

Só um detalhe: seria interessante mostrar o todo caso eu resolva colocar numerador=2 e denominador=10, por exemplo;

Faça esses teste!

Está bacana!!! ;-)

Um abraço e bons estudos

Cara, gostei muito! Gostei tanto que resolvi mexer nesse código e abandonei o meu um pouquinho hahaha Na lousa os números e desenhos estavam ficando sobrepostos a cada rodada se o usuário não atualizasse a página, como eu não sei nenhum método de "resetar" a lousa, coloquei o comando pra desenhar a lousa dentro da sua função resultado, assim sempre é gerada uma lousa limpa em cima da outra. Pra página não ficar esquisita sem a lousa inicialmente, mantive no código um retângulo pra ser a lousa inicial vazia logo que se abre a página. Só passei lá pra baixo porque a meu ver fica mais organizado (linhas 89-91). Tinha uma aspas simples "sobrando" ali depois da tag < canvas > e por isso ela aparecia logo depois da sua lousa. Tirei ela também. Mudei o jogo de cores porque eu sou fresco kk e quis dar um toque de lousa e giz, já que o resultado final estava tão bacana! No geral foram só ajustes estéticos, mesmo.. de acordo com o meu gosto pessoal rs e o bug da sobreposição que eu resolvi, embora talvez não da melhor maneira. Tenho acompanhado seus códigos aqui, sempre mexo nos códigos dos colegas pra ver como está rodando e comparar com o meu ou fazer alterações tipo fiz no seu haha Se quiser se conectar comigo no linkedin, podemos trocar contato e discutir nossos códigos em tempo real, trocar insights no whats. Gosto do seu jeito de pensar. Nesse caso da fração, por exemplo, por mais que eu tenha aperfeiçoado meu código e criado uma função para desenhar qualquer fração, não tinha cogitado fazer um bangs interativo como você fez. De repente a gente acaba unindo forças e desenvolvendo algo bem legal no futuro. Entra em contato comigo se quiser :) linkedin/in/corcoviacaique Sinta-se bem-vindo a dar pitaco nos meus códigos também rs tenho postado nos tópicos do fórum. abraço! ah! vou colar aqui o código com as alterações que fiz:

<meta charset="utf8">

<b><big>    REPRESENTANDO FRAÇÕES</big></b>
<br>

As frações normalmente possuem um denominador e um numerador.
<br><br>

 O <b>numerador</b> representa a parte que será dividida.
<br>

 O <b>denominador</b> contém o número que dividirá a parte.
<br><br>

<b><i>  Agora vamos lá:</i></b>
<br>
<i> O primeiro número é o numerador <input type="text" id="numerador" size="5"></input> e o segundo número é o denominador <input type="text" id="denominador" size="5"></input>.</i><button>MOSTRAR</button><br>
<br>

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

<script>

    function mostra(frase) {

        document.write(frase);

        document.write("<br>");
    }

    function desenhaQuadrado(x, cor) {

        pincel.fillStyle = cor;

        pincel.fillRect(x, 50,50,50);

        pincel.strokeStyle = "white";

        pincel.strokeRect(x, 50, 50,50);
    }

    function desenhaTexto(texto, x, y){

        pincel.font = '20px Georgia';

        pincel.fillStyle = "white";

        pincel.fillText(texto, x, y);
    }

    var numerador = document.querySelector("#numerador");

    var denominador = document.querySelector("#denominador");

    var tela = document.querySelector('canvas');

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

    var x = 50;

    var y = 90;

    function resultado() {

        pincel.fillStyle = 'darkgreen';

        pincel.fillRect(0, 0, 1000, 400);

        desenhaTexto("A FRAÇÃO É :", 225,30);

        for (var deslocamento = 0; deslocamento < denominador.value; deslocamento++) {

            if (deslocamento < numerador.value){

                desenhaQuadrado((deslocamento*50+50), 'navy');
            } else {

                desenhaQuadrado((deslocamento*50+50),'darkgreen');
            }
        }

        desenhaTexto(numerador.value, 290,130 );

        desenhaTexto("__", 283,139);

        desenhaTexto(denominador.value, 290,160 );
    }

    pincel.fillStyle = 'darkgreen';

    pincel.fillRect(0, 0, 1000, 400);

    var button = document.querySelector("button");

    button.onclick = resultado;

</script>

Caique, gostei bastante das suas soluções. Achei interessante as alterações no layout e estava me incomodando o fato de não conseguir limpar a tela, ter que apertar f5 novamente. Mas como eu já havia gastado muita energia tentado solucionar outros problemas dele. Não quis continuar a empreitada. Obrigado pelos elogios, mais tarde irei olhar os seus códigos também. Até mais.

P.s.: Já o adicionei no Linkedin.