hola compañeros y facilitadores, necesito de su ayuda. Llevo horas buscando el error en mi código y no puedo encontrar el error, ya que no me sale el mensaje de usted acertó, consulté en ventana de desarrollador y tampoco fue útil, ya que no me dice dónde esta mi error.
<canvas width="600" height="400"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
var radio = 10; // implementamos la variable radio para homogenizar los tamaños de los circulos
var xAleatorio; // para ocupar if se necesita crear las variables xAleatorio y yAleatorio
var yAleatorio;
function disenharCircunferencia(x,y,radio,color){ // incrementamos un nuevo parametro que es color
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill()
}
function limpiarPantalla (){
pincel.clearRect(0,0,600,400)
}
var x = 0
// vamos a crear una nueva funcion que nos ayude a que el objetivo sea aleatorio por lo cual, le damos como parametro el x,y
function disenharObjetivo(x,y) {
disenharCircunferencia(x,y,radio +20, "red")
disenharCircunferencia(x,y,radio +10,"white")
disenharCircunferencia(x,y,radio,"red")
}
// ya que tenemos las coordenadas aqui abajo se genera nuestro valor aleatorio, por lo cual generamos funcion de sortear posicion con ayuda funcion de java con un valor maximo que es de nuestro canva
function sortearPosicion (maximo){
// va a retornar al valor al numero entero menor por ejemplo 27.83 seria 27
return Math.floor(Math.random()*maximo);
}
function actualizarPantalla(){
limpiarPantalla();// se pone la funcion en 1a posicion por que si no al final la pantalla quedará en blanco
xAleatorio = sortearPosicion(600);
yAleatorio = sortearPosicion(400);
disenharObjetivo(xAleatorio,yAleatorio); // aqui mi funcion diseñar objetivo va tener los parametros anteriormente establecidos
x++;
}
/*
// tambien generamos las coordenadas; tuvimos que subir las coordenadas a la funcion actualizarPantalla
xAleatorio = sortearPosicion(400);
yAleatorio = sortearPosicion(600);
*/
setInterval(actualizarPantalla,2000);
// por ultimo generamos nuestra funcion disparar por lo cual le damos como parametro el evento en donde se va a seleccionar el blanco y le decimos que solo considere dentro del area de todo el circulo rojo
function disparar (evento){
var x = evento.PageX - pantalla.offsetLeft; // para que el tiro sea más certero quitamos los marcos del canva
var y = evento.PageY - pantalla.offsetTop; // para que el tiro sea más certero quitamos los marcos del canva
if((x < xAleatorio + radio)&& // solo es cierto si se le da click unicamento en la parte derecha del radio
(x > xAleatorio - radio)&& // solo es cierto si se le da click unicamento en la parte izquierda del radio
(y < yAleatorio + radio)&& // solo es cierto si se le da click unicamento en la parte arriba del radio
(y > yAleatorio - radio) ){
alert("tiro certero");
}
}
pantalla.onclick = disparar;
</script>
será que pusé muchas anotaciones en mi código?