<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "white";
pincel.fillRect(0,0,600,400);
function circunferencia(x,y,radio,color) {
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiar() {
pincel.clearRect(0,0,600,400);
}
var radio = 10;
function objetivo(x,y) {
circunferencia(x,y,radio + 20,"red");
circunferencia(x,y,radio + 10,"white");
circunferencia(x,y,radio,"red");
}
function posicion(maximo) {
return Math.floor(Math.random()*maximo);
}
function actualizarPantalla() {
limpiar();
xAleatorio = posicion(600);
yAleatorio = posicion(400);
objetivo(xAleatorio,yAleatorio);
}
function disparar(evento) {
var x = evento.pageX;
var y = evento.pageY;
if ((x < xAleatorio + radio*3) &&
(x > xAleatorio - radio*3) &&
(y < yAleatorio + radio*3) &&
(y > yAleatorio - radio*3)){
alert("Buen tiro");
}
}
pantalla.onclick = disparar;
setInterval(actualizarPantalla,1000);
</script>
Les dejo mi codigo porque al inicio no me respondia la funcion disparar. Despues de leer varios reviews en el foro que les sucedia lo mismo le quite el var a xAleatorio y yAleatorio pero igual no funcionaba. No me quedo de otra que entrar en el developer Tools de chrome y por alguna extraña razon en la parte de source identificaba que estaba haciendo el click en el mouse pero decia que dentro de la funcion justo en la parte de offset tenia un error. Decidi volver al video y mirar si habia algo mal escrito y nada. Leia los codigos de los compañeros en el foro y todos los codigos parecian iguales. Le pregunte a chatGpt y solo me di el para que sirve el offset. Luego de una hora de intentos decidi quitarle el offsetLeft y Top y ver como reaccionaba y milagrosamente se le fue el error. Creo que este es uno de esos ejemplos de tantos memes que dicen: si funciona no lo toques. jajajaja Me alegro mucho lograrlo aunque las lagunas mentales aun estan ahi.
PD:. dentro de la funcion multiplique el radio*3 porque el radio = 10 y el circulo exterior es radio + 20 asi q por eso lo multiplique y funciona.
Espero que les ayude si tienen el mismo problema. Y lo resolvi leyendo en el developer tools de chrome la parte que dice sources la casilla al lado de console.
Buen dia a todos.