Estava testando algumas que vi durantes o cursos de javascript e um pouco mais além tentei fazer um pequeno jogo por prática, queria q desse uma olhada no código. Código abaixo.
<!doctype html>
<html>
<head>
<title> tirao </title>
<meta charset="utf-8">
</head>
<body>
<canvas id="tela" width="600" height="400" style="border: 2px solid black;"></canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
var circulo = function (x, y, raio, cor){
c.fillStyle = cor;
c.beginPath();
c.arc(x, y, raio, 0, 2*3.14);
c.fill();
};
var desenhaAlvo = function (x, y){
circulo (x, y, 30, "red");
circulo (x, y, 20, "white");
circulo (x, y, 10, "red");
};
var limpaTela = function () {
c.clearRect(0, 0, 600, 400);
};
var sorteia = function (max){
return Math.floor(Math.random() * max);
};
var desenha = function(){
limpaTela();
alvoX = sorteia(600);
alvoY = sorteia(400);
desenhaAlvo(alvoX, alvoY);
};
onclick = function (e) {
var x = e.pageX - tela.offsetLeft;
var y = e.pageY - tela.offsetTop;
document.getElementById("posicao").innerHTML = x+","+y;
document.getElementById("objeto").innerHTML = alvoX+","+alvoY;
if(x == alvoX && y == alvoY){
console.log('Acertou');
}else{
console.log('Erro');
}
};
setInterval(desenha, 3000);
</script>
<div>Posição do click<p id="posicao"></p></div>
<div>Objeto<p id="objeto"></p></div>
</body>
</html>Eu clico na posição e tenho algumas funções para ficar alterando a posição do objeto, porém a informação de clique é diferente da posição do objeto.
