Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Limite de clique!

solução

Olá Arthur!

Uma forma de fazer seria a seguinte:

<canvas id="tela" width="600" height="400"></canvas>
    <script>

    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle = "gray";
    c.fillRect(0,0,600,400);

    var counter = 0

    var atira = function(evento){    

            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            c.fillStyle = "blue";
            c.beginPath();
            c.arc(x,y,5,0,2*3.14);
            c.fill();

        if(counter == 9){
            alert("O numero de tentativas acabou.");
            window.location.reload();
        }

        counter++;
    };

    tela.onclick = atira;
    </script>
5 respostas

Entendeu a solução da Letícia, Arthur? É isso mesmo!

Se ela resolveu sua dúvida, marque a resposta dela como solução da sua dúvida clicando no link "Marcar como solução" logo abaixo da foto dela.

Creio que a solução da Letícia seja a ideal, pois acho que não há como colocar um loop automático para capturar os cliques da tela.

melhor do q isto seria apos ele clicar tantas vezes limpasse a tela automaticamente e ai se nao me engano vc faria o loop dos cliques e colocaria c.clearRect(0, 0, 600, 400);

OK Pessoal. Resolvido. Letícia, valeu pela ajuda. : )

Olá Pessoal.

Como faço pra colocar um loop nesse código abaixo para que quando o usuário clicar mais de 10 vezes no canvas o programa para de ser executado e mostra uma mensagem que o número de tentativas acabou?? Valeu!!

<canvas id="tela" width="600" height="400"></canvas>
<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

c.fillStyle = "gray";
c.fillRect(0,0,600,400);

var atira = function(evento){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x,y,5,0,2*3.14);
    c.fill();
};

tela.onclick = atira;

</script>