Entrar Ainda não tem acesso?
2
respostas

Alert não aparece

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Nosso primeiro jogo e atividade Disparando contra o alvo

por Matheus Tives
| 21.4k xp | 6 posts

Dei uma mudada na estrutura ensinada pelo professor mas infelizmente não consegui fazer o alerta aparecer. Qual é o problema com meu código ?

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

<script>

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

    function cVermelho(n,v) {

    pincel.clearRect(0,0,1000,1000);

    n = Math.floor(Math.random() * 1000);
    v = Math.floor(Math.random() * 1000);

    pincel.fillStyle = "red";
    pincel.beginPath();
    pincel.arc(n,v,40,0, 2 * Math.PI);
    pincel.fill(); 

    pincel.fillStyle = "white";
    pincel.beginPath();
    pincel.arc(n,v,20,0, 2 * Math.PI);
    pincel.fill(); }

    function dispara(evt) {

    var x = evt.pageX
    var y = evt.pageY

    if((x > n - 20)
    && (x < n + 20)
    && (y > v- 20)
    && (y < v + 20)) {

        alert("Acertou!"); } 
        }

setInterval(cVermelho, 1000);

tela.onclick = dispara;

</script>
2 respostas
por Matheus Tives
| 21.4k xp | 6 posts

Já arrumei, parece que o problema é como os círculos estão sendo chamados junto com a randomização.

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

<script>

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

    function circulo(c,v,raio,cor) {

    pincel.fillStyle = cor
    pincel.beginPath();
    pincel.arc(c,v,raio,0, 2 * Math.PI);
    pincel.fill(); }

    function anima() {
    c = Math.floor(Math.random() * 1000);
    v = Math.floor(Math.random() * 1000);
    pincel.clearRect(0,0,1000,1000);
    circulo(c,v,40,"red");
    circulo(c,v,20,"white");
    circulo(c,v,10,"red"); }

    function dispara(evt) {

    var x = evt.pageX
    var y = evt.pageY

    if((x > c - 10)
    && (x < c + 10)
    && (y > v- 10)
    && (y < v + 10)) {

        alert("Acertou!"); } 
        }

setInterval(anima, 1000);

tela.onclick = dispara;

</script>
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Boa, Matheus! Mandou bem!

A intenção era não limitar o alvo dentro canvas?

Se essa foi a intenção, perfeito!!! =D

Pratique sempre e qualquer dúvida nos procure!!!

Um abraço e bons estudos