Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Fiz um dado virtual porem não funciona o botão.. O que tem de errado no codigo?

<meta charset="UTF-8">
<canvas width="50" height="50"></canvas></br>
<button>Rola o dado</button>
<script>

    function sorteiaNumero() {

       return Math.round(Math.random() * 6);

        }

        var dado = sorteiaNumero();

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

        pincel.strokeStyle= "black";
        pincel.strokeRect(0, 0, 50, 50);

    function um() {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(25, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        }

    function dois() {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        }

        function tres() {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(25, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 40, 5, 0, 2 * 3.14);
        pincel.fill();

        }

        function quatro() {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 40, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 40, 5, 0, 2 * 3.14);
        pincel.fill();

        }

        function cinco() {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(25, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 40, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 40, 5, 0, 2 * 3.14);
        pincel.fill();

        }

        function seis() {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 40, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 40, 5, 0, 2 * 3.14);
        pincel.fill();

        }

        if(dado == 1) {
        um();
        }
        if(dado == 2) {
        dois();
        }
        if(dado == 3){
        tres();    
        }
        if(dado == 4) {
        quatro();     
        }
        if(dado == 5) {
        cinco();    
        }
        if(dado == 6) {
        seis();    
        }

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

</script>
4 respostas

Ainda não sei muita coisa, por isso do código estar enorme..

solução!

Olá Cezar, Notei algumas coisas que precisavam ser mudadas, primeiro a função sorteiaNumero não faz nenhuma mudança no dado, ela só sorteia um número para o dado, a mudança do dado é executada pelo código abaixo, contudo ele não pode ser invocado depois da execução inicial porque não está em uma função.

Eu ajustei isso colocando ele na própria função e adaptando as funções de um a seis para que elas recebessem o objeto pincel para usar.

Por fim adicionei a função como listener do evento onclick do botão de rolagem.

<meta charset="UTF-8">
<canvas width="50" height="50"></canvas></br>
<button>Rola o dado</button>
<script>

    function sorteiaNumero() {
        return Math.round(Math.random() * 6);
    }

    function um(pincel) {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(25, 25, 5, 0, 2 * 3.14);
        pincel.fill();

    }

    function dois(pincel) {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 25, 5, 0, 2 * 3.14);
        pincel.fill();

    }

    function tres(pincel) {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(25, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 40, 5, 0, 2 * 3.14);
        pincel.fill();

    }

    function quatro(pincel) {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 40, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 40, 5, 0, 2 * 3.14);
        pincel.fill();

    }

    function cinco(pincel) {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(25, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 40, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 40, 5, 0, 2 * 3.14);
        pincel.fill();

    }

    function seis(pincel) {

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 10, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 25, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(10, 40, 5, 0, 2 * 3.14);
        pincel.fill();

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(40, 40, 5, 0, 2 * 3.14);
        pincel.fill();

    }


    var rolaDado = function () {
        var dado = sorteiaNumero();
        console.log('Numero Sorteado: ' + dado);

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

        pincel.strokeStyle= "black";
        pincel.strokeRect(0, 0, 50, 50);

        if(dado == 1) {
            um(pincel);
        }
        if(dado == 2) {
            dois(pincel);
        }
        if(dado == 3){
            tres(pincel);    
        }
        if(dado == 4) {
            quatro(pincel);     
        }
        if(dado == 5) {
            cinco(pincel);    
        }
        if(dado == 6) {
            seis(pincel);    
        }
    }

    rolaDado();

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

</script>

Tinha preparado outra resposta explicando o passo a passo seguido do código, mas a alura limitou o número de caracteres.

Tinha preparado outra resposta explicando o passo a passo seguido do código, mas a alura limitou o número de caracteres.