(Acidentalmente apaguei o que havia escrito, mas era basicamente pedindo para explicar essa funcao)
Solucionado
(Acidentalmente apaguei o que havia escrito, mas era basicamente pedindo para explicar essa funcao)
Rachel, Tudo bem?
Da forma que a função dispara está sendo implementada ela aceitará um parâmetro. Esse parâmetro foi nomeado de evento mas poderia ser qualquer outro nome ali.
Essa função vai ser atribuída a um evento de click do mouse, certo?... Então o clique do mouse será armazenado na variável evento.
O evento.pageX irá capturar a posição X (horizontal da posição do seu mouse, na hora do clique) e armazenar na variável x.
O evento.pageY irá capturar a posição Y (vertical da posição do seu mouse, na hora do clique) e armazenar na variável y.
O offsetLeft mede, em pixels, a distância da posição do clique em relação a borda esquerda do browser.
O offsetTop mede, em pixels, a distância da posição dp clique em relação a borda do topo do browser.
Retirar as bordas da posição do clique deixa mais preciso a verificação de acerto do alvo.
Você pode verificar esse feito, na prática, colocando o código abaixo dentro da função dispara, logo abaixo das variáveis.
console.log(pageX, x)
console.log(pageY, y)Você pode afastar um pouco o canvas das bordas para ir brincando com esses eventos.
Afasta da borda esquerda com:
<style>
canvas {
margin-left: 50px;
}
</style>
<!-- Aqui embaixo segue normal o código a partir da tag canvas -->