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

Sistema de Pontuação

Gostaria de fazer um sistema de placar, mas quando limpa a tela o placar some.

4 respostas
solução!

Boa noite, Pedro! Como vai?

Vc pode criar uma segunda canvas que será responsável apenas por mostrar o placar. Daí vc poderá deixar ela sem limpar. Assim vc não precisaria criar outro elemento diferentes e manteria a homogeneidade visual da tela.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos!

Boa noite!

Pedro, você pode escrever um input logo acima do canvas, dessa forma você terá um placar independente, por exemplo:

// Escrevendo um input do tipo texto, com valor inicial zero e desabilitado para edições manuais
<input type="text" value="0" disabled><br>
<canvas width="600" height="400"></canvas>

<script>

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

    function aumentaPlacar(pontosGanhos){

        // Use o "parseInt", pois o input é do tipo texto, então ele entende como string o que tem nele
        var valorPlacar = parseInt(placar.value);
        placar.value = valorPlacar + pontosGanhos;
    }

    // Daí você chama a função onde quiser, passando a quantidade de pontos que o "gamer" ganhou
    aumentaPlacar(10);

</script>

Espero que ajude, enquanto respondo eu treino bastante, então se tiver alguma bobagem por favor me corrijam, obrigado!

As duas deram certo obrigado.

Por nada, Pedro! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software